JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript原生编写《飞机大战坦克》游戏完整实例大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

先来看看开始的界面图

JavaScript原生编写《飞机大战坦克》游戏完整实例

实现思路:

1.打开页面,背景开始走动;

2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方;

3.当敌人碰到子弹,敌人消失;

4.当敌人和飞机相遇,飞机死亡,结束游戏;

html页面

飞机大战
重新开始

<script type="text/javascript" src="sunckBase.js">
<script type="text/javascript" src="飞机大战.js">

css样式

{ margin: 0; padding: 0; font-family: "微软雅黑"; } #mainScreen{ width: 512px; height: 768px; margin:0 auto; position: relative; overflow: hidden; } .bg{ width: 512px; height:768px; position: absolute; BACkground: url(bg.jpg); } #bgImg2{ top:-768px; }

airplane{

width: 109px;
height: 82px;
position: absolute;
BACkground: url(hero.png);
left: 215px;
top: 668px;
}

.enemy{
position: absolute;
width: 30px;
height: 30px;
left: -100px;
top: 0px;

BACkground: url(enemy.png);
BACkground-size: 30px 30px;
}

.bullet{
position: absolute;
width: 5px;
height: 10px;
left: -100px;
top: -100px;
BACkground: url(bullet.png);
BACkground-size: 5px 10px;
}

startMenu,#restartMenu{

position: absolute;
width: 512px;
text-align: center;
left: 0;
top: 300px;
}

start,#restart{

line-height:50px;
font-size:30px;
font-weight:bold;
color:#F00;
display:block;
text-decoration:none;
}

restartMenu{

display: none;
}

进入页面时,背景开始动

= 768) { jsBg1.style.top = "-768px"; } else { if (jsBg2.offsetTop >= 768) { jsBg2.style.top = "-768px"; } } }

点击开始,进入游戏

JavaScript原生编写《飞机大战坦克》游戏完整实例

游戏中

注:其实子弹和敌人的标签没有几个,但是我们使用定时器,开始之前,现将表现都放在屏幕外,进入游戏需要时候再改变标签定位,将其放入到页面中。

.onclick = function startGame(){ jsStartBox.style.display="none"; var baseX = 0; var baseY = 0; var moveX = 0; var moveY = 0; jsAirplane.onmousedown = function(E) { var evt = e || window.event; baseX = evt.pageX; baseY = evt.pageY; jsDivBox.onmousemove = function(v) { var vt = v || window.event; moveX = vt.pageX - baseX; baseX = vt.pageX; moveY = vt.pageY - baseY; baseY = vt.pageY; jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px"; jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px"; }; }; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } //找到可用的子弹 var findBulletTimer = seTinterval(findBullet,300); function findBullet() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == falsE) { jsBullets[i]["isShow"] = true; //将子弹移动到飞机头 jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px"; jsBullets[i].style.top = jsAirplane.offsetTop + "px"; break; } } } // //让子弹飞 var bulletFlyTimer = seTinterval(bulletFlay,100); function bulletFlay() { for (var j = 0; j < jsBullets.length; j++) { if (jsBullets[j]["isShow"] == true) { if (jsBullets[j].offsetTop > -20) { jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px"; } else { jsBullets[j].style.left = "-100px"; jsBullets[j].style.top = "-100px"; jsBullets[j]["isShow"] = false; } } } }

//找到可用敌人
var findEne@R_819_6674@r = seTinterval(findEnemy,500);
function findEnemy(){
//找到一个没有在屏幕中的敌人
for (var i = 0; i < jsEnemys.length; i++) {
if (jsEnemys[i]["isShow"] == falsE) {
//标记敌人已经使用
jsEnemys[i]["isShow"] = true;
//将敌人移动到屏幕
var left = randomNum(0,482);
jsEnemys[i].style.left = left + "px";
jsEnemys[i].style.top = 0 + "px";
break;
}
}
}
// //让敌人下落
var enemyLandTimer = seTinterval(enemyLand,100);
function enemyLand() {
for (var j = 0; j < jsEnemys.length; j++) {
if (jsEnemys[j]["isShow"] == truE) {
var a = randomNum(4,20);
if (jsEnemys[j].offsetTop <= 768) {
jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px";
} else {
jsEnemys[j].style.left = "-100px";
jsEnemys[j].style.top = "0px";
jsEnemys[j]["isShow"] = false;
}
}
}
}
}

打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则,如果相撞,那么怪物消失

674@r = seTinterval(perishEnemy,50); function perishEnemy() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == truE) { for (var j = 0; j < jsEnemys.length; j++) { if (jsEnemys[j]["isShow"] == truE) { var ret = pzjcFunc(jsBullets[i],jsEnemys[j]); if (ret) { jsBullets[i].style.left = "-100px"; jsBullets[i].style.top = "-100px"; jsBullets[i]["isShow"] = false;

jsEnemys[j].style.left = "-100px";
jsEnemys[j].style.top = "-100px";
jsEnemys[j]["isShow"] = false;
}
}
}
}
}
}

死亡检测

JavaScript原生编写《飞机大战坦克》游戏完整实例

游戏结束

用页面上存在每一个敌人和飞机的定位进行检测,如果两者相遇,那么结束游戏。

注:检测时虑取反,坦克在飞机上面,在飞机下面,在飞机左边,在飞机右边是没有碰到的时候,那么我们取反就是说明两者已经相遇了。

Tinterval(die,50); var jsStop = document.getElementById("restartMenu") function die() { for (var i = 0; i < jsEnemys.length; i++) { if (jsEnemys[i]["isShow"] == truE) { var isDie = pzjcFunc(jsAirplane,jsEnemys[i]); if (isDiE) { jsStop.style.display="block"; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } } } } }

上述两步中用到的检测两者是否碰撞的函数

obj2){ var obj1Left = obj1.offsetLeft; var obj1Width = obj1Left + obj1.offsetWidth; var obj1Top = obj1.offsetTop; var obj1Height = obj1Top + obj1.offsetHeight;

var obj2Left = obj2.offsetLeft;
var obj2Width = obj2Left + obj2.offsetWidth;
var obj2Top = obj2.offsetTop;
var obj2Height = obj2Top + obj2.offsetHeight;

if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
return true;
}
return false;
}

点击重新开始之后刷新页面

); jsRestart.onclick=function(){ jsStop.style.display="none"; window.LOCATIOn.reload();//刷新页面 }

好的,现在我们的游戏就可以玩了,这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如,页面之外的空间的运用;比如,检测碰撞。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

大佬总结

以上是大佬教程为你收集整理的JavaScript原生编写《飞机大战坦克》游戏完整实例全部内容,希望文章能够帮你解决JavaScript原生编写《飞机大战坦克》游戏完整实例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: