我想重新创建一个名为Pong的旧街机游戏(请查看超链接,这是必要的!)
一切都很好,直到当玩家按下向上/向下箭头键时,我不得不移动每个玩家的小节。这导致了奇怪的行为:
https://codepen.io/Undefined_Variable/pen/Pavzvd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="Pong.css">
</head>
<body>
<canvas id="GameCanvas">No support for you, scrub!</canvas>
<!--Start of the script-->
<script>
var GameCanvas = document.body.querySelector('#GameCanvas');
var ctx = GameCanvas.getContext("2d");
var WindowWidth = window.innerWidth;
var WindowHeight = window.innerHeight;
var playerOne = {
x1: (0.02 * WindowWidth),
y1: (0.35 * WindowHeight),
x2: 30,
y2: 70
}
var playerTwo = {
x1: (0.71 * WindowWidth),
y1: (0.35 * WindowHeight),
x2: 30,
y2: 70
}
var LineOne = {
y1: 20
}
var LineTwo = {
y1: 535
}
var DashOne = { y1: 50 };
var DashTwo = { y1: 90 };
var DashThree = { y1: 130 };
var DashFour = { y1: 170 };
var DashFive = { y1: 210 };
var DashSix = { y1: 250 };
var DashSeven = { y1: 290 };
var DashEight = { y1: 330 };
var DashNine = { y1: 370 };
var DashTen = { y1: 410 };
var DashEleven = { y1: 450 };
var DashTwelve = { y1: 490 };
GameCanvas.width = 0.75 * WindowWidth;
GameCanvas.height = 0.75 * WindowHeight;
window.onload = function initial() {
window.addEventListener('resize', function (evt) {
GameCanvas.width = 0.75 * window.innerWidth;
GameCanvas.height = 0.75 * window.innerHeight;
playerTwo.x1 = (0.71 * window.innerWidth);
});
DrawPlayers();
DrawTopBottomLines(LineOne, LineTwo);
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
function DrawPlayers() {
ctx.save();
ctx.fillStyle = "white";
ctx.fillRect(playerOne.x1, playerOne.y1, playerOne.x2, playerOne.y2);
ctx.fillRect(playerTwo.x1, playerTwo.y1, playerTwo.x2, playerTwo.y2);
ctx.restore();
requestAnimationFrame(DrawPlayers);
DrawTopBottomLines(LineOne);
DrawTopBottomLines(LineTwo);
}
function DrawTopBottomLines(Line) {
ctx.save();
ctx.fillStyle = "white";
ctx.fillRect(20, Line.y1, 1150, 20)
ctx.restore();
}
function DrawDashes(dash) {
ctx.save();
ctx.fillStyle = '#696969';
ctx.fillRect(GameCanvas.width / 2, dash.y1, 15, 30)
ctx.restore();
}
window.addEventListener("keydown", movePlayerOne, false);
function movePlayerOne(e) {
switch (e.keyCode) {
case 38:
console.log('Top arrow pressed!');
playerOne.y1 += 5;
playerOne.y2 += 5;
break;
case 40:
console.log('bottom arrow pressed!');
playerOne.y1 += 5;
playerOne.y2 += 5;
break;
case 87:
console.log('Top arrow pressed!');
deltaYTwo -= 5;
break;
case 83:
console.log('bottom arrow pressed!');
deltaYTwo += 5;
break;
}
}
</script>
</body>
</html>
CSS:
#GameCanvas {
border: 1px solid black;
background-color: #2a2a2a;
margin-top: 10vh;
margin-bottom: 10vh;
margin-right: 12vw;
margin-left: 12vw;
}
body {
font-family: 'ArcadeFont';
font-size: 5em;
overflow: hidden;
}
@font-face {
font-family: 'ArcadeFont';
src: url('fonts/ARCADECLASSIC.TTF');
}
重要提示:全屏运行游戏!
当我尝试按上/下箭头时,这些条开始“展开”,而不是改变位置。请告诉我如何解决。
注意:我只是一个初学者,尤其是JavaScript方面的人,所以请不要包括任何jQuery / angularJS / React solutions / etc。我不需要代码中的任何框架。预先感谢。
答案 0 :(得分:0)
您忘记重新绘制之前要清除画布。您看到的是新对象被旧对象覆盖。
这将清除整个画布,因此您需要重绘所有内容
ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);
不过,您可以清除桨叶所在的区域,然后通过将四个值替换为以下内容来重新绘制该区域:
ctx.clearRect(paddleXOffset, paddleYOffset, paddleWidth, paddleHeight);