Javascript 未捕获范围错误：超过最大调用堆栈大小

所以我的程序应该像以前一样，当它在屏幕上弹来弹去的时候，每个人都希望它撞到角落，但是用一张图片而不是一个DVD徽标。我一直收到标题中提到的错误消息，处理它真的很令人沮丧

我的HTML代码是：

<img id = "image" onclick="main()" onmouseover="imgRotation()" onmouseout="backNormal()" src= *image source* alt="PlayCode logo">

<canvas id = "tv-screen">
</canvas>

我的JavaScript代码是：

var dvd = {
  x: 200,
  y: 300,
  xspeed: 10,
  yspeed: 10,
  img: document.getElementById("image")}
var canvas = document.getElementById("tv-screen");
var speed = 20;
var scale = 0.50;

function main(){
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    update();
}
function update() {
        dvd.x+=dvd.xspeed
        dvd.y+=dvd.yspeed
        checkHitBox();
        update();
    }

function checkHitBox(){
    if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
        dvd.xspeed *= -1;

    }

    if (dvd.y+dvd.img.height*scale >= canvas.hfeight || dvd.y <= 0){
        dvd.yspeed *= -1;
    }    

var-dvd={
x:200，
y:300，
速度:10,，
Y速度：10，
img:document.getElementById（“图像”）}
var canvas=document.getElementById（“电视屏幕”）；
无功转速=20；
var标度=0.50；
函数main（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
更新（）；
}
函数更新（）{
dvd.x+=dvd.x速度
dvd.y+=dvd.y速度
复选框（）；
更新（）；
}
函数复选框（）{
如果（dvd.x+dvd.img.width*scale>=canvas.width | | | dvd.x=canvas.hfeight | | dvd.y那么很明显，
update
函数有一个递归调用

function update() {
        dvd.x+=dvd.xspeed
        dvd.y+=dvd.yspeed
        checkHitBox();
        update(); // recursive call
    }

也许你想试试暂停

function update() {
        dvd.x+=dvd.xspeed
        dvd.y+=dvd.yspeed
        checkHitBox();
        setTimeout(update, 100) // every 100ms
    }

或者干脆用固定的时间间隔来代替

 function update() {
        dvd.x+=dvd.xspeed
        dvd.y+=dvd.yspeed
        checkHitBox();
    }
setInterval(update, 100);

在没有退出条件的情况下调用递归函数。请选中
update（）；
。