前置條件：官網下載jQuery或者直接link一波jQuery。
邏輯部分：
每30毫秒小球判斷方向並位移一次。
處理了多按鍵同時按下的情況。
編寫了邊界處理：觸碰到邊界就改變方向，並記錄得分。
編寫了碰撞事件：觸碰到擋板就會改變方向。
樣式部分：
沒啥特色。簡單的漸變色。
HTML源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PingPongGame</title>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<footer>
<span>This is a n example of creating a Ping Pong Game.</span>
</footer>
<div id="game">
<div id="playground">
<div class="line-row"></div>
<div class="line-column left100"></div>
<div class="line-column left200"></div>
<div class="line-column left300"></div>
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
</div>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/pingpong2.0.js"></script>
<link rel="stylesheet" href="css/style.css">
</body>
</html>
JS源碼如下：
var KEY = {
UP: 38,
DOWN: 40,
w: 87,
s: 83
}
var pingpong = {
}
pingpong.pressedKeys = [];
pingpong.ball = {
speed: 5,
x: 150,
y: 100,
directionX: 1,
directionY: 1
}
$(() => {
pingpong.timer = setInterval(gameLoop, 30);
$(document).keydown((e) => {
pingpong.pressedKeys[e.which] = true;
})
$(document).keyup((e) => {
pingpong.pressedKeys[e.which] = false;
})
})
function gameLoop() {
movePaddles();
moveBall();
}
function movePaddles() {
let topB = parseInt($('#paddleB').css('top'));
let topA = parseInt($('#paddleA').css('top'));
if (pingpong.pressedKeys[KEY.UP]) {
$('#paddleB').css('top', topB - 5);
}
if (pingpong.pressedKeys[KEY.DOWN]) {
$('#paddleB').css('top', topB + 5);
}
if (pingpong.pressedKeys[KEY.w]) {
$('#paddleA').css('top', topA - 5);
}
if (pingpong.pressedKeys[KEY.s]) {
$('#paddleA').css('top', topA + 5);
}
}
function moveBall() {
var playgroundHeight = parseInt($('#playground').height());
var playgroundWidth = parseInt($('#playground').width());
var ball = pingpong.ball;
if (ball.y + ball.speed * ball.directionY > playgroundHeight) {
ball.directionY = -1
}
if (ball.y + ball.speed * ball.directionY < 0) {
ball.directionY = 1;
}
if (ball.x + ball.speed * ball.directionX > playgroundWidth) {
ball.x = 250;
ball.y = 100;
$('#ball').css({
'top': ball.y,
'left': ball.x
})
console.log('Aヾ(￣ー￣)X(^▽^)ゞ勝利')
alert('Aヾ(￣ー￣)X(^▽^)ゞ勝利')
ball.directionX = -1
}
if (ball.x + ball.speed * ball.directionX < 0) {
ball.x = 250;
ball.y = 100;
$('#ball').css({
'top': ball.y,
'left': ball.x
})
console.log('Bヾ(￣ー￣)X(^▽^)ゞ勝利')
alert('Bヾ(￣ー￣)X(^▽^)ゞ勝利')
ball.directionX = 1
}
var paddleAX = parseInt($('#paddleA').css('left')) + parseInt($('#paddleA').css('width'))
var paddleAYBottom = parseInt($('#paddleA').css('top')) + parseInt($('#paddleA').css('height'))
var paddleAYTop = parseInt($('#paddleA').css('top'))
if (ball.x + ball.speed * ball.directionX <= paddleAX) {
if (ball.y + ball.speed * ball.directionY <= paddleAYBottom
&& ball.y + ball.speed * ball.directionY >= paddleAYTop) {
ball.directionX = 1
}
}
var paddleBX = parseInt($('#paddleB').css('left'))
var paddleBYBottom = parseInt($('#paddleB').css('top')) + parseInt($('#paddleB').css('height'))
var paddleBYTop = parseInt($('#paddleB').css('top'))
if (ball.x + ball.speed * ball.directionX >= paddleBX) {
if (ball.y + ball.speed * ball.directionY <= paddleBYBottom
&& ball.y + ball.speed * ball.directionY >= paddleBYTop) {
ball.directionX = -1
}
}
ball.x += ball.speed * ball.directionX
ball.y += ball.speed * ball.directionY
$('#ball').css({
'left': ball.x,
'top': ball.y
})
}
CSS源碼如下：
#playground {
position: relative;
background: #e0ffe0;
width: 400px;
height: 200px;
overflow: hidden;
}
#ball {
position: absolute;
left: 150px;
top: 100px;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fbb;
}
.paddle {
position: absolute;
left: 50px;
top: 70px;
width: 10px;
height: 70px;
border-radius: 10px;
background: linear-gradient(245deg,#fdef25,#9dbaec);
}
#paddleB {
left: 320px;
}
.line-row {
position: absolute;
top: 100px;
left: 0;
right: 0;
height: 1px;
background-color: #aaa;
}
.line-column {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: #aaa;
}
.left100 {
left: 100px;
}
.left200 {
left: 200px;
}
.left300 {
left: 300px;
}
源碼相關GitHub倉庫https://github.com/xmx134/game-h5-base