原生JS實現飛機大戰小游戲
本文實例為大家分享了JS實現飛機大戰小游戲的具體代碼，供大家參考，具體內容如下
<html> <head> <title> 飛機大戰 </title> <style type='text/css'> *{margin:0;padding:0;font-family:'Microsoft yahei'} body{overflow:hidden;;} </style> </head> <body> <script> window.onload = function(){ Game.exe(); }; var Game = { //啟動程序 exe :function(){ document.body.style.background = ’#fff’; var oDiv = document.createElement(’div’); oDiv.id = ’GameBox’; oDiv.style.cssText = ’width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:'Microsoft yahei';text-align:center;position:relative;overflow:hidden;background:#fff’; document.body.appendChild(oDiv); this.init(); }, score : 0 , ifEnd : false, //初始化 init: function(){ var This = this; var oDiv = document.getElementById(’GameBox’); oDiv.innerHTML = ’’; Game.score = 0; Game.ifEnd = false; var oH = document.createElement(’h1’); oH.innerHTML = ’飛機大戰 v1.0’; oH.style.cssText = ’color:#555555;font-size:30px;padding-top:50px;’; oDiv.appendChild( oH ); for (var i=0;i<4 ;i++ ) { var oP = document.createElement(’p’); oP.index = i; oP.style.cssText = ’font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:'Microsoft yahei';font-weight:bold;cursor:pointer;’ var html = ’’; oP.onmouseenter = function(){ this.style.background = ’#ff9933’; this.style.color = ’##ff6600’ }; oP.onmouseleave = function(){ this.style.background = ’#999’; this.style.color = ’white’ }; oP.onclick = function( e ){ e = e || window.event; This.start( this.index , oDiv , e ); }; switch( i ){ case 0: html = ’簡單難度’; break; case 1: html = ’中等難度’; break; case 2: html = ’困難難度’; break; case 3: html = ’小天才附體’; break; } oP.innerHTML = html; oDiv.appendChild(oP); }; }, //游戲開始 start : function( index , oGameBox , e ){ oGameBox.innerHTML = ’’; var oS = document.createElement(’span’); oS.innerHTML = this.score; oS.style.cssText = ’position:absolute;left:20px;top:20px;font-size:14px;color:black;’; oGameBox.appendChild( oS ); this.plane( oGameBox , e ,index ); this.enemy( oGameBox ,oS ,index ); }, //關于飛機 plane : function( oGameBox , e ,index ){ var x = e.pageX; y = e.pageY; var oPlane = new Image(); oPlane.src = ’images/plane.png’; oPlane.width = 60; oPlane.height = 36; oPlane.id = ’plane’; var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2; var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2; window.onresize = function(){ lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2; }; var top = y- tY; var left = x- lX; oPlane.style.cssText = ’display:block;position:absolute;top:’+top+’px;left:’+left+’px;’; oGameBox.appendChild( oPlane ); var leftMin = - oPlane.width/2; var leftMax = oGameBox.clientWidth - oPlane.width/2; var topMin = 0; var topMax = oGameBox.clientHeight - oPlane.height; document.onmousemove = function(e){ if( !Game.ifEnd ) { e = e || window.event; var top = e.pageY -tY; var left = e.pageX -lX; top = Math.min( top , topMax );//取參數里最小的if( top > topMax )top = topMax; top = Math.max( top ,topMin );//取參數里最大的 left = Math.min( left , leftMax );//取參數里最小的if( top > topMax )top = topMax; left = Math.max( left ,leftMin ); oPlane.style.left = left + ’px’; oPlane.style.top = top + ’px’; } }; this.biu( oPlane , oGameBox ,index ); }, biu : function( oPlane , oGameBox ,index ){ var speed ; switch ( index ) { case 0: speed = 30; break; case 1: speed = 40; break; case 2: speed = 50; break; case 3: speed = 10; break; } this.BiuTimer = setInterval(function(){ var oBiu = new Image(); oBiu.src = ’images/bullet.png’; oBiu.width = 6; oBiu.height = 22; oBiu.className = ’bullet’; var top = oPlane.offsetTop - oBiu.height +3 ; var left = oPlane.offsetLeft + oPlane.width/2 -oBiu.width/2; oBiu.style.cssText = ’position:absolute;top:’+top+’px;left:’+left+’px;’; oGameBox.appendChild( oBiu ); oBiu.timer = setInterval( function(){ if( !oBiu.parentNode){ clearInterval( oBiu.timer ); } oBiu.style.top = oBiu.offsetTop - 10 + ’px’; if( oBiu.offsetTop < -oBiu.height ){ clearInterval( oBiu.timer ); oBiu.parentNode.removeChild( oBiu ); } }, 13 ); } ,speed ); }, enemy : function( oGameBox ,oS , index ){ var a , x; switch ( index ) { case 0: a = 1; x = 500; break; case 1: a = 2; x = 300; break; case 2: a = 3; x = 200; break; case 3: a = 5; x = 100; break; } this.EnemyTimer = setInterval( function(){ var oEnemy = new Image(); oEnemy.src = ’images/enemy.png’; oEnemy.width = 23; oEnemy.height = 30; var lMin = 0; var lMax = oGameBox.clientWidth - oEnemy.width; var left = Math.random()*(lMax-lMin) + lMin; oEnemy.style.cssText = ’position:absolute;top: -’+(-oEnemy.height)+’px; left:’+left+’px;’; oGameBox.appendChild( oEnemy ); var b = Math.random() * a + 1 ; oEnemy.timer = setInterval(function(){ oEnemy.style.top = oEnemy.offsetTop + b + ’px’;//敵軍的下落速度 if( oEnemy.offsetTop >= oGameBox.clientHeight ){ clearInterval( oEnemy.timer ); oEnemy.parentNode.removeChild( oEnemy ); } },13); //和子彈的碰撞監測 var allBiu = Game.getClass(’bullet’); oEnemy.pzBiu = setInterval(function(){ for(var i = 0;i < allBiu.length;i++) { if( Game.boom( oEnemy ,allBiu[i])) { Game.score ++; oS.innerHTML = Game.score; oEnemy.src = ’images/boom.png’; clearInterval( oEnemy.pzBiu ); clearInterval( oEnemy.pzPlane ); allBiu[i].parentNode.removeChild( allBiu[i] ); setTimeout(function(){if( oEnemy.parentNode ){ oEnemy.parentNode.removeChild( oEnemy );}; },300); break; } } },50); //和戰機的碰撞監測 var oPlane = document.getElementById(’plane’); oEnemy.pzPlane = setInterval(function(){ if( Game.ifEnd ){ clearInterval( oEnemy.pzPlane); } if( Game.boom( oEnemy , oPlane)) { Game.ifEnd = true; clearInterval( oEnemy.pzPlane); clearInterval( Game.BiuTimer); clearInterval( Game.EnemyTimer); oEnemy.src = ’images/boom.png’; oPlane.src = ’images/boom2.png’; setTimeout(function(){ Game.over( oGameBox ); },300); } },50); } , x );//敵軍生成速度 }, //碰撞監測 boom : function( obj1 , obj2 ){ var T1 = obj1.offsetTop; var B1 = T1 + obj1.clientHeight; var L1 = obj1.offsetLeft; var R1 = L1 + obj1.clientWidth; var T2 = obj2.offsetTop; var B2 = T2 + obj2.clientHeight; var L2 = obj2.offsetLeft; var R2 = L2 + obj2.clientWidth; if ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 ) { return false; // 沒撞上 } else { return true; // 撞上了 } }, //游戲結束 over : function( oGameBox ){ oGameBox.innerHTML = ’’; var oDiv = document.createElement(’div’); oDiv.style.cssText = ’width:300px;height:200px;margin:100px auto;background:#e0e0e0;border:5px solid #858585’; var oT = document.createElement(’h3’); oT.innerHTML = ’Game Over’; oT.style.cssText = ’padding-top:50px;font-size:25px;’; var oP1 = document.createElement(’p’); oP1.innerHTML = ’您的得分是：’ + ’<span style='color:#ffffff;font-weight:bold;'>’ + this.score + ’</span>’; oP1.style.cssText = ’font-size:16px;color:#fff;’; var oRestart = document.createElement(’div’); oRestart.style.cssText = ’width:100px;height:40px;font-size:14px;text-align:center;line-height:40px;color:white;background:#999;margin:20px auto;cursor:pointer;’; oRestart.innerHTML = ’重新開始’; oRestart.onclick = function(){ Game.init(); }; oDiv.appendChild( oT ); oDiv.appendChild( oP1 ); oDiv.appendChild( oRestart ); oGameBox.appendChild( oDiv ); }, //getclass 方法 getClass : function( cName , parent ){ parent = parent || document; if( document.getElementsByClassName ){ return parent.getElementsByClassName(cName); } else { var all = parent.getElementsByTagName(’*’); var arr = []; for( var i = 0;i<all.length;i++ ) { var arrClass = all.className.split(’ ’); for( var j = 0; j < arrClass.length;j++ ){ if( arrClass[j] == cName ) {arr.push( all[i]);break; } } } return arr; } }, }; </script> </body></html>
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備