Question

我试图通过开发更多面向对象的javascript代码来改进我的javascript技能。虽然我熟练掌握Java OOP语法和概念，但在javascript方面我很失落。

虽然球初始化很好，但我无法弄清楚如何让球移动！如果有人可以提供帮助，我们将不胜感激。

至少目前，这个球应该只是从墙壁上弹回来了。画布。

以下是代码：

var canvas = document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var x=canvas.width/2;//x ball position
var y = canvas.height-30;//y ball posi
var dx=2;
var dy=-2;
var ballRadius = 10;
function Ball(){

}
//draws gameball
Ball.prototype.drawBall=function(){
    ctx.beginPath();
    ctx.arc(x,y,ballRadius,0,Math.PI*2);
    this.checkWalls();
    fillStyle="#0095DD";
    ctx.fill();
    ctx.closePath();
}
//dynamically draw balls position
Ball.prototype.draw=function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    this.drawBall();
    x+=dx;
    y+=dy;
    this.checkWalls(x,y,dx,dy);
}
Ball.prototype.refresh=function(){
    setInterval(this.draw(),8);
}

Ball.prototype.checkWalls=function(x,y,dx,dy){

    //reverse direction if ball hits top or bottom
    if(this.y+this.dy> canvas.height-ballRadius || this.y + this.dy <ballRadius){
        this.dy=-dy;
    }
    //reverse direction if ball hits left or right
    if(this.x+this.dx>canvas.width-ballRadius || this.x+this.dx<ballRadius){
        this.dx=-dx;
    }   
}

//instantiate objects
var ball = new Ball();
ball.refresh();

此处有更新：JSFIDDLE

Answer 1

当您执行setInterval(this.draw(), 8) this.draw()执行并返回undefined但它必须返回必须调用setInterval的函数时。

简单方法：

Ball.prototype.refresh=function(){
    var self = this;
    setInterval(function () {
        self.draw();
    },8);
}

this指向自身对象非常重要，因此您必须使用set local variable self

快捷方式：

Ball.prototype.refresh=function(){
    setInterval(this.draw.bind(this),8);
}

bind方法链接this.draw到this上下文并返回函数，就像在简单示例中一样。

Answer 2

更新了小提琴：https://jsfiddle.net/reko91/d6mce9yq/2/

最近在画布上工作，这就是我用过的。

// game loop function
    var loop = function () {
        //update();
        //draw();
    ball.refresh(); 
        window.requestAnimationFrame(loop, canvas);
    };
    window.requestAnimationFrame(loop, canvas);

同时在顶部添加此项以使其运行60fps：

window.requestAnimFrame = function() {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function */ callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
}();

这是你的工作墙小提琴：https://jsfiddle.net/reko91/d6mce9yq/7/

我改变了很多东西。

将x，y，dx，dy添加到实际球：

function Ball() {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;    
}

然后使用这些值（全部在小提琴中）。您的'checkwalls'功能现在看起来像：

Ball.prototype.checkWalls = function(x, y, dx, dy, thisBall) {

  //console.log(thisBall.dx)
  //reverse direction if ball hits top or bottom
  if (this.y > canvas.height - ballRadius || this.y < ballRadius) {
    //this.y-=dy;
    this.dy *= -1;
  }
  //reverse direction if ball hits left or right
  if (this.x > canvas.width - ballRadius || this.x < ballRadius) {
    //this.xdx;
    this.dx *= -1;
  }
}

希望有所帮助。

困惑于如何使用HTML5画布获得javascript原型

2 个答案: