用步骤将绘制的形状移动到新的Y

Question

我正在写我的身份证，我有点卡住了，所以时间是最重要的。

我在香草JS工作，有网球/乒乓球的风格。有两个按钮，一个在上半部分，一个在下半部分的画布。

我让它工作，所以当点击他们移动‘球’-或+在Y轴。，但我想要它，所以当点击‘球’开始移动到另一边，它开始移动到另一边。可以分别是0和canvas.height，，但我不知道如何编写这个代码。

另一个特点是，我想要的是，你只能点击一个侧面，如果‘球’是碰撞。

CodePen：http://codepen.io/anon/pen/objWKN

var canvas, ctx, mouseX, mouseY, btn1, btn2, ball, ballX, ballY, ballSize, Score;

window.onload = function main() {

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = width = 320;
canvas.height = height = 560;
mouseX = 0;
mouseY = 0;
btn1 = new Button(0, width, 0, height/2);
btn2 = new Button(0, width, height/2, height);
moveX = width/2;
moveY = height/2;
ballSize = 20;
ballX = moveX;
ballY = moveY;

document.body.appendChild(canvas);

init();
}


function init() {
document.addEventListener('click', mouseClicked, false);

update();
}


function update() {


ctx.clearRect(0, 0, 300, 300);

ctx.beginPath();
ctx.fillStyle="red";
ctx.rect(0, height/2, width, height/2);
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc( ballX, ballY , ballSize/2, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();  
}



// button object
// checks if within bounds of 'button'
function Button(xL, xR, yT, yB) {
this.xLeft = xL;
this.xRight = xR;
this.yTop = yT;
this.yBottom = yB;
}

Button.prototype.checkClicked = function() {
if ( this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom) return true;
};



// event functions
// get position of mouse if its clicked on the canvas
function mouseClicked(e) {

mouseX = e.pageX - canvas.offsetLeft;
mouseY = e.pageY - canvas.offsetTop;

//btn1 clicked = move up
for (i = ballY; i > height; i++); {
    if (btn1.checkClicked()) { 
           ballY = ballY - 40;
    }
};


//btn2 clicked = move up
for (i = ballY; ballY > height; i++); {
    if (btn2.checkClicked()) { 
           ballY = ballY - 40; //========= what to put here? =========
    }
};

};

setInterval(update, 10);

任何帮助都是非常感谢的。

耽误您时间，实在对不起。

-Jordan

Answer 1

您应该使用requestAnimationFrame来连续绘制画布，而不仅仅是将球位置作为变量来增加/减少，您应该使用它的速度，以及按速度*时间变化的位置，如示例中所示。

游戏编码玩得开心。

​

var canvas, ctx, mouseX, mouseY, btn1, btn2, ball, ballX, ballY, ballSize, Score, speedY = 0, end, start;

window.onload = function main() {

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = width = 320;
canvas.height = height = 560;
mouseX = 0;
mouseY = 0;
btn1 = new Button(0, width, 0, height/2);
btn2 = new Button(0, width, height/2, height);
moveX = width/2;
moveY = height/2;
ballSize = 20;
ballX = moveX;
ballY = moveY;

document.body.appendChild(canvas);

init();
}


function init() {
document.addEventListener('click', mouseClicked, false);
start = new Date().getTime();
update();
}


function update() {
end = new Date().getTime();

ctx.clearRect(0, 0, 320, 560);

ctx.beginPath();
ctx.fillStyle="red";
ctx.rect(0, height/2, width, height/2);
ctx.fill();
ctx.closePath();
ballY += speedY * (end-start) / 1200
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc( ballX, ballY , ballSize/2, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
start = end;
requestAnimationFrame(update);
}



// button object
// checks if within bounds of 'button'
function Button(xL, xR, yT, yB) {
this.xLeft = xL;
this.xRight = xR;
this.yTop = yT;
this.yBottom = yB;
}

Button.prototype.checkClicked = function() {
if ( this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom) return true;
};



// event functions
// get position of mouse if its clicked on the canvas
function mouseClicked(e) {

mouseX = e.pageX - canvas.offsetLeft;
mouseY = e.pageY - canvas.offsetTop;
if (btn1.checkClicked()) { 
     speedY = 40;
}
if (btn2.checkClicked()) { 
           speedY = -40; //========= what to put here? =========
}
};

​