自己写的一个小游戏

75 阅读 0 评论 50 点赞

我是靠谱客的博主呆萌大雁，最近开发中收集的这篇文章主要介绍自己写的一个小游戏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

自己写的一个虐心小游戏，a,d,j,l操作人物移动。

<!doctype html>
<html style="margin:0;padding:0">
	<head>
		<meta charset = "utf-8" />
		<title>left right hand</title>
		<script type="text/javascript">
			var block = 10;//间距
			var all_obs = new Array();//障碍物数组
			var game_time = 0;//时间
			var p1,p2;//player
			var speed = 500;
			//障碍物
			function Obstacle(obs_width,obs_pos){
				var obs_height = block;
				var obs = document.createElement("div");
				obs.style.width = obs_width * block +"px";
				obs.style.height = obs_height+"px";
				obs.style.left = obs_pos * block +"px";
				obs.style.top = block+"px";
				obs.style.backgroundColor = "black";
				obs.style.position = 'absolute';
				document.body.appendChild(obs);
				all_obs.push(obs);
			}
			
			//背景
			function Map(){
				var map_w = 24*block, map_h = 32*block;
				var m = document.createElement("div");
				m.style.left = 0+"px";
				m.style.top = 0+"px";
				m.style.width = map_w+"px";
				m.style.height = map_h+"px";
				m.style.backgroundColor = "#888888";
				document.body.appendChild(m);
			}
			//人物
			function Player(p_id, pos_x,pos_y,color) {
				var player_w = block, player_h = block;
				var player = document.createElement("div");
				player.id = p_id;
				player.style.left = pos_x+"px";
				player.style.top = pos_y+"px";
				player.style.width = player_w+"px";
				player.style.height = player_h+"px";
				player.style.backgroundColor = "#" + color;
				player.style.position = 'absolute';
				document.body.appendChild(player);
				/*
				this.left_move = function(){
					if(parseInt(player.style.left) > 0)
					{
						player.style.left = (parseInt(player.style.left)-block+'px');
					}
				}
				
				this.right_move = function(){
					if(parseInt(player.style.left) < 23*block)
					{
						player.style.left = (parseInt(player.style.left)+block+'px');
					}
				}
				*/
			}

			//向下移动障碍物
			function move_obs(obs){
				obs.style.top = (parseInt(obs.style.top)+block+'px');
			}
			
			//删除屏幕外的障碍物
			function remove_obs(obs){
				if(obs.parentNode == document.body)
				{
					obs.parentNode.removeChild(obs);
					all_obs.shift();
				}
			}

			//检测碰撞
			function check(obs)
			{
				if(parseInt(obs.style.top) == 30*block) {
					if(parseInt(p1.style.left)>parseInt(obs.style.left) && parseInt(p1.style.left) < (parseInt(obs.style.left) + parseInt(obs.style.width))
						||parseInt(p2.style.left)>parseInt(obs.style.left) && parseInt(p2.style.left) < (parseInt(obs.style.left) + parseInt(obs.style.width))
						)
					{
						alert("gameover");
						clearInterval(mytime);
					}
				}
			}
			
			//循环
			function drow_obs() {
					var temp = 0;
					for(j = 0; j < 3;j++)//生成障碍物
					{
						if(game_time%4 == 0)
						{
							var obs_width = Math.round(Math.random()*5 +3);
							var obs_pos = Math.round(Math.random()*8) + temp;
							if(obs_pos < 24)
							{
								if((obs_pos + obs_width)>24)
								{
									obs_width = 24 - obs_pos;
								}
								var obs = new Obstacle(obs_width ,obs_pos); //创建障碍物
								temp = (obs_pos + temp + 4);
							}
						}
					}
					for(i=0;i<all_obs.length;i++)//遍历障碍物
					{
						if (parseInt(all_obs[i].style.top) >= 33*block)//是否要移除
						{
							remove_obs(all_obs[i]);
						}
						move_obs(all_obs[i]);
						check(all_obs[i]);
					}
					if(game_time % 5 == 0)
					{
						speed -= 500;
					}
					game_time++;
			}
			
			//左移动
			function p1_left_move(){
				if(parseInt(p1.style.left) >0*block)
				{
					p1.style.left = (parseInt(p1.style.left)-block+'px');
				}
			}
			
			//右移动
			function p2_left_move(){
				if(parseInt(p2.style.left) > 6*block)
				{
					p2.style.left = (parseInt(p2.style.left)-block+'px');
				}
			}
			
			function p1_right_move(){
				if(parseInt(p1.style.left) < 17*block)
				{
					p1.style.left = (parseInt(p1.style.left)+block+'px');
				}
			}
			
			function p2_right_move(){
				if(parseInt(p2.style.left) < 23*block)
				{
					p2.style.left = (parseInt(p2.style.left)+block+'px');
				}
			}
			
			//加载
			window.onload = function(){
				var map = new Map();
				var player1 = new Player("p1",8*block,30*block,545456);
				var player2 = new Player("p2",16*block,30*block,854252);
				p1 = document.getElementById("p1");
				p2 = document.getElementById("p2");
				mytime = setInterval("drow_obs()",speed);

				document.onkeydown = function(e){//定义一个按下的函数 问题1.为什么这个onkeydown是长按住会一直触发。keydown本身是用来获取所有的键盘事件，包含ctrl、alt等等都有，不只包含一般的输入键(像123abc)之外，所有在键盘上的键都有对应值，也就是它的回传值是有个代码。会这样作的原因当然是在输入时有可能会有复合键的情况，例如ctrl+s这样的键盘输入。
				switch (e.keyCode){
				    case 65:
				    {
				    	p1_left_move();
				    	//player1.left_move();
				    	break;
				    }
				    case 68:
				    {
				    	p1_right_move();
				    	break;
				    }
				    case 74:
				    {
				    	p2_left_move()
				    	//player2.left_move();
				    	break;
				    }
				    case 76:
				    {
				    	p2_right_move();
				    	break;
				    }
				  }
				}
			}		
		</script>
	</head>
	<body style="overflow:-Scroll;overflow-x:hidden;overflow-y:hidden; margin:0;padding:0; width:240; height:320">
		
	</body>
	</html>