基于JavaScript实现飞机大战游戏的完整示例代码
作者:拾光时间:2026-10-25 12:40:53浏览:230
本文详细介绍如何使用JavaScript开发一款经典的飞机大战游戏。内容涵盖正则表达式基础、敌方战机生成逻辑、我方战机控制及子弹发射机制,重点解析碰撞检测算法的实现。通过完整的示例代码,帮助开发者掌握Canvas或DOM元素游戏开发的核心技术。
演示

技术栈
本期内容暂不展开新话题,我们将提前预告后续计划的技术要点。若无异议,即刻开始。下方展示了正则表达式的相关总结,供读者预先参考。

(function() {
/**
* 1. JavaScript使用正则式的函数
*/
const str = "abchelloasdasdhelloasd";
// 1. 查找
console.log(str.search("h")); // 3
// 2. 替换
console.log(str.replace(/a/, "s")); // sbchelloasdasdhelloasd
// 3. 切割
console.log(str.split(/ab/)); // ["", "bchello", "sd", "sdhello", "sd"]
// 4. RegExp.prototype.test方法:检测该字符串是否包含指定串
console.log(/hello/.test("abchello")); // true
// 5. RegExp.prototype.exec方法:将满足条件的字符串放到数组
let reg=/hello/g;
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
}());
源码
<div id='box'></div>
定义敌方战机
//敌方战机
'enemy' : function(){
var oEnemy = Game.ctE('img');
oEnemy.src='images/enemy.png';
oEnemy.className='enemy';
Game.box.appendChild(oEnemy);
var left = Math.random()*(Game.box.clientWidth-Game.getstyle(oEnemy,'width')/2);
var top = Game.getstyle(oEnemy,'top');
oEnemy.style.left=left+'px';
oEnemy.timer=setInterval(function(){
/*敌军下落速度*/
top+=3;
oEnemy.style.top=top+'px';
if(top>Game.box.clientHeight){
clearInterval(oEnemy.tiamr);
if(!oEnemy.parentNode){
return;
}else{
oEnemy.parentNode.removeChild(oEnemy);
};
}else{
var allB = Game.getclass(Game.box,'img','bullet');
for(var i=0;i<allB.length;i++){
if(Game.pz(oEnemy,allB[i])){
allB[i].parentNode.removeChild(allB[i]);
oEnemy.src='images/boom.png';
clearInterval(oEnemy.timer);
setTimeout(function(){
if(!oEnemy.parentNode){
return;
}else{
oEnemy.parentNode.removeChild(oEnemy);
};
},500);
Game.num+=10;
Game.oScore.innerHTML=Game.num+'分';
Game.fenshu=Game.oScore.innerHTML;
};
};
if(Game.pz(oEnemy,Game.oPlane)){
oEnemy.src='images/boom.png';
clearInterval(oEnemy.timer);
setTimeout(function(){
if(!oEnemy.parentNode){
return;
}else{
oEnemy.parentNode.removeChild(oEnemy);
};
},500);
Game.oPlane.src='images/boom2.png';
clearInterval(Game.bTimer);
clearInterval(Game.start.timer);
document.onmousemove=null;
setTimeout(function(){
Game.over();
},3000);
};
};
},30);
},
定义我方战机
'plane' : function(ev,t,c){
Game.box.appendChild(Game.oPlane);
var bT = Game.box.offsetTop + Game.oPlane.clientHeight/2 + (Game.box.offsetHeight-Game.getstyle(Game.box,'height'))/2;
var bL = Game.box.offsetLeft + Game.oPlane.clientWidth/2 + (Game.box.offsetWidth-Game.getstyle(Game.box,'width'))/2;
var top = ev.pageY - bT;
var left = ev.pageX - bL;
Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;';
var topMax = Game.getstyle(Game.box,'height')-Game.oPlane.clientHeight/2;
var leftMin = -Game.oPlane.clientWidth/2;
var leftMax = Game.getstyle(Game.box,'width')-Game.oPlane.clientWidth/2;
document.onmousemove = function(ev){
ev = ev||event;
top = ev.pageY - bT;
left = ev.pageX - bL;
if(top<0){
top=0;
}else if(top>topMax){
top = topMax;
};
if(left<leftMin){
left = leftMin;
}else if(left>leftMax){
left = leftMax;
};
Game.oPlane.style.cssText='top:'+top+'px;left:'+left+'px;';
};
/*子弹生成速度 */
Game.bTimer=setInterval(function(){Game.bullet(top,left,c);},t);
},
碰撞检测
//碰撞检测
'pz' : function(obj1,obj2){
var T1 = Game.getstyle(obj1,'top');
var B1 = T1+Game.getstyle(obj1,'height');
var L1 = Game.getstyle(obj1,'left');
var R1 = L1+Game.getstyle(obj1,'width');
var T2 = Game.getstyle(obj2,'top');
var B2 = T2+Game.getstyle(obj2,'height');
var L2 = Game.getstyle(obj2,'left');
var R2 = L2+Game.getstyle(obj2,'width');
if(T1>B2||L1>R2||B1<T2||R1<L2){
return false;
}else{
return true;
};
},

至此,关于基于JavaScript实现飞机大战游戏的示例代码介绍完毕。如需了解更多JS飞机大战相关内容,建议查阅本站往期文章或继续阅读后续系列。感谢支持!
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
