JavaScript 乒乓球游戏

乒乓球游戏是一个以乒乓球为主题的双人游戏。游戏涉及两个球拍和一个移动的球。玩家必须向上或向下移动球拍，以防止球被墙壁击中。如果球撞到墙壁，那么另一个玩家得分。

先决条件： 必须了解HTML、CSS和JavaScript。

步骤：

创建一个名为index.html的HTML文件。
创建一个名为styles.css的CSS文件，并使用link标签将其链接到index.html文件中。
创建一个名为index.js的JS文件，并使用script标签将其链接到index.html文件中。
为游戏板、球和2个球拍创建一个div，即player-1和player-2。
在CSS文件中为游戏给出一些样式。
在JS文件中获取球拍、球和游戏板的引用。
在index.js文件中创建一个名为move ball的函数。
通过改变球的x和y坐标，给球一个随机方向和随机速度。
将球与游戏板的顶部/底部边缘进行碰撞处理，即如果球触碰到板的顶部/底部，则将球的y方向逆转（即将y速度乘以-1）。
将球与游戏板的左右侧进行碰撞处理。即增加得分并将游戏状态更改为发球状态。
将球与球拍进行碰撞处理。即将球的x方向速度乘以-1。

游戏操作说明：

按下“ ENTER ”键开始游戏。
玩家1： 玩家1可以通过使用“ W ”键向上移动，并使用“ S ”键向下移动来控制左侧的球拍（即PADDLE_1）。
玩家2： 玩家2可以通过使用“ 上箭头 ”键向上移动，并使用“ 下箭头 ”键向下移动来控制右侧的球拍（即PADDLE_2）。

HTML代码： 在本节中，我们将创建游戏的基本结构

CSS代码： 在本节中，我们将创建游戏的设计

JavaScript代码： 在本节中，我们将创建游戏中的得分和移动逻辑

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代码

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); 
}); 
}