个人中心
gpt4 book ai didi

javascript - 任何人都可以解释为什么我得到一个 typeError 指出“this.draw 不是 ballFunction.move 的函数

转载 作者：行者123 更新时间：2023-11-30 13:56:46 26 4
gpt4 key购买 nike

<分区>

我想做的是动画圆圈从 Canvas 边界弹起。我可以用一个球来实现那个漂亮的意志。但是我的家庭作业要求我每两秒钟添加一个新球。最初我通过使用 for 循环将新对象列在数组中来尝试此操作，但无法想出一种方法来在一个时间间隔内从每个新创建的对象中调用“移动”方法。最后我决定创建变量 j 并将其设置为 0 并将其递增 10，因为间隔将每 10 毫秒执行一次函数“startAnim”。然后每两秒创建一个新对象，然后调用该对象的“移动”方法。 

<!DOCTYPE html>
<html>
<head>
        <title>Some document</title>

<body>
            <h1></h1>
<canvas id="canvas" width = "400" height = "400"></canvas>          
<script src= "https://code.jquery.com/jquery-2.1.0.js"></script>

<script> 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var arrayOfCollor = ["green", "red", "blue","gold","black","purple"];

var ballFunction = function(){
    this.x = 200;
    this.y = 200;
    this.xSpeed = 2;
    this.ySpeed = -3;
    this.radius = 10;
    ctx.fillStyle = arrayOfCollor[Math.floor(Math.random() * 
arrayOfCollor.length)];
}

ballFunction.prototype.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
}

ballFunction.prototype.move = function(){

ctx.clearRect(0,0,400,400);
ctx.strokeRect(0,0,400,400);
this.x += this.xSpeed;
this.y += this.ySpeed;
this.draw();
if(this.x > 400-this.radius|| this.x < 0 + this.radius){
this.xSpeed = -1* this.xSpeed;
}
if(this.y > 400 - this.radius || this.y < 0 + this.radius){
this.ySpeed = -1* this.ySpeed;
}
}

var j = 0;

function startAnim(){
j+= 10; 
 if( j === 2000){
     var ballOne = new ballFunction
     var ballOneInterval = setInterval(ballOne.move,10)
     }
 if( j === 4000){
     var ballTwo = new ballFunction
     var ballTwoInterval = setInterval(ballTwo.move,10)
    }
 if( j === 6000){
     var ballThree = new ballFunction
     var ballThreeInterval = setInterval(ballThree.move,10)
    }
 if( j === 8000){
     var ballFour = new ballFunction
     var ballFourInterval = setInterval(ballFour.move,10)
   }
if( j === 10000){
    var ballFive = new ballFunction
    var ballFiveInterval = setInterval(ballFive.move,10)
   }
if( j === 12000){
    var ballSix = new ballFunction
    var ballSixinterval = setInterval(ballSix.move,10)
    }
}
var startAnimInt = setInterval(startAnim,10);


</script>
</body>
</html>

我一直收到 draw 函数不是 ballFunction.move 中的函数，即使我将其插入。

26 4 0
文章推荐： c# - 通过在循环内添加更多元素来扩展 foreach 循环
文章推荐： javascript - 如何确保浏览器用户看到 img 标签？
文章推荐： javascript - p5.j​​s 我如何让一条线在两个方向上无限延伸
文章推荐： c# - Resharper 8，键入属性右大括号添加另一个}
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com