javascript - 如何每 5 秒更改一次变量，以便下一个球的行为与前一个球不同？我怎样才能添加多个球？

问题描述

如何使用相同的类将多个球添加到同一个画布上，但每次都更改其值？例如，首先是一个向右移动的蓝球，然后 5 秒后，生成一个向另一个方向移动的红球。我怎样才能将所有这些球存储在一个数组中？

我尝试使用与前一个相同的变量重复“新球（...）”，其中每个变量都包含一个随机数，认为每次我从该类创建一个新球时它们都会更改该随机值。但是什么也没有发生，或者我认为它只是创建了一个完全相同的新球，并且在最后一个球之上。我也试过这个，只是使用每 5 秒重复一次的函数，但结果相同。

<!Doctype html>
<html>
<head>
  <title>Ballgame</title>
  <meta charset="utf-8">
</head>
<style>
    canvas{
        background-color: lightgrey;
        outline:2px solid black;
        margin-top:20;
    }
    div{
        width:200px;
        height:200px;
        background-color: red;
        margin: 100px auto;

    }

</style>
<body>
    <center>
        <canvas id="canvas" height="600" width="800"></canvas>
    </center>
    <audio src="Media/bounce.mp3">


<script>
    "use strict"



        var canvas = document.getElementById("canvas");
        var canvasContext = canvas.getContext("2d");




        var bounce = document.querySelector("audio")
        var color;
        var radius;
        var posNeg = [-1,1]
        var speedx = 5 * posNeg[Math.floor(Math.random()*2)];
        var speedy = 3 * posNeg[Math.floor(Math.random()*2)];
        var randomx = Math.floor(Math.random()*700 +50)
        var randomy = Math.floor(Math.random()*500 +50)
    class Ball{
        constructor(x, y, speedx,speedy, radius, color){
            color = "hsla(" + Math.floor(Math.random()*360+1) +  ", 100%, 50%, 1)";
            radius = Math.floor(Math.random()*30 +2);
            this.x = x;
            this.y = y;
            this.speedx = speedx;   
            this.speedy = speedy;
            this.radius = radius
            this.color = color
        }


        draw(){
            canvasContext.beginPath ();
            canvasContext.arc(this.x,this.y,this.radius,0,Math.PI *2);
            canvasContext.strokeStyle = "black";
            canvasContext.lineWidth = 5;
            canvasContext.stroke();
            canvasContext.fillStyle = this.color;
            canvasContext.fill();
            canvasContext.closePath();
        }

        move(){
            this.x += this.speedx;
            this.y += this.speedy;
            if(this.x - this.radius < 0 || this.x +this.radius > canvas.width){
                this.speedx = -1 * this.speedx;
                bounce.play()
            }
            if(this.y - this.radius < 0 || this.y + this.radius > canvas.height){
                this.speedy = -1 * this.speedy;
                bounce.play()
            }
        }
    }
    var ball = new Ball(randomx, randomy, speedx, speedy, radius, color)

    function animate(){
        canvasContext.clearRect (0,0,canvas.width,canvas.height);
        ball.move();
        ball.draw();
        requestAnimationFrame(animate);
    }
    setInterval(function(){
        new Ball(randomx, randomy, speedx, speedy, radius, color);
    }, 5000)
    requestAnimationFrame(animate);
</script>
</body>
</html>

正如我之前所说，我认为它只是打印一个与前一个球完全相同的新球。因此我看不出有什么区别。我希望它创建一个新球，但具有不同的值，例如不同的颜色、半径和方向。

标签： javascripthtmlclasscanvas

javascript - 如何每 5 秒更改一次变量，以便下一个球的行为与前一个球不同？我怎样才能添加多个球？

问题描述

解决方案

推荐阅读