原生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>
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现飞机大战小游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/
-
js实现飞机大战游戏
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo
-
JavaScript原生编写《飞机大战坦克》游戏完整实例
先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r
-
JS面向对象实现飞机大战
本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma
-
原生JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 <html> <head> <title> 飞机大战 </title> <style type="text/css"> *{margin:0;padding:0;font-family:"Microsoft yahei"} body{overflow:hidden;;} </style> </head>
-
用JS实现飞机大战小游戏
本文实例为大家分享了JS实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 小的时候玩的飞机大战感觉还蛮神奇,今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running =
-
javascript实现简单飞机大战小游戏
本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <title>mm</title> <link rel="stylesheet" href="./css/index.css">
-
Vue实现飞机大战小游戏
目录 使用 Vue 开发一个简略版的飞机大战小游戏 一.实现思路 二.所需知识点 三.实现步骤 使用 Vue 开发一个简略版的飞机大战小游戏 如题,假设你为了向更多访问你博客的人展示你的技术,你决定小试身手开发一个飞机大战小游戏.功能: 开始游戏前用户名必填,玩家可以发射子弹,敌军与行星随机出现,鼠标可操控玩家移动,敌军可发射子弹 一.实现思路 如题所述: 玩家可操控玩家飞机可发射子弹,敌军与行星随机生成: 这意味着我们需要一个单独的玩家飞机dom,以及敌军.行星与子弹 用 vue 循环生成的3
-
原生js实现贪食蛇小游戏的思路详解
先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>
-
java实战之飞机大战小游戏(源码加注释)
一.工程文件 二.Main.java 主函数,实现类 package ui; //主函数实现 public class Main { public static void main(String[] args) { //创建窗体 GameFrame frame = new GameFrame(); //创建面板 GamePanel panel = new GamePanel(frame); //调用开始游戏的方法启动游戏 panel.action(); //将面板加入到窗体中 frame.add
-
原生JS实现点击数字小游戏
原生JS实现点击数字小游戏,供大家参考,具体内容如下 最近公司在季度测试中出了一道很有趣的测试题,要求使用我们自己的黑科技–IVX来实现,感兴趣的朋友可以去了解哦,是真的黑科技,在这里我还是用原生JS来实现吧,题目是这样的: 实现一个点击数字的小游戏:依次点击容器中随机生成的数字元素,生成的数字元素会在5S后消失,你将凭借记忆点击按照数字升序依次点击生成的数字方可通过该关卡游戏. 话不多说直接看运行效果图: 上代码: <!DOCTYPE html> <html lang="en
-
基于Java语言在窗体上实现飞机大战小游戏的完整步骤
目录 小组项目 模块需求描述 总体开发思想 功能实现 1.登录与结束界面 2.播放音乐 3.子弹 运行测试 登陆界面 发射子弹 总结 小组项目 飞机大战:用 Java 语言在窗体上实现飞机大战小游戏,运行程序后,出现一个窗体,在窗体上用鼠标控制英雄机的移动,通过子弹打击敌机进行分数的计算,以及英雄机血量的计算等. 主要模块:登陆界面.音乐.子弹.敌机.英雄机.背景图.结束界面.BOSS 机.分数计算.血量计算. 负责模块:登陆界面.音乐.子弹.结束界面. 模块需求描述 登陆界面:运行程序后,弹出
-
C语言实现飞机大战小游戏完整代码
大一课设做的飞机大战,可以进行登入和注册,这个是利用单链表做的,源代码已经给出,这个是最基本的飞机大战模式,我设置了几个功能,比如排行榜之类的.排行榜是用结构体数组做的,已及冒泡排序,并且在文件里保存信息.比较简单. 这个是注册页面规范: 这个是登入页面: 游戏菜单: 飞机大战页面: 话不多说,直接上代码 以下是源代码 #include"stdio.h" #include"windows.h" //用于获取窗口的句柄与屏幕控制 #include"co