如何解决元素未在画布上呈现 更新
我正在做一个乒乓球游戏,一切都进行得很好,直到我编码了得分系统,该系统具有两个变量,一个变量用于玩家的得分,另一个变量用于ai的得分。当球越过桨叶时,它将检测到它击中了哪堵墙,并将1添加到正确的得分变量中,然后警告得分。现在,当我运行游戏时,canvas元素只是空白。我想知道这里是否有人可以弄清楚发生了什么。这是我的代码。
<canvas id='my' width='640' height='480'></canvas>
<script>
var canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");
function paddle(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speedModifier = 0;
this.hasCollidedWith = function(ball) {
var paddleLeftWall = this.x;
var paddleRightWall = this.x + this.width;
var paddleTopWall = this.y;
var paddleBottomWall = this.y + this.height;
if (ball.x > paddleLeftWall &&
ball.x < paddleRightWall &&
ball.y > paddleTopWall &&
ball.y < paddleBottomWall) {
return true;
}
return false;
};
this.move = function(keyCode) {
var nextY = this.y;
if (keyCode == 40) {
nextY += 5;
this.speedModifer = 1.5;
} else if (keyCode == 38) {
nextY += -5;
this.speedModifier = 1.5;
} else {
this.speedModifier = 0;
}
nextY = nextY < 0 ? 0 : nextY;
nextY = nextY + this.height > 480 ? 480 - this.height : nextY;
this.y = nextY;
};
}
var player = new paddle(5,200,25,100);
var ai = new paddle(610,100);
var ball = {
x: 320,y: 240,radius: 7,xSpeed: 2,ySpeed: 0,var playerscore = 0
var aiscore = 0
reverseX: function() {
this.xSpeed *= -1;
},reverseY: function() {
this.ySpeed *= -1;
},reset: function() {
alert('The score is now '
playerscore + ' to ' + aiscore);
this.x = 20;
this.y = 24 30;
this.xSpeed = 2;
this.ySpeed = 0;
},isBouncing: function() {
return ball.ySpeed != 0;
},modifyXSpeedBy: function(modification) {
modification = this.xSpeed < 0 ? modification * -1 : modification;
var nextValue = this.xSpeed + modification;
nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;
this.xSpeed = nextValue;
},modifyYSpeedBy: function(modification) {
modification = this.ySpeed < 0 ? modification * -1 : modification;
this.ySpeed += modification;
}
};
function tick() {
updateGame();
draw()
window.setTimeout("tick()",1000 / 60);
}
function updateGame() {
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;
if (ball.x < 0) {
ball.reset();
aiscore = aiscore + 1;
}
if (ball.x > 640) {
ball.reset();
playerscore = playerscore + 1
}
if (ball.y <= 0 || ball.y >= 480) {
ball.reverseY();
}
var collidedWithPlayer = player.hasCollidedWith(ball);
var collidedWithAi = ai.hasCollidedWith(ball);
if (collidedWithPlayer || collidedWithAi) {
ball.reverseX();
ball.modifyXSpeedBy(0.25);
var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;
ball.modifyYSpeedBy(speedUpValue);
}
for (var keyCode in heldDown) {
player.move(keyCode);
}
var aiMiddle = ai.y + (ai.height / 2);
if (aiMiddle < ball.y) {
ai.move(40);
}
if (aiMiddle > ball.y) {
ai.move(38);
}
}
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0,640,480);
renderPaddle(player);
renderPaddle(ai);
renderBall(ball);
}
function renderPaddle(paddle) {
ctx.fillStyle = "blue";
ctx.fillRect(paddle.x,paddle.y,paddle.width,paddle.height);
}
function renderBall(ball) {
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.radius,2 * Math.PI,false);
ctx.fillStyle = "pink";
ctx.fill();
}
var heldDown = {};
window.addEventListener("keydown",function(keyInfo) {
heldDown[event.keyCode] = true;
},false);
window.addEventListener("keyup",function(keyInfo) {
delete heldDown[event.keyCode];
},false);
tick();
</script>
编辑 因此,计分功能正在发挥作用,现在我正尝试使之发挥作用,以便在任一位玩家获得5分时停止游戏。我试图用回报来做到这一点;方法,但是现在我有和以前一样的黑屏问题。更新的代码在这里。
<canvas id='my' width = '640' height = '480'></canvas>
<script>
var canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");
canvas.style.display = 'block';
function paddle(x,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speedModifier = 0;
this.hasCollidedWith = function(ball) {
var paddleLeftWall = this.x;
var paddleRightWall = this.x + this.width;
var paddleTopWall = this.y;
var paddleBottomWall = this.y + this.height;
if (ball.x > paddleLeftWall &&
ball.x < paddleRightWall &&
ball.y > paddleTopWall &&
ball.y < paddleBottomWall) {
return true;
}
return false;
};
this.move = function(keyCode) {
var nextY = this.y;
if (keyCode == 40) {
nextY += 5;
this.speedModifer = 1.5;
} else if (keyCode == 38) {
nextY += -5;
this.speedModifier = 1.5;
} else {
this.speedModifier = 0;
}
nextY = nextY < 0 ? 0 : nextY;
nextY = nextY + this.height > 480 ? 480 - this.height : nextY;
this.y = nextY;
};
}
var player = new paddle(5,100);
var ai = new paddle(610,100);
var ball = {
x: 320,playerscore: 0,aiscore: 0,reverseX: function() {
this.xSpeed *= -1;
},reverseY: function() {
this.ySpeed *= -1;
},reset: function() {
alert('The score is now ' + playerscore + ' to ' + aiscore);
this.x = 20;
this.y = 24;
this.xSpeed = 2;
this.ySpeed = 0;
},isBouncing: function() {
return ball.ySpeed != 0;
},modifyXSpeedBy: function(modification) {
modification = this.xSpeed < 0 ? modification * -1 : modification;
var nextValue = this.xSpeed + modification;
nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;
this.xSpeed = nextValue;
},modifyYSpeedBy: function(modification) {
modification = this.ySpeed < 0 ? modification * -1 : modification;
this.ySpeed += modification;
}
};
function tick() {
updateGame();
draw()
window.setTimeout("tick()",1000 / 60);
}
function updateGame() {
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;
if (ball.x < 0) {
ball.reset();
aiscore = aiscore + 1;
}
if (ball.x > 640) {
ball.reset();
playerscore = playerscore + 1
}
if (ball.y <= 0 || ball.y >= 480) {
ball.reverseY();
}
var collidedWithPlayer = player.hasCollidedWith(ball);
var collidedWithAi = ai.hasCollidedWith(ball);
if (collidedWithPlayer || collidedWithAi) {
ball.reverseX();
ball.modifyXSpeedBy(0.25);
var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;
ball.modifyYSpeedBy(speedUpValue);
}
for (var keyCode in heldDown) {
player.move(keyCode);
}
var aiMiddle = ai.y + (ai.height / 2);
if (aiMiddle < ball.y) {
ai.move(40);
}
if (aiMiddle > ball.y) {
ai.move(38);
}
}
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0,480);
renderPaddle(player);
renderPaddle(ai);
renderBall(ball);
if (playerscore === 5)
{
alert('you won! the score was 5 to ' + aiscore);
ctx.clearRect(0,480);
canvas.style.display = 'none';
return;
}
if (aiscore === 5)
{
alert('you lost.. the score was ' + playerscore + ' to 5.' );
ctx.clearRect(0,480);
canvas.style.display = 'none';
return;
}
function renderPaddle(paddle) {
ctx.fillStyle = "blue";
ctx.fillRect(paddle.x,paddle.height);
}
function renderBall(ball) {
ctx.beginPath();
ctx.arc(ball.x,false);
ctx.fillStyle = "pink";
ctx.fill();
}
var heldDown = {};
window.addEventListener("keydown",function(keyInfo) {
heldDown[event.keyCode] = true;
},false);
window.addEventListener("keyup",function(keyInfo) {
delete heldDown[event.keyCode];
},false);
tick();
</script>
解决方法
该错误似乎出在您的reset
函数中-您已继续执行新行而未连接其余行;
reset: function() {
alert('The score is now '
playerscore + ' to ' + aiscore);
this.x = 20;
this.y = 24 30;
this.xSpeed = 2;
this.ySpeed = 0;
},
应该是
reset: function() {
alert('The score is now ' + playerscore + ' to ' + aiscore);
this.x = 20;
this.y = 24 30;
this.xSpeed = 2;
this.ySpeed = 0;
},
更新
发布此答案后,我发现了更多问题;
this.y = 24 30;
应为24 或 30;
this.y = 24;
这些在您的球对象中定义不正确;
varplayerscore = 0 var aiscore = 0
应该是
playerscore: 0,aiscore: 0,
var canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");
function paddle(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speedModifier = 0;
this.hasCollidedWith = function(ball) {
var paddleLeftWall = this.x;
var paddleRightWall = this.x + this.width;
var paddleTopWall = this.y;
var paddleBottomWall = this.y + this.height;
if (ball.x > paddleLeftWall &&
ball.x < paddleRightWall &&
ball.y > paddleTopWall &&
ball.y < paddleBottomWall) {
return true;
}
return false;
};
this.move = function(keyCode) {
var nextY = this.y;
if (keyCode == 40) {
nextY += 5;
this.speedModifer = 1.5;
} else if (keyCode == 38) {
nextY += -5;
this.speedModifier = 1.5;
} else {
this.speedModifier = 0;
}
nextY = nextY < 0 ? 0 : nextY;
nextY = nextY + this.height > 480 ? 480 - this.height : nextY;
this.y = nextY;
};
}
var player = new paddle(5,200,25,100);
var ai = new paddle(610,100);
var ball = {
x: 320,y: 240,radius: 7,xSpeed: 2,ySpeed: 0,playerscore: 0,reverseX: function() {
this.xSpeed *= -1;
},reverseY: function() {
this.ySpeed *= -1;
},reset: function() {
alert('The score is now ' + this.playerscore + ' to ' + this.aiscore);
this.x = 20;
this.y = 24;
this.xSpeed = 2;
this.ySpeed = 0;
},isBouncing: function() {
return ball.ySpeed != 0;
},modifyXSpeedBy: function(modification) {
modification = this.xSpeed < 0 ? modification * -1 : modification;
var nextValue = this.xSpeed + modification;
nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue;
this.xSpeed = nextValue;
},modifyYSpeedBy: function(modification) {
modification = this.ySpeed < 0 ? modification * -1 : modification;
this.ySpeed += modification;
}
};
function tick() {
updateGame();
draw()
window.setTimeout("tick()",1000 / 60);
}
function updateGame() {
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;
if (ball.x < 0) {
ball.reset();
ball.aiscore = ball.aiscore + 1;
}
if (ball.x > 640) {
ball.reset();
ball.playerscore = ball.playerscore + 1
}
if (ball.y <= 0 || ball.y >= 480) {
ball.reverseY();
}
var collidedWithPlayer = player.hasCollidedWith(ball);
var collidedWithAi = ai.hasCollidedWith(ball);
if (collidedWithPlayer || collidedWithAi) {
ball.reverseX();
ball.modifyXSpeedBy(0.25);
var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier;
ball.modifyYSpeedBy(speedUpValue);
}
for (var keyCode in heldDown) {
player.move(keyCode);
}
var aiMiddle = ai.y + (ai.height / 2);
if (aiMiddle < ball.y) {
ai.move(40);
}
if (aiMiddle > ball.y) {
ai.move(38);
}
}
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0,640,480);
renderPaddle(player);
renderPaddle(ai);
renderBall(ball);
}
function renderPaddle(paddle) {
ctx.fillStyle = "blue";
ctx.fillRect(paddle.x,paddle.y,paddle.width,paddle.height);
}
function renderBall(ball) {
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.radius,2 * Math.PI,false);
ctx.fillStyle = "pink";
ctx.fill();
}
var heldDown = {};
window.addEventListener("keydown",function(keyInfo) {
heldDown[event.keyCode] = true;
},false);
window.addEventListener("keyup",function(keyInfo) {
delete heldDown[event.keyCode];
},false);
tick();
<canvas id='my' width='640' height='480'></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。