您的位置：首页 > Web前端 > HTML5

HTML5之DOM小游戏——乒乓球

2016-06-19 12:28 447 查看

之前学过HTML5，CSS3有一段时间，也写了一个简单的小游戏，现在竟然没找到了，

无奈重新写了一遍，功能也比较简单，以下是源代码：在codepen上可以直接看到效果，网址是http://codepen.io/anon/pen/NrRjmO

index.html ：基本元素的放置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>

<div id="game">

<div id="scoreboard">
<div class="score">player A : <span id="scoreA">0</span></div>
<div class="score">player B : <span id="scoreB">0</span></div>
</div>

<div id="playground">
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
</div>

</div>

<footer>
made by yi wei © 2016
</footer>
<script src="js/script.js"></script>
</body>
</html>

styles.css：样式定制

* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

#playground{
background: url(../img/playground_background.png);
width: 400px;
height: 200px;
position: relative;
}

.paddle{
background: #bbf;
position: absolute;
left: 50px;
top: 70px;
width: 10px;
height: 70px;
}

#paddleB{
left:320px;
}

#ball{
background: #fbb;
position: absolute;
left: 150px;
top: 100px;
width: 10px;
height: 10px;
border-radius: 5px;
}

.score{
font-size: 24px;
position: relative;
left: 70px;
top: 50px;
}

#scoreboard{
position: relative;
left: 50px;
width: 250px;
height: 140px;
background: url(../img/score_background.png) no-repeat center blue;
}

#game{
position: relative;
left: 500px;
}

script.js：游戏逻辑

var KEY = {
UP: 38,
Down: 40,
W: 87,
S: 83
};

var pingpong = {};
pingpong.pressedKey = [];
pingpong.ball = {
speed: 3,
x: 150,
y: 100,
radius: 5,
directionX: 1,
directionY: 1
};
pingpong.scoreA = 0;
pingpong.scoreB = 0;

$(function() {
pingpong.timer = setInterval(gameloop, 30);

$(document).keydown(function(e) {
pingpong.pressedKey[e.which] = true;
});
$(document).keyup(function(e) {
pingpong.pressedKey[e.which] = false;
});

});

function gameloop() {
moveBall();
movePaddles();
}

function moveBall() {
var playgroundHeight = parseInt($("#playground").height());
var playgroundWidth  = parseInt($("#playground").width());
var ball = pingpong.ball;

//check the directions for walls
if(ball.y + ball.speed*ball.directionY + 2*ball.radius > playgroundHeight)
ball.directionY = -1;
if(ball.y + ball.speed*ball.directionY < 0)
ball.directionY = 1;
if(ball.x + ball.speed*ball.directionX + 2*ball.radius > playgroundWidth)
ball.directionX = -1;
if(ball.x + ball.speed*ball.directionX < 0)
ball.directionX = 1;

//check the directions for paddles
var paddleAX = parseInt($("#paddleA").css("left")) +
parseInt($("#paddleA").css("width"));
var paddleABottom = parseInt($("#paddleA").css("top")) +
parseInt($("#paddleA").css("height"));
var paddleAUp = parseInt($("#paddleA").css("top"));

if(ball.x + ball.speed * ball.directionX <= paddleAX)
if(ball.y + ball.speed * ball.directionY <= paddleABottom &&
ball.y + ball.speed * ball.directionY >= paddleAUp)
ball.directionX = 1;

ab1c
var paddleBX = parseInt($("#paddleB").css("left")) - 2 * ball.radius;
var paddleBBottom = parseInt($("#paddleB").css("top")) +
parseInt($("#paddleB").css("height"));
var paddleBUp = parseInt($("#paddleB").css("top"));

if(ball.x + ball.speed * ball.directionX >= paddleBX)
if(ball.y + ball.speed * ball.directionY <= paddleBBottom &&
ball.y + ball.speed * ball.directionY >= paddleBUp)
ball.directionX = -1;

//update the position of ball
ball.x += ball.speed * ball.directionX;
ball.y += ball.speed * ball.directionY;

setBall(ball.x, ball.y);

if(ball.x > paddleBX) {
ball.x = 250;
ball.y = 100;
setBall(ball.x, ball.y);
ball.directionX = -1;
pingpong.scoreA++;
$("#scoreA").html(pingpong.scoreA);

pingpong.pressedKey = [];
alert("play A goal, press to continue");
for (var i = 100000000 - 1; i >= 0; i--);
}
if(ball.x < paddleAX) {
ball.x = 250;
ball.y = 100;
setBall(ball.x, ball.y);
ball.directionX = 1;
pingpong.scoreB++;
$("#scoreB").html(pingpong.scoreB);

pingpong.pressedKey = [];
alert("play B goal, press to continue");
for (var i = 100000000 - 1; i >= 0; i--);
}

}

function setBall(x, y) {
$("#ball").css({
"left": x,
"top":  y
});
}

function movePaddles() {
if(pingpong.pressedKey[KEY.UP]) {
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top", top-5);
}
if(pingpong.pressedKey[KEY.Down]) {
var top = parseInt($("#paddleB").css("top"));
$("#paddleB").css("top", top+5);
}
if(pingpong.pressedKey[KEY.W]) {
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top", top-5);
}
if(pingpong.pressedKey[KEY.S]) {
var top = parseInt($("#paddleA").css("top"));
$("#paddleA").css("top", top+5);
}
}

最终效果图：每当乒乓球弹出球拍外就算输一分，在弹出alert对话框提示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航