JavaScript原生编写《飞机大战坦克》游戏完整实例
先来看看开始的界面图
实现思路：
1.打开页面，背景开始走动；
2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；
3.当敌人碰到子弹，敌人消失；
4.当敌人和飞机相遇，飞机死亡，结束游戏；
html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link rel="stylesheet" type="text/css" href="飞机大战.css"> </head> <body> <div id="mainScreen"> <!-- 背景图片 --> <div id="bgImg1" class="bg"></div> <div id="bgImg2" class="bg"></div> <!-- 飞机 --> <div id="airplane"></div> <!-- 开始按钮 --> <div id="startMenu"> <a href="#" id="start">Start</a> </div> <!-- 重新开始按钮 --> <div id="restartMenu"> <a href="#" id="restart">Game Over!<br/>重新开始</a> </div> <!-- 敌人 --> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <!-- 子弹 --> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> </div> <script type="text/javascript" src="sunckBase.js"></script> <script type="text/javascript" src="飞机大战.js"></script> </body> </html>
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;
}
进入页面时，背景开始动
//给背景设置定时器，让背景不停的动，形成动感
var bgTimer = setInterval(bgRun, 10);
function bgRun() {
jsBg1.style.top = jsBg1.offsetTop + 1 + "px";
jsBg2.style.top = jsBg2.offsetTop + 1 + "px";
if (jsBg1.offsetTop >= 768) {
jsBg1.style.top = "-768px";
} else {
if (jsBg2.offsetTop >= 768) {
jsBg2.style.top = "-768px";
}
}
}
点击开始，进入游戏
游戏中
注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。
var jsStartBox=document.getElementById("startMenu")
jsStart.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 findEnemyTimer = 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;
}
}
}
}
}
打中怪物
用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失
var perishEnemyTimer = 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;
}
}
}
}
}
}
死亡检测
游戏结束
用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。
注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。
//死亡检测
var dieTimer = setInterval(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;
}
}
}
}
}
上述两步中用到的检测两者是否碰撞的函数
//死亡检测的函数
function pzjcFunc(obj1, 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;
}
点击重新开始之后刷新页面
var jsRestart=document.getElementById("restart");
jsRestart.onclick=function(){
jsStop.style.display="none";
window.location.reload();//刷新页面
}
好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如，页面之外的空间的运用；比如，检测碰撞。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。
相关推荐
-
纯javascript模仿微信打飞机小游戏
七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示 源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov
-
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
源码下载 源码我已经上传到 CSDN 了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873. 源码使用 VS 2013 +TypeScript 1.4 进行开发.打开后,显示如下图: JsTankGame 1.0:老的使用 JS 编写的坦克游戏. JsTankGame 2.0:新的使用 TS 直接翻译过来的游戏. JsTankGame:在 2.0 的基础上,对类型进行了重构后的新游戏. 重构步骤 由于老的 JS 游戏是采用 MS
-
javascript 模拟坦克大战游戏(html5版)附源码下载
一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码 代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li
-
JavaScript 小型打飞机游戏实现原理说明
玩法说明:上下左右控制移动,空格发弹. 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输.... 演示代码:http://demo.jb51.net/js/FlyBeat/index.html 游戏目前的功能还是比较简单的....貌似就贴个源码不太好,所以这次还是写写思路... 游戏主要分为4个js文件,4个js文件分别包含4个类. 1:飞机类---Flyer 复制代码 代码如下: //飞机对应的dom元素 this.dom
-
javascript制作坦克大战全纪录（2）
2. 完善地图 我们的地图中有空地,墙,钢,草丛,水,总部等障碍物. 我们可以把这些全部设计为对象. 2.1 创建障碍物对象群 对象群保存各种地图上的对象,我们通过对象的属性来判断对象是否可以被穿过或被攻击. Barrier.js: 复制代码 代码如下: // 障碍物基类对象,继承自TankObject Barrier = function () { this.DefenVal = 1; // 防御力 this.CanBeAttacked = true; //
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
-
javascript 制作坦克大战游戏初步 图片与代码
学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n
-
JavaScript制作简易的微信打飞机
简单的用JavaScript模拟微信打飞机,部分功能还不完善,刚开始写,还有很多不足,还望大家多多指出. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv
-
javascript制作坦克大战全纪录（1）
PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.本身没有太难的东西,这个案例将js面向对象用的比较好,可以作为js面向对象的入门教程. 1. 创建基本对象,实现坦克简单的移动 1.1 如何在地图中绘制画布? 考虑到浏览器兼容的问题,我们用操作dom的方式来实现游戏对象的绘制和刷新.我们如何存储我们的地图呢? 我们应该把地图用一个二维数组来保存, js中没有二维数组,但是可以通过在一维数组从存储数组来实现. 1.2 代码实现 我们将画布设计为 13 * 13 的一个二维