Question

我正在研究我的LD条目而且我有点卡住，所以时间至关重要。

我在香草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

你应该为画布连续请求动画框架，而不是使用球位置作为变量来增加/减少你应该使用它的速度，并且通过速度*时间的变化位置就像在示例中一样。

享受游戏编码的乐趣。

＆＃13;

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? =========
}
};

＆＃13;

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

1 个答案: