В этом пошаговом руководстве вы узнаете, как создать простую игру в пинг-понг на JavaScript.
Шаг 1. Настройте HTML
Во-первых, давайте создадим базовую структуру HTML для игры. Нам понадобится элемент холста для рисования игры и немного базового CSS для его стилизации.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ping Pong</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
</body>
</html>
Шаг 2: Настройте JavaScript
Далее давайте создадим файл JavaScript для обработки игровой логики. Мы начнем с создания элемента canvas и настройки некоторых основных переменных для отслеживания состояния игры.
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;
let player1Score = 0;
let player2Score = 0;
Шаг 3: Нарисуйте игру
Теперь давайте добавим код для рисования игры на холсте. Мы создадим функцию draw(), которая будет вызываться каждый кадр для отрисовки игры.
function draw() {
// Draw the background
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the ball
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
ctx.fill();
// Draw the score
ctx.fillStyle = '#fff';
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.fillText(player1Score + ' - ' + player2Score, canvas.width / 2, 50);
}
Шаг 4: Переместите мяч
Теперь давайте добавим код для перемещения мяча. Мы создадим функцию с именем move(), которая будет вызываться каждый кадр для обновления положения мяча.
function move() {
// Move the ball
ballX += ballSpeedX;
ballY += ballSpeedY;
// Check if the ball hit the top or bottom of the canvas
if (ballY < 0 || ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
// Check if the ball hit the left or right of the canvas
if (ballX < 0 || ballX > canvas.width) {
ballSpeedX = -ballSpeedX;
}
}
Шаг 5. Добавьте элементы управления проигрывателем.
Теперь давайте добавим код, позволяющий игрокам управлять своими веслами. Мы создадим две переменные для отслеживания положения лепестков игрока и добавим некоторый код для перемещения лепестков, когда игрок нажимает клавиши со стрелками вверх или вниз.
let player1Y = canvas.height / 2 - 50;
let player2Y = canvas.height / 2 - 50;
const paddleHeight = 100;
document.addEventListener('keydown', event => {
if (event.keyCode === 38) {
// Up arrow key
player1Y -= 10;
} else if (event.keyCode === 40) {
// Down arrow key
player1Y += 10;
} else if (event.keyCode === 87) {
// W key
player2Y -= 10;
} else if (event.keyCode === 83) {
// S key
player2Y += 10;
}
});
Шаг 6: Обнаружение столкновений с веслами
Далее нам нужно добавить код для обнаружения столкновения мяча с ракеткой. Мы создадим функцию `checkCollisions()`, которая будет вызываться в каждом кадре для проверки коллизий.
function checkCollisions() {
// Check if the ball hit player 1's paddle
if (ballX < 20 && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Check if the ball hit player 2's paddle
if (ballX > canvas.width - 20 && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Check if the ball went out of bounds on player 1's side
if (ballX < 0) {
player2Score++;
resetBall();
}
// Check if the ball went out of bounds on player 2's side
if (ballX > canvas.width) {
player1Score++;
resetBall();
}
}
Шаг 7: Сброс мяча
Наконец, нам нужно добавить код для сброса положения и скорости мяча, когда игрок набирает очко. Для этого мы создадим функцию resetBall().
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 10 - 5;
}
Шаг 8. Обновите игровой цикл
Теперь, когда мы определили всю игровую логику, нам нужно добавить код для обновления игры в каждом кадре. Мы создадим функцию с именем update(), которая будет вызывать все необходимые функции.
function update() {
move();
checkCollisions();
draw();
requestAnimationFrame(update);
}
update();
Заключение
Вот и все! С помощью этих шагов у вас должна быть базовая игра в пинг-понг, в которую вы можете играть в своем браузере. Конечно, всегда есть возможности для улучшения и добавления дополнительных функций, но это должно дать вам хорошую отправную точку для дальнейшего развития. Вот полный код для справки:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ping Pong</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;
let player1Y = canvas.height / 2 - 50;
let player2Y = canvas.height / 2 - 50;
const paddleHeight = 100;
let player1Score = 0;
let player2Score = 0;
document.addEventListener('keydown', event => {
if (event.keyCode === 38) {
// Up arrow key
player1Y -= 10;
} else if (event.keyCode === 40) {
// Down arrow key
player1Y += 10;
} else if (event.keyCode === 87) {
// W key
player2Y -= 10;
} else if (event.keyCode === 83) {
// S key
player2Y += 10;
}
});
function draw() {
// Draw the background
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the ball
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
ctx.fill();
// Draw player 1's paddle
ctx.fillStyle = 'white';
ctx.fillRect(10, player1Y, 10, paddleHeight);
// Draw player 2's paddle
ctx.fillStyle = 'white';
ctx.fillRect(canvas.width - 20, player2Y, 10, paddleHeight);
// Draw the score
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText(`${player1Score} - ${player2Score}`, canvas.width / 2 - 50, 50);
}
function move() {
// Move the ball
ballX += ballSpeedX;
ballY += ballSpeedY;
// Bounce the ball off the top and bottom walls
if (ballY < 0 || ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function checkCollisions() {
// Check if the ball hit player 1's paddle
if (ballX < 20 && ballY > player1Y && ballY < player1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Check if the ball hit player 2's paddle
if (ballX > canvas.width - 20 && ballY > player2Y && ballY < player2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Check if the ball went out of bounds on player 1's side
if (ballX < 0) {
player2Score++;
resetBall();
}
// Check if the ball went out of bounds on player 2's side
if (ballX > canvas.width) {
player1Score++;
resetBall();
}
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = Math.random() * 10 - 5;
}
function update() {
move();
checkCollisions();
draw();
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
Я надеюсь, что это руководство помогло вам показать, как программировать игру в пинг-понг на JavaScript. Как видите, игра состоит из нескольких различных компонентов, которые работают вместе, чтобы создать увлекательный и увлекательный пользовательский опыт. С некоторыми дополнительными настройками и экспериментами вы можете дополнительно настроить и улучшить игру в соответствии со своими интересами и предпочтениями.
Удачи и удачного кодирования!
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
