淘先锋技术网

首页 1 2 3 4 5 6 7

一个html5的小游戏

  最近开始学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" ><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>