简单的射击游戏HTML+JS实现

时间：2016-08-13 09:59:15 阅读：1505 评论：0 收藏：0 [点我收藏+]

标签：

一直想自己写一个游戏玩，时间和精力都不太允许，最近几天刚好有空闲时间，就琢磨了这个小游戏。

刚开始想着计算图片重叠事件,然后让炮弹和飞机消失,傻乎乎写了一天,越整越乱.今天一大早晕过来了，改用数组以后全部实现也就花了一个小时，有时候正确的方向真的比努力重要的多

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>射击游戏</title>
<link type="text/css" rel="stylesheet" href="css.css">
<script type="text/javascript" src="control.js" charset="gbk"></script>
</head>
<body>
<div id="body">
	<div id="title">
		<span id="sp">射击游戏</span>
	</div>
	<div id="area">
		<div id="game_area">
			
		</div>
		<div id="Down_1">
			<img id="tank" src="tank.png">
		</div>	
	</div>
	<div id="right_1">
		<h3>游戏说明:</h3><br>
		<p>1、暂停以后点开始游戏继续</p><br>
		<p>2、 暂不支持修改控制按键</p><br>
		<p>3、 点新游戏刷新页面,重新开始游戏</p><br>
		<p>4、 电脑情况不同可能出现卡顿</p><br>
	</div>
	<div id="right">
		<div id="score">得分 :<br><span id="sp1">0</span><br>分 </div>
	<table>
	<tr>
		<td><input id="new" class="key" value="开始游戏" type="button" onclick="start()"></td>
	</tr>
	<tr>
		<td><input id="new" class="key" value="新游戏" type="button" onclick="newGame()"></td>
	</tr>
	<tr>
		<td><input id="stop" class="key" value="暂停" type="button" onclick="stop();"></td>
	</tr>		
	<tr>
		<td>左：←<input id="key_left" value="←" class="key" maxlength="1"  onblur="setLeft()" type="text"></td>
	</tr>		
	<tr>
		<td>右：→<input id="key_right" value="→" class="key" maxlength="1"  onblur="setRight()" type="text"></td>
	</tr>						
	<tr>
		<td>发射：<input id="key_shot" value="x" class="key" maxlength="1"  onblur="setShot()" type="text"></td>
	</tr>				
		</table>
	</div>
</div>
</body>
</html>

　　JS代码如下，最上面的二维数组写出了是为了思路清晰一点，把这个看成屏幕思路更清晰一点

  1 var in_area=[
  2     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  3     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  4     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  5     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  6     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  7     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  8     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  9     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 10     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 11     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 12     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 13     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 14     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 15     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 16     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 17     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 18     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 19     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 20     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 21     [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
 22 ];
 23 
 24 
 25 window.onload=function(){
 26     setInterval(color,200);
 27     
 28 }
 29 var fz_speed = 2000;//下落速度
 30 function start(){//开始
 31      clock_1 = setInterval(refresh,10);
 32      clock_2 = setInterval(shot_move,10);//发射子弹速度
 33      redom_fz;//产生一行飞机
 34      clock_4 = setInterval(fz_move,1000);//飞机下落,
 35     
 36 }
 37 function stop(){//暂停
 38     clearInterval(clock_1);
 39     clearInterval(clock_2);
 40     clearInterval(clock_3);
 41     clearInterval(clock_4);
 42 }
 43 function newGame(){//重新开始,刷新页面,初始化页面为0
 44     window.location.reload();
 45     for(var i = 0;i<20;i++){
 46         for(var j=0;j<20;j++){
 47             in_area[i][j]=0;
 48         }
 49     }
 50 }
 51 
 52 
 53 function refresh(){
 54     var line = document.getElementById("game_area");
 55     line.innerHTML="";
 56     for(var i = 0;i<20;i++){
 57         for(var j=0;j<20;j++){
 58             var img = line.appendChild(document.createElement("img"));
 59             //in_area[i][j]=Math.floor(Math.random()*3);
 60             if(in_area[i][j]==1){                    //1 = 飞机
 61                 img.setAttribute("class","fz");
 62                 img.setAttribute("src","feiji.png");
 63             }else if(in_area[i][j]==2){                //2 = 子弹
 64                 img.setAttribute("class","zd");
 65                 img.setAttribute("src","ziDan.png")
 66             }else{                                    //0 = 消失
 67                 line.removeChild(img)
 68                 var img = line.appendChild(document.createElement("div"));
 69                 img.setAttribute("class","black");
 70             }
 71         }
 72     }
 73 }
 74 
 75 
 76 
 77 
 78 
 79 
 80 //左右和射击,左37,右39,空格32,x键88
 81 var left=37;
 82 var right=39;
 83 var shot = 88 ;
 84 onkeydown=function(){    
 85     var e= event;
 86     if(e.keyCode==left){
 87         move_left();
 88     }
 89     if(e.keyCode==right){
 90         move_right();
 91     }
 92     if(e.keyCode==shot){
 93         new_shot();
 94     }
 95 }
 96 //左移
 97 function move_left(){
 98     var tank = $("tank");        
 99     var left = getDefaultStyle(tank,‘left‘);
100     if(left>0){
101     left = left-30;
102     tank.style.left=left+"px";
103     }
104 }
105 //右移
106 function move_right(){
107     var tank = $("tank");
108     var left = getDefaultStyle(tank,‘left‘);
109     if(left<560){
110     left = left+30;
111     tank.style.left=left+"px";
112     }
113 }
114 //射击(坦克左右移动范围left:-10px~560px,加上10再除以30得到0~19列)
115 function new_shot(){
116     var tank = $("tank");
117     var left = (getDefaultStyle(tank,‘left‘)+10)/30;
118     in_area[19][left]=2;
119 }
120 //子弹移动   子弹 = 2,从第二行开始遍历
121 function shot_move(){
122     for(var i = 1;i<20;i++){
123         for(var j=0;j<20;j++){
124             if(in_area[i][j]==2){
125                 in_area[i-1][j]+=in_area[i][j];
126                 in_area[i][j]=0;
127                 if(in_area[i-1][j]==3){
128                     in_area[i-1][j]=0;
129                     addScore();
130                 }
131                 if(i==0){
132                     in_area[i][j]=0;
133                 }
134             }
135         }
136     }
137 }
138 //产生飞机0~1,出现飞机的频率,数字越大飞机越多
139 var level = 0.1;
140 function redom_fz(){
141     for(var j=0;j<20;j++){
142         if(Math.random()<level){
143             in_area[0][j]=1;
144         }
145     
146     }
147 }
148 //飞机下落   飞机=1,从第一行开始遍历
149 function fz_move(){
150     for(var i = 19;i!=-1;i--){
151         for(var j=0;j<20;j++){
152             if(i-1>=0){
153                 if(in_area[i-1][j]==1){
154                     in_area[i][j]+=in_area[i-1][j];
155                     in_area[i-1][j]=0;
156                     if(in_area[i][j]==3){
157                         in_area[i][j]=0;
158                         addScore();
159                     }
160                     if(i>=19){
161                         alert("Game Over!!!");
162                         window.location.reload();
163                     }
164                 }
165             }
166         }
167     }
168     redom_fz()    //产生一行飞机,在最上方
169 }
170 
171 //设置分数
172 var score = 0;
173 function addScore(){
174     
175     score++;
176     var s=$("sp1");
177     b = b+Math.floor(Math.random()*50);
178     y = y+Math.floor(Math.random()*50);
179     r = r+Math.floor(Math.random()*50);
180     if(b>255){
181         b = 0;
182     }
183     if(y>255){
184         y = 0;
185     }
186     if(r>255){
187         r = 0;
188     }
189     s.style.color="rgb("+b+","+y+","+r+")";
190     s.innerHTML=score;
191 }
192 
193 
194 //设置三原色
195 var b = 0;
196 var y = 0;
197 var r = 0;
198 var color = function(){
199     b = b+Math.floor(Math.random()*50);
200     y = y+Math.floor(Math.random()*50);
201     r = r+Math.floor(Math.random()*50);
202     if(b>255){
203         b = 0;
204     }
205     if(y>255){
206         y = 0;
207     }
208     if(r>255){
209         r = 0;
210     }
211     var p = document.getElementById("sp");
212     p.style.color="rgb("+b+","+y+","+r+")";
213 }
214 function $(id){
215     return document.getElementById(id);
216 }
217 function getDefaultStyle(obj,attribute){
218     return parseInt(window.getComputedStyle(obj, null)[attribute]);
219 }

CSS代码

 1 @CHARSET "UTF-8";
 2 *{
 3     margin: 0px;
 4     padding: 0px;
 5 }
 6 #body{
 7     margin: auto;
 8     margin-top:50px;
 9     width: 1000px;
10     height: 700px;
11     border: solid 5px rgb(241,241,241);
12     background:rgb(255,255,225);
13 } 
14 #score{
15     font-size: 0.8cm;
16 }
17 #game_area{
18     width: 600px;
19     height: 600px;
20     float: left;
21 }
22 #Down_1{
23     width: 600px;
24     height: 50px;
25     background-color: rgb(225,225,200);
26     float: left;
27 }
28 #tank{
29     height:50px;
30     width:50px;
31     background-color: black;
32     position: relative;
33     left:290px;
34     top:2px;
35 }
36 #sp1{
37     color: rgb(0,225,225);
38     font-size: 1.2cm;
39 }
40 #right{
41     width: 180px;
42     height: 600px;
43     float: right;
44     border: solid 2px rgb(225,225,225);
45 }
46 #right_1{
47     width: 180px;
48     height: 600px;
49     float: right;
50     border: solid 2px rgb(225,225,225);
51 }
52 tr{
53     height: 1.5cm;
54 }
55 #title{
56     width: 400px;
57     height: 50px;
58     position: relative;
59     left:40%;
60 }
61 #new,#stop{
62     position: relative;
63     left:30%;
64 }
65 .key{
66     width: 2cm;
67     height: 0.8cm;
68     maxlength: 1;
69 }
70 #sp{
71     font-size: 1cm;
72     font-style: oblique;
73 }
74 #area{
75     width: 600px;
76     height: 650px;
77     border: solid 1px rgb(0,115,0);
78     float: left;
79 }
80 
81 .fz{
82     width:30px;
83     height:30px;
84     position:relative;
85     float: left;
86 }
87 
88 .zd{
89     width:30px;
90     height:30px;
91     position:relative;
92     float: left;
93 }
94 .black{
95     width:30px;
96     height:30px;
97     position:relative;
98     float: left;
99 }