一直想自己写一个游戏玩，时间和精力都不太允许，最近几天刚好有空闲时间，就琢磨了这个小游戏。
刚开始想着计算图片重叠事件,然后让炮弹和飞机消失,傻乎乎写了一天,越整越乱.今天一大早晕过来了，改用数组以后全部实现也就花了一个小时，有时候正确的方向真的比努力重要的多
<!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 }
图片素材:
feiji.png
tank.png
ziDan.png
时间： 2024-10-15 21:03:31