Игра в понг на JavaScript

Опубликовано: 27 Августа, 2022

Игра Pong — это видеоигра на тему настольного тенниса для двух игроков. В игре участвуют две ракетки и движущийся мяч. Игроки должны перемещать ракетки вверх или вниз и спасать мяч от удара о стену. Если мяч попадает в стену, то это счет для другого игрока.

Требования: Знание HTML, CSS, JavaScript.

Процедура:

Создайте файл HTML с именем index.html.
Создайте файл CSS с именем styles.css и свяжите его в файле index.html с помощью тега link.
Создайте файл JS с именем index.js и свяжите его с файлом index.html с помощью тега script.
Создайте div для игрового поля, мяча и 2 div для ракеток, т.е. player-1 и player-2.
Придайте стиль своей игре в файле CSS.
Получите ссылку на ракетки, мячи и игровые доски в JS.
Создайте в файле index.js функцию с именем move ball.
Задайте мячу случайное направление и случайную скорость, изменив координаты x и y мяча.
Примените столкновение с мячом и верхней/нижней стороной игрового поля, т.е. если мяч касается верхней/нижней части игрового поля, то умножьте -1 * y на скорость мяча.
Примените столкновение с мячом и играйте слева и справа от игрового поля. т.е. увеличить счет и изменить состояние игры, чтобы служить государству.
Примените столкновение с мячом и веслами. т.е. умножьте -1 * x скорость мяча.

Направление игры:

Чтобы начать игру, нажмите клавишу « ENTER» .
Игрок 1: Игрок 1 может управлять левым манипулятором, т.е. PADDLE_1 с помощью клавиши « W » для перемещения вверх и для опускания следует использовать клавишу « S ».
Игрок 2: Игрок 2 может управлять левым манипулятором, т. е. PADDLE_2 , используя клавишу « Стрелка вверх », чтобы двигаться вверх, а чтобы идти вниз, следует использовать клавишу « Стрелка вниз».

HTML-код:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>PONG GAME</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div class="board">
        <div class="ball">
            <div class="ball_effect"></div>
        </div>
        <div class="paddle_1 paddle"></div>
        <div class="paddle_2  paddle"></div>
        <h1 class="player_1_score">0</h1>
        <h1 class="player_2_score">0</h1>
        <h1 class="message">
            Press Enter to Play Pong
        </h1>
    </div>
      
    <script src="index.js"></script>
</body>
  
</html>

CSS-код:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(
            to top, #ffda77, #ffa45b);
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.board {
    height: 85vh;
    width: 80vw;
    background-image: linear-gradient(
            to right, #5c6e91, #839b97);
    border-radius: 14px;
}
  
.ball {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: fixed;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
}
  
.ball_effect {
    height: 100%;
    width: 100%;
    border-radius: 100px;
    animation: spinBall 0.1s linear infinite;
    box-shadow: inset 0 0 18px #fff, 
        inset 6px 0 18px violet, 
        inset -6px 0 18px #0ff, 
        inset 6px 0 30px violet, 
        inset -6px 0 30px #0ff, 
        0 0 18px #fff, -4px 0 18px 
        violet, 4px 0 18px #0ff;
}
  
@keyframes spinBall {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
  
.paddle {
    height: 100px;
    width: 18px;
    border-radius: 50%;
    position: fixed;
}
  
.paddle_1 {
    top: calc(7.5vh + 55px);
    left: calc(10vw + 30px);
    box-shadow: inset 0 0 18px #fff, 
        inset -6px 0 18px #f3bad6, 
        inset 6px 0 18px #0ff, 
        inset -6px 0 30px #f3bad6, 
        inset 6px 0 30px #0ff, 
        0 0 18px #fff, 4px 0 18px 
        #f3bad6, -4px 0 18px #0ff;
}
  
.paddle_2 {
    top: calc(85vh + 7.5vh - 100px - 55px);
    right: calc(10vw + 30px);
    box-shadow: inset 0 0 18px #fff, 
        inset 6px 0 18px #f3bad6, 
        inset -6px 0 18px #0ff, 
        inset 6px 0 30px #f3bad6, 
        inset -6px 0 30px #0ff, 
        0 0 18px #fff, -4px 0 18px 
        #f3bad6, 4px 0 18px #0ff;
}
  
.player_1_score {
    height: 50px;
    width: 50px;
    color: chartreuse;
    position: fixed;
    left: 30vw;
    margin-top: 30px;
}
  
.player_2_score {
    height: 50px;
    width: 50px;
    color: chartreuse;
    position: fixed;
    left: 70vw;
    margin-top: 30px;
}
  
.message {
    position: fixed;
    /* color: #48426d; */
    height: 10vh;
    width: 30vw;
    color: #c9cbff;
    left: 38vw;
    margin: 30px auto auto auto;
}

Код JavaScript:

Javascript

let gameState = "start";
let paddle_1 = document.querySelector(".paddle_1");
let paddle_2 = document.querySelector(".paddle_2");
let board = document.querySelector(".board");
let initial_ball = document.querySelector(".ball");
let ball = document.querySelector(".ball");
let score_1 = document.querySelector(".player_1_score");
let score_2 = document.querySelector(".player_2_score");
let message = document.querySelector(".message");
let paddle_1_coord = paddle_1.getBoundingClientRect();
let paddle_2_coord = paddle_2.getBoundingClientRect();
let initial_ball_coord = ball.getBoundingClientRect();
let ball_coord = initial_ball_coord;
let board_coord = board.getBoundingClientRect();
let paddle_common = 
    document.querySelector(".paddle").getBoundingClientRect();
  
let dx = Math.floor(Math.random() * 4) + 3;
let dy = Math.floor(Math.random() * 4) + 3;
let dxd = Math.floor(Math.random() * 2);
let dyd = Math.floor(Math.random() * 2);
  
document.addEventListener("keydown", (e) => {
  if (e.key == "Enter") {
    gameState = gameState == "start" ? "play" : "start";
    if (gameState == "play") {
      message.innerHTML = "Game Started";
      message.style.left = 42 + "vw";
      requestAnimationFrame(() => {
        dx = Math.floor(Math.random() * 4) + 3;
        dy = Math.floor(Math.random() * 4) + 3;
        dxd = Math.floor(Math.random() * 2);
        dyd = Math.floor(Math.random() * 2);
        moveBall(dx, dy, dxd, dyd);
      });
    }
  }
  if (gameState == "play") {
    if (e.key == "w") {
      paddle_1.style.top =
        Math.max(
          board_coord.top,
          paddle_1_coord.top - window.innerHeight * 0.06
        ) + "px";
      paddle_1_coord = paddle_1.getBoundingClientRect();
    }
    if (e.key == "s") {
      paddle_1.style.top =
        Math.min(
          board_coord.bottom - paddle_common.height,
          paddle_1_coord.top + window.innerHeight * 0.06
        ) + "px";
      paddle_1_coord = paddle_1.getBoundingClientRect();
    }
  
    if (e.key == "ArrowUp") {
      paddle_2.style.top =
        Math.max(
          board_coord.top,
          paddle_2_coord.top - window.innerHeight * 0.1
        ) + "px";
      paddle_2_coord = paddle_2.getBoundingClientRect();
    }
    if (e.key == "ArrowDown") {
      paddle_2.style.top =
        Math.min(
          board_coord.bottom - paddle_common.height,
          paddle_2_coord.top + window.innerHeight * 0.1
        ) + "px";
      paddle_2_coord = paddle_2.getBoundingClientRect();
    }
  }
});
  
function moveBall(dx, dy, dxd, dyd) {
  if (ball_coord.top <= board_coord.top) {
    dyd = 1;
  }
  if (ball_coord.bottom >= board_coord.bottom) {
    dyd = 0;
  }
  if (
    ball_coord.left <= paddle_1_coord.right &&
    ball_coord.top >= paddle_1_coord.top &&
    ball_coord.bottom <= paddle_1_coord.bottom
  ) {
    dxd = 1;
    dx = Math.floor(Math.random() * 4) + 3;
    dy = Math.floor(Math.random() * 4) + 3;
  }
  if (
    ball_coord.right >= paddle_2_coord.left &&
    ball_coord.top >= paddle_2_coord.top &&
    ball_coord.bottom <= paddle_2_coord.bottom
  ) {
    dxd = 0;
    dx = Math.floor(Math.random() * 4) + 3;
    dy = Math.floor(Math.random() * 4) + 3;
  }
  if (
    ball_coord.left <= board_coord.left ||
    ball_coord.right >= board_coord.right
  ) {
    if (ball_coord.left <= board_coord.left) {
      score_2.innerHTML = +score_2.innerHTML + 1;
    } else {
      score_1.innerHTML = +score_1.innerHTML + 1;
    }
    gameState = "start";
  
    ball_coord = initial_ball_coord;
    ball.style = initial_ball.style;
    message.innerHTML = "Press Enter to Play Pong";
    message.style.left = 38 + "vw";
    return;
  }
  ball.style.top = ball_coord.top + dy * (dyd == 0 ? -1 : 1) + "px";
  ball.style.left = ball_coord.left + dx * (dxd == 0 ? -1 : 1) + "px";
  ball_coord = ball.getBoundingClientRect();
  requestAnimationFrame(() => {
    moveBall(dx, dy, dxd, dyd);
  });
}

Комбинированный код:

Выход:

Technical Scripter JavaScript HTML CSS

Игра в понг на JavaScript

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ