原生jsは飛行機の小さいゲームを打ちます.
34085 ワード
最近は原生の知識を固めるために、jsのミニゲームを手に入れました.主に勉強とトレーナーのためです.
jsコードは以下の通りです
転載先:https://www.cnblogs.com/violinxliu/p/3830488.html
jsコードは以下の通りです
1 window.onload = function(){
2 var oBtn = document.getElementById('gameBtn');
3 oBtn.onclick = function(){
4 this.style.display = 'none';
5 Game.init('div1');//
6 };
7 };
8 // Game
9
10 var Game = {
11 life:1,//
12 score:0,//
13 direction:[1,1,1,1],// -> ： -> 1:
14 autoShoot:1,// -> 1: 0：
15 oEnemy:{ //
16 1:{style:'enemy1', blood:1, score:1},
17 2:{style:'enemy2', blood:2, score:2},
18 3:{style:'enemy3', blood:3, score:3}
19 },
20 air:{ //
21 style:'air1',//
22 bulletStyle:'bullet'//
23 },
24 gk:{ //
25 colNum:20,
26 iSpeedY:10,
27 time:2000
28 },
29 init:function(id){ //
30 this.oParent = document.getElementById(id);
31 this.createScore();
32 this.createAir();//
33 this.createField();//
34 },
35 createScore : function(){ //
36 var oS = document.createElement('div');
37 oS.id = 'score';
38 oS.innerHTML = ' :0 ';
39 this.oParent.appendChild(oS);
40 this.oSNum = oS.getElementsByTagName('span')[0];
41 },
42 createAir:function(){
43 var oAir = document.createElement('div');
44 oAir.className = this.air.style;
45 this.oAir = oAir;//
46 this.oParent.appendChild( oAir );
47 oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth) / 2 + 'px';
48 oAir.style.top = this.oParent.offsetHeight - oAir.offsetHeight + 'px';
49 this.bindEventAir();// ,
50 },
51 bindEventAir:function(){
52 var This = this,
53 timer = null,
54 iNum = 0;
55 function show(dir,flag){ // ，
56 var leftPos = flag[3],
57 upPos = flag[0],
58 rightPos = flag[1],
59 downPos = flag[2];
60 if(dir == 1 && leftPos){
61 This.oAir.style.left = (This.oAir.offsetLeft - 10) <= 0 ? '0' + 'px' : (This.oAir.offsetLeft - 10) + 'px';
62 } else if( dir == 3 && rightPos){
63 This.oAir.style.left = ( (This.oAir.offsetLeft + 10) >= (This.oParent.offsetWidth - This.oAir.offsetWidth)) ? (This.oParent.offsetWidth - This.oAir.offsetWidth) + 'px' : (This.oAir.offsetLeft + 10) + 'px';
64 } else if( dir == 2 && upPos){
65 This.oAir.style.top = (This.oAir.offsetTop -10) <= 0 ? '0' + 'px': (This.oAir.offsetTop - 10) + 'px';
66 } else if( dir == 4 && downPos){
67 This.oAir.style.top = ( (This.oAir.offsetTop + 10) >= (This.oParent.offsetHeight - This.oAir.offsetHeight) ) ? (This.oParent.offsetHeight - This.oAir.offsetHeight) + 'px': (This.oAir.offsetTop + 10) + 'px';
68 }
69 if(Game.autoShoot && iNum != 0){//
70 This.createBullet();
71 }
72 }
73 function getDirection(keycode){
74 switch (keycode){
75 case 37://
76 iNum = 1;
77 break;
78 case 38://
79 iNum = 2;
80 break;
81 case 39://
82 iNum = 3;
83 break;
84 case 40://
85 iNum = 4;
86 break
87 default:
88 iNum = 0;
89 }
90 return iNum;
91 }
92 document.onkeydown = function(ev){
93 var ev = ev || window.event;
94 var code = ev.keyCode;
95 if(!timer){
96 clearInterval(timer);
97 timer = setInterval(function(){
98 show(getDirection(code),Game.direction)
99 },30);
100 }
101 };
102 document.onkeyup = function(ev){
103 var ev = ev || window.event;
104 clearInterval(timer);
105 timer = null;
106 iNum = 0;
107 if(ev.keyCode == 32 && Game.life){//
108 if(Game.autoShoot) return false; // return
109 This.createBullet();//
110 }
111 };
112 },
113 createBullet:function(){
114 var oB = document.createElement('div');
115 oB.className = this.air.bulletStyle;
116 this.oParent.appendChild( oB );
117 oB.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 + 'px';
118 oB.style.top = this.oAir.offsetTop - 10 + 'px';
119 this.runBullet( oB );//
120 },
121 runBullet:function( oB ){
122 var This = this;
123 oB.timer = setInterval(function(){
124 var T = oB.offsetTop - 10;
125 if( T < -10 ){
126 clearInterval( oB.timer );
127 This.oParent.removeChild( oB );
128 } else {
129 oB.style.top = T + 'px';
130 }
131 for(var i=0;i){
132 if( This.pz(oB,This.aLi[i]) ){
133 if(This.aLi[i].blood == 1){
134 This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score;
135 This.oUl.removeChild( This.aLi[i] );
136 }
137 else{
138 This.aLi[i].blood--;
139 }
140 This.oParent.removeChild(oB);
141 clearInterval(oB.timer);
142 }
143 }
144 if( This.aLi.length <= 3 ){
145 This.randomEnemy(document.getElementById('bee'));
146 }
147 },30);
148 },
149 createField:function(){
150 if( this.oUl ){// ul ，
151 this.oParent.removeChild( this.oUl );
152 clearInterval(this.oUl.timer);
153 }
154 var oUl = document.createElement('ul');
155 this.oUl = oUl;
156 oUl.id = 'bee';
157 this.oParent.appendChild(oUl);
158 oUl.style.width = this.gk.colNum * 40 + 'px';
159 oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + 'px';
160 this.randomEnemy(oUl);//
161 this.timeToCreateEnemy = setInterval(function(){
162 Game.randomEnemy(oUl);
163 }, 50000);
164 },
165 randomEnemy:function(oUl){
166 var This = this;
167 this.aLi = null;
168 var random = 35;
169 var nowLi = [];
170 function _randomEnemy(i){//
171 i = (i % 3) + 1;
172 return This.oEnemy[i];
173 }
174 nowLi.length = Math.floor(Math.random()* random) + 1;//
175 var op = this.oParent.getElementsByTagName("li");
176 if(op){
177 This.oUl.innerHTML = '';
178 }
179 for( var i =0; i< nowLi.length; i++){
180 var oLi = document.createElement('li');
181 var enemy = _randomEnemy(i);
182 oLi.className = enemy.style;
183 oLi.blood = enemy.blood;
184 oLi.speed = enemy.speed;
185 oLi.score = enemy.score;
186 oUl.appendChild(oLi);
187 }
188 items = oUl.getElementsByTagName('li');
189 this.aLi = items;
190 for(var i=0; i){
191 items[i].style.left = 40*(Math.floor(20*Math.random())) + 'px';
192 items[i].style.top = 28*(Math.floor(10*Math.random())) + 'px';
193 }
194 this.runEnemy();//
195 },
196 runEnemy:function(){
197 var This = this;
198 if(This.timeRunEnemy){//
199 clearInterval(This.timeRunEnemy);
200 }
201 var maxTop = This.oParent.offsetHeight - 28;
202 This.timeRunEnemy = setInterval(function(){
203 for(var i=0; i){
204 if(This.aLi[i].offsetTop < maxTop){
205 This.aLi[i].style.top = This.aLi[i].offsetTop + Game.gk.iSpeedY + 'px';
206 if( This.pz( This.oAir , This.aLi[i])){
207 alert(' ');
208 This.life --;//
209 clearInterval(This.timeRunEnemy);//
210 clearInterval(This.timeToCreateEnemy);//
211 This.direction = [0,0,0,0];//
212 This.autoShoot = 0;//
213 }
214 } else {
215 This.oUl.removeChild( This.aLi[i] );//
216 if( This.aLi.length <= 10){
217 Game.randomEnemy(This.oUl);
218 }
219 }
220 }
221 }, 500)
222 },
223 pz : function(obj1,obj2){ //
224 var L1 = obj1.offsetLeft;
225 var R1 = obj1.offsetLeft + obj1.offsetWidth;
226 var T1 = obj1.offsetTop;
227 var B1 = obj1.offsetTop + obj1.offsetHeight;
228 var L2 = obj2.offsetLeft+obj2.parentNode.offsetLeft;
229 var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;
230 var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;;
231 var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;
232 if( R1R2 || T1>B2 || B1<T2 ){
233 return false;
234 }
235 else{
236 return true;
237 }
238 }
239 }; 転載先:https://www.cnblogs.com/violinxliu/p/3830488.html