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

一个html5的小游戏

2016-03-28 12:11 567 查看
最近开始学html5游戏，感觉html5游戏才是以后的王道，因为html可以跨平台。无论什么终端，只要有着浏览器，无需安装就能玩游戏，而且支持离线游戏，多人游戏。游戏制作简单。

不多说很简单上源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="web相关/js/jquery.min.js">
</script>
<script type="text/javascript" src="web相关/js/fortest.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>a small game</title>

</head>
<style>

#playground{
background:#e0ffe0;
width:1200px;
height:600px;
position:relative;
overflow:hidden;
margin:auto;
}
#ball{
background:#fbb;
position:absolute;
width:40px;
height:40px;
left:160px;
top:280px;
border-radius:20px;}
.paddle{
background:#bbf;
left:100px;
top:230px;
position:absolute;
width:60px;
height:140px;}
#paddleb{
left:1000px;}<pre class="javascript" name="code">// JavaScript Document
var KEY={
UP:38,
DOWN:40,
W:87,
S:83
};
var pds=10;
var score1=0;
var score2=0;
var pingpong={};
pingpong.pressedkeys=[];
pingpong.ball={
speed:10,
x:160,
y:280,
directionX:1,
directionY:1
}
$(function(){
pingpong.timer=setInterval(gameloop,30);
$(document).keydown(function(e){
pingpong.pressedkeys[e.which]=true;
});
$(document).keyup(function(e){
pingpong.pressedkeys[e.which]=false;
})
$(document).keydown(function(e){
switch(e.which)
{
case KEY.UP:
//获取球拍B的top值并转化为int类型
var top=parseInt($("#paddleb").css("top"));
$("#paddleb").css("top",top-pds);
break;
case KEY.DOWN:
var top=parseInt($("#paddleb").css("top"));
$("#paddleb").css("top",top+pds);
break;
case KEY.W:
var top=parseInt($("#paddlea").css("top"));
$("#paddlea").css("top",top-pds);
break;
case KEY.S:
var top=parseInt($("#paddlea").css("top"));
$("#paddlea").css("top",top+pds);
break;

}
});
});
function  gameloop()
{
movepaddles();
moveball();
}
function movepaddles()
{
if(pingpong.pressedkeys[KEY.UP])
{
var top=parseInt($("#paddleb").css("top"));
$("#paddleb").css("top",top-pds);
}
if(pingpong.pressedkeys[KEY.DOWN])
{
var top=parseInt($("#paddleb").css("top"));
$("#paddleb").css("top",top+pds);
}
if(pingpong.pressedkeys[KEY.W])
{
var top=parseInt($("#paddlea").css("top"));
$("#paddlea").css("top",top-pds);
}
if(pingpong.pressedkeys[KEY.S])
{
var top=parseInt($("#paddlea").css("top"));
$("#paddlea").css("top",top+pds);
}

}
function moveball()
{
var pgh=parseInt($("#playground").height());
var pgw=parseInt($("#playground").width());
var ball=pingpong.ball;

if(ball.x+ball.speed*ball.directionX+40>pgw)
{
ball.x=160;
ball.y=280;
$("#ball").css({"left":ball.x,"top":ball.y});
ball.directionX=1;
score1+=1;
$("#scorea").html(score1);

}
if(ball.x+ball.speed*ball.directionX<0)
{
ball.x=160;
ball.y=280;
$("#ball").css({"left":ball.x,"top":ball.y});
ball.directionX=1;
score2+=1;
$("#scoreb").html(score2);
}
if(score1>9)
{
alert("winner is a!");
score1=0;
score2=0;
$("#scorea").html(score1);
$("#scoreb").html(score2);
}
if(score2>9)
{
alert("winner is b!");
score1=0;
score2=0;
$("#scorea").html(score1);
$("#scoreb").html(score2);
}
if(ball.y+ball.speed*ball.directionY+40>pgh)
{
ball.directionY=-1;
}
if(ball.y+ball.speed*ball.directionY<0)
{
ball.directionY=1;
}
if(ball.x+ball.speed*ball.directionX+40>pgw)
{
ball.directionX=-1;
}
if(ball.x+ball.speed*ball.directionX<0)
{
ball.directionX=1;
}
ball.x+=ball.speed*ball.directionX;
ball.y+=ball.speed*ball.directionY;

var pax=parseInt($("#paddlea").css("left"))+parseInt($("#paddlea").css("width"));
var pab=parseInt($("#paddlea").css("top"))+parseInt($("#paddlea").css("height"));
var pat=parseInt($("#paddlea").css("top"));
if(ball.x<pax&&ball.x>pax-60)
{
if(ball.y<=pab&& ball.y>=pat)
{
ball.directionX=1;
}
}
var pbx=parseInt($("#paddleb").css("left"));
var pbb=parseInt($("#paddleb").css("top"))+parseInt($("#paddleb").css("height"));
var pbt=parseInt($("#paddleb").css("top"));
if(ball.x+40>pbx&&ball.x+40<pbx+60)
{
if(ball.y<=pbb&& ball.y>=pbt)
{
ball.directionX=-1;
}
}

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

}


</style><body><script>$(function(){alert("game start!")});</script><div id="game"> <div id="playground"> <p align="center"><font color="#AEB616" size="+4" face="新宋体" ><b>PINGPONG</b></font></p> <div id="scoteboard"> <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="paddlea" class="paddle"></div> <div id="paddleb" class="paddle"></div> <div id="ball"></div> </div></div></body></html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航