如何使用键盘在HTML5-canvas中同时移动多个形状？
如何使用键盘在HTML5-canvas中同时移动多个形状？
提问于 2018-07-05 19:28:28
现在，我正在重新创建一个名为Pong的旧街机游戏(查看超链接)。
当玩家按下W/S或上箭头/下箭头时，我可以移动每个玩家的横杆。问题是你不能一次移动两个杆子。这将真正阻碍游戏，使其无法玩，因为当一号玩家按下一个键时，二号玩家将无法移动他们的横杆。请告诉我怎么解决这个问题。(也就是如何让两个玩家同时玩游戏)
(重要提示:全屏预览游戏)
下面是我的代码：
https://codepen.io/Undefined_Variable/full/Pavzvd/
HTML/JS：
<!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();
requestAnimationFrame(DrawDashes);
}
window.addEventListener("keydown", movePlayer, false);
function movePlayer(e) {
ctx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);
if (e.keyCode == 83) {
console.log('Top arrow pressed!');
playerOne.y1 += 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 87) {
console.log('bottom arrow pressed!');
playerOne.y1 -= 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 38) {
console.log('W pressed!');
playerTwo.y1 -= 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
if (e.keyCode == 40) {
console.log('S pressed!');
playerTwo.y1 += 5;
DrawDashes(DashOne);
DrawDashes(DashTwo);
DrawDashes(DashThree);
DrawDashes(DashFour);
DrawDashes(DashFive);
DrawDashes(DashSix);
DrawDashes(DashSeven);
DrawDashes(DashEight);
DrawDashes(DashNine);
DrawDashes(DashTen);
DrawDashes(DashEleven);
DrawDashes(DashTwelve);
}
}
</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');
}回答 1
Stack Overflow用户
发布于 2018-07-05 19:36:13
您基本上需要使用keydown事件在内部记录哪些键被按下，然后使用keyup事件确定它们何时被释放。
我不会欺骗这个答案，所以我将其链接：JavaScript multiple keys pressed at once
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51190221
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号