讀了h5遊戲製作這本書，看到一個好玩的簡單的遊戲，自己完善寫如下，核心部分參考本書：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="playground">
<div id="paddleB"></div>
<div id="ball"></div>
<div id="line"></div>
<div id="paddleA"></div>
</div>
<button id="start">開始</button>
<div>
<span>左邊得分</span><div id="score1">0</div>
</div>
<div>
<span>右邊得分</span><div id="score2">0</div>
</div>
<style>
#line{
left:200px;
width:1px;
height:200px;
background:yellow;
top:0px;
border: 1px solid #088;
position:absolute;
}
#ball{
background:white;
position:absolute;
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 20px;
background-color: #0FF;
opacity: 0.5;
}
#paddleA{
top:70px;
left:300px;
background:red;
height:60px;
width:20px;
position:absolute;
}
#paddleB{
top:70px;
left:50px;
background:red;
height:60px;
width:20px;
position:absolute;
}
#playground{
background:#00f;
width:400px;
height:200px;
position:relative;
overflow: hidden;
}
</style>
<script>
var leftscore=0;
var rightscore=0;
var KEY={
UP:38,
DOWN:40,
W:87,
S:83
}
var ball={
speed:5,
x:150,
y:100,
directionX:1,
directionY:1
}
$("#start").click(function() {
timer1 = window.setInterval(moveBall,100);
timer2 = window.setInterval(hitA,1);
timer3 = window.setInterval(hitB,1);
});
function moveBall(){
var playgroundheight=parseInt($("#playground").height());
var playgroundwidth=parseInt($("#playground").width());
if(ball.y+ball.speed*ball.directionY>playgroundheight-20){
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({
"left":ball.x,
"top":ball.y
});
ball.directionX=-1;
leftscore++;
$("#score1").text(leftscore);
}
if(ball.x+ball.speed*ball.directionX<0){
ball.x=150;
ball.y=100;
$("#ball").css({
"left":ball.x,
"top":ball.y
});
ball.directionX=1;
rightscore++;
$("#score2").text(rightscore);
}
ball.x+=ball.speed*ball.directionX;
ball.y+=ball.speed*ball.directionY;
$("#ball").css({
"left":ball.x,
"top":ball.y
});
}
function hitB(){
var paddleBX=parseInt($("#paddleB").css("left"))+parseInt($("#paddleB").css("width"));
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;
}
}
}
function hitA(){
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;
}
}
}
$(function(){
$(document).keydown(function(e){
switch(e.which){
case KEY.UP:
var top=parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top-5);
break;
case KEY.DOWN:
var top=parseInt($("#paddleB").css("top"));
$("#paddleB").css("top",top+5);
break;
case KEY.W:
var top=parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top-5);
break;
case KEY.S:
var top=parseInt($("#paddleA").css("top"));
$("#paddleA").css("top",top+5);
break;
}
});
});
</script>
</body>
</html>
h5乒乓球遊戲大戰完整版（不含音樂）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章