我正在尝试做一场壁球比赛,并认为设置球运动将是一个好的地方开始。我已经设法让球以我想要的方式反弹,它从左上角的50 to下降,反弹两次,然后重新回到它开始的位置。而不是连续移动后,重置,球只是停留在50便士从上角。
为什么球在重置后不移动?我怎样才能让球从重置中移动?
从这里开始,我想设置一个事件监听器重新启动球,然后再“发球”。任何关于把它放在哪里的建议都会很棒。这是我第一次尝试编码我自己的游戏,所以请记住,我是一个完全的菜鸟。
这是我的帆布代码。
代码语言:javascript运行复制
Squash
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var gravity = 0.2;
var bounceFactor = 0.6;
var ballSpeedX = 3;
var ballSpeedY = 10;
var ballSpeedY2 = 5;
var ballBounce = 0
var ballStartPos = 50
const resistence = 0.998
const ballWidth = 15;
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 60;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
}
function ballReset() {
ballX = ballStartPos;
ballY = ballStartPos;
}
function moveEverything() {
// this moves ball down
ballY += ballSpeedY;
// this moves the ball across
ballX += ballSpeedX;
// this speeds ball up as it's falling plus slows down making it fall
ballSpeedY += gravity;
ballSpeedX = ballSpeedX*resistence;
//this bounes the ball
if (ballY > canvas.height - ballWidth) {
ballSpeedY = -ballSpeedY
//this reduces height of the bounce
ballSpeedY *= bounceFactor;}
//this should count bounces
if (ballY > canvas.height - ballWidth){
ballBounce = ballBounce + 1;
}
//ball will bounce of right wall
if (ballX > canvas.width - ballWidth) {
ballSpeedX = -ballSpeedX}
//ball will bounce off left wall
if (ballX < 0 + ballWidth) {
ballSpeedX = -ballSpeedX}
if (ballBounce >= 2) {
ballReset()}
}
function drawEverything() {
//this draws the pong court
colourRect(0,0,canvas.width,canvas.height, 'black');
//this draws the ball
colourCircle(ballX, ballY, 10, "white")
function colourCircle(centreX, centreY, radius, drawColour) {
canvasContext.fillStyle = drawColour;
canvasContext.beginPath();
canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
canvasContext.fill();
}
//this function draws a rectangle
function colourRect(leftX, topY, width, height, drawColour) {
canvasContext.fillStyle = drawColour;
canvasContext.fillRect(leftX, topY, width, height);
} }