乒乓球DOM小游戏

之前学过HTML5，CSS3有一段时间，也写了一个简单的小游戏，现在竟然没找到了，大哭无奈重新写了一遍，功能也比较简单，以下是源代码：在codepen上可以直接看到效果，网址是http://codepen.io/anon/pen/NrRjmO

index.html ：基本元素的放置




Ping Pong

Ping Pong

<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 &copy; 2016</footer><script src="js/script.js"></script>

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 wallsif(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 paddlesvar 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;        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 ballball.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对话框提示