Сейчас я воссоздаю старую аркадную игру под названием Понг (ознакомьтесь с гиперссылкой).
Я мог перемещать бары каждого игрока, когда тот игрок нажимал либо 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');
}