使用阶梯将绘制的形状移动到新的Y

Moving drawn shape to new Y with steps

本文关键字：移动 绘制      更新时间：2023-09-26

我正在处理我的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

您应该请求AnimationFrame继续绘制您的画布，而不仅仅是使用球的位置作为变量来增加/减少，您还应该使用它的速度，以及按速度*时间的变化位置。

享受游戏编码的乐趣。

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

相关文章：