Question

我试着在这里查看其他答案，但我的代码不同，所以我不知道何时使用clearRect（）;清除旧的矩形，并给我的代码一个幻觉，正方形在我的屏幕上移动。

为了给读者一个视觉，我正在尝试创建我的第一个塔防游戏，所以我希望所有的敌人（方块）在一条线上移动但是有一点间距。

<!DOCTYPE html>
<html>
<head>
<title>Tower Defense</title>
</head>
<body>

<canvas id="canvas" height="600" width="600" style="background: url('pictures/map.png'); background-position:center; background-size:cover"></canvas>

<script type="text/javascript">

    let ctx = document.getElementById('canvas').getContext('2d');

    let enemies = [];

    window.onload = function() {
        setInterval(showEnemies, 60);
    }


    //this function shows all enemies that spawn;
    function showEnemies() {
        let x = 0;
        for (let i = 0; i < 10; i++) {
            let mainEnemy = new Enemy(x+=25, 75, 20, "blue");
            enemies.push(mainEnemy);
        }
        for (let i = 0; i < enemies.length; i++) {
            enemies[i].showEnemy();

            enemies[i].moveEnemy();
        }



    }

    function Enemy(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.speedX = 1;
        this.speedY = 1;

        this.showEnemy = function() {

            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.size, this.size);
        }

        this.moveEnemy = function() {
            this.x+=this.speedX;

        }
    }

</script>

如果有人可以给我一个关于在哪里放置clearRect（）的解释，我会非常感兴趣。

Answer 1

在绘制正方形之前，您需要每帧清除画布

ctx.clearRect(0, 0, 600, 600); 
for (let i = 0; i < enemies.length; i++) {
    enemies[i].showEnemy();
    enemies[i].moveEnemy();
}

我还建议将这部分代码移到showEnemies（）函数之外

for (let i = 0; i < 10; i++) {
        let mainEnemy = new Enemy(x+=25, 75, 20, "blue");
        enemies.push(mainEnemy);
    }

如何根据我的代码

1 个答案: