JS+html实现简单的飞机大战
摘要：通过原生的js+html实现简单的飞机大战小游戏效果，如图所示：
实现代码如下：
1.自己的飞机实现
飞机html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打飞机</title>
<style>
#bg {
position: relative;
width: 530px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background: url("game_images/bg.png") no-repeat 0 -9399px;
} #myPlane {
position: absolute;
width: 60px;
height: 60px;
background:url('game_images/my_air.gif') no-repeat;
top: 530px;
left: 235px;
overflow: visible;
}
.enemyPlane{
position: absolute;
width: 47px;
height: 72px;
background:url("game_images/d_j_1.gif") no-repeat;
top: 3px;
left: 240px;
overflow: visible;
}
.bullets{
position: absolute;
width: 9px;
height: 37px;
background:url("game_images/my_ari_1.gif") no-repeat;
}
</style>
</head>
<body>
<div id="bg">
<div id="myPlane"></div>
<!--<div class="enemyPlane"></div>--> </div>
<button onclick="bgStopMove()">停止</button>
<!--<button onclick="bgStartMove()">启动</button>--> </body>
<script type="text/javascript" src="EnemyPlane.js"></script>
<script type="text/javascript" src="bullets.js"></script>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
bgStartMove();
//敌机控制
var enemy_controller;
//背景图的相关设置：
var bg_coordinate = -100;
var bg_move_controller;
//用户飞机的相关设置
var move_speed = 11;
var myPlane_style_left = initialDOMPosition("myPlane","left");
var myPlane_style_top = initialDOMPosition("myPlane","top"); function bgMove() {
if (bg_coordinate > -1) {
bg_coordinate = -9399;
}
bg_coordinate += 1;
document.getElementById("bg").setAttribute("style", "background: red url('game_images/bg.png') no-repeat 0 " + bg_coordinate + "px;")
}
function bgStartMove() {
bg_move_controller = setInterval(bgMove, 30);
}
function bgStopMove() {
clearInterval(bg_move_controller);
}
function initialDOMPosition(DOMId,leftOrTop) {
var myDiv = document.getElementById(DOMId);
//获取指定DOM的style:
var myPlaneStyle = document.defaultView.getComputedStyle(myDiv, null);
var Position;
if (leftOrTop == "left") {
Position = myPlaneStyle.left;
}
else if (leftOrTop == "top") {
Position = myPlaneStyle.top;
}
Position = Position.substring(0, Position.length - 2);
Position = parseInt(Position);//将字符串转化为整型；
return Position;
}
function shoot(){
var planeLeft = initialDOMPosition("myPlane","left");
var planeTop = initialDOMPosition("myPlane","top");
var myBullet = new bullets(planeLeft,planeTop);
} document.onkeydown = function () {
var key = event.keyCode;
switch (key) {
case 32://发子弹
shoot();
break;
case 38://上
myPlaneMoveTop();
break;
case 40://下
myPlaneMoveDown();
break;
case 37://左
myPlaneMoveLeft();
break;
case 39://右
myPlayMoveRight();
break;
}
//方向键：上：38；下：40；左：37；右：39；
//空格：32 };
function myPlaneMoveDown(){
if(myPlane_style_top < 540){
myPlane_style_top += move_speed;
document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;");
}
}
function myPlaneMoveTop(){
if(myPlane_style_top > 3){
myPlane_style_top -= move_speed;
document.getElementById("myPlane").setAttribute("style","top:"+myPlane_style_top+"px;left:"+myPlane_style_left+"px;");
}
}
function myPlaneMoveLeft() {
//向左移动不能超过bg的边界；
if (myPlane_style_left > 1) {
myPlane_style_left -= move_speed;
document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;");
}
}
function myPlayMoveRight() {
//向左移动不能超过bg的边界；
//相对于图片左边的坐标，所以坐标是：530 - 60；
if (myPlane_style_left < 470) {
myPlane_style_left += move_speed;
document.getElementById("myPlane").setAttribute("style", "left:" + myPlane_style_left + "px;top:"+myPlane_style_top+"px;");
}
} //敌机的自动调用
enemy_controller = setInterval(springEnemy,3000);
function springEnemy(){
var count = parseInt((Math.random() * 10)/2);
for (var i=0;i<count;i++){
var enemy = new EnemyPlane();
}
}
</script>
</html> index控制HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><style type="text/css">
#bg{
background-color: blueviolet;width: 500px; height: 500px;border: red 1px solid; }
#m{border:rebeccapurple 1px solid;background-color: red;width: 50px; height: 50px;}
</style>
<div id="bg">
<div id="m"></div>
</div>
<div id="send"></div>
<input type="button" value="开始" onclick="startinterval()">
<input type="button" value="结束" onclick="closeinterval()"> <script type="text/javascript">
// document.onkeydown =function (){
// var ke=event.keyCode;
// alert(ke);
// }
var i=0;
var top_1=0;
var endsetinterval;
function getid()
{
// i+=1document.getElementById("send"
top_1+=5; document.getElementById("m").setAttribute("style","margin-top:"+top_1+"px;");
}
// setTimeout(getid,1000); function startinterval(){ endsetinterval=setInterval(getid,1000); };
function closeinterval(){
clearInterval(endsetinterval);
}
</script>
</body>
</html>
2.敌机的飞机 JS代码
/**
* Created by mac on 2016-07-22.
*/
/**
* 使用闭包函数法不能实现相关功能。
*/
(function (window) {
//enemyType敌机1（d_j_1.gif）：0，
//敌机3（d_j_3.gif）:1
var enemy_top;
var enemy_index;
var EnemyPlane2 = function (enemyType) {
enemy_index = enemyIndex;
this.init(enemyType);
enemy_top = this.initialEnemyTop();
this.startMove();
};
EnemyPlane2.prototype.initialEnemyTop = function () { var Postion = $("#bg #" + enemy_index).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
return Postion;
};
EnemyPlane2.prototype.init = function (enemyType) {
var enemy = "<div class='enemyPlane' id='" + enemy_index + "'></div>";
$("#bg").append(enemy);
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
var enemy_left = parseInt(Math.random() * (530 - 64));
switch (enemyType) {
case 0:
$("#bg #" + enemy_index).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
});
break;
case 1:
$("#bg #" + enemy_index).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
});
break
}
};
EnemyPlane2.prototype.startMove = function () {
var planeHeight = $("#bg #" + enemy_index).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
if ((enemy_top + planeHeight) > 598) {
$("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除 }
else {
//enemy_top += 3;
//$("#bg #"+enemy_index).css("top",enemy_top + "px");
$("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () {
$("#bg #" + enemy_index).hide();
$("#bg #" + enemy_index).remove();
});
}
};
window.EnemyPlane2 = EnemyPlane2;
})(window);
/**
* 通过类的思想，实现飞机的控制；
* @param enemyType
* @constructor
*/
function EnemyPlane() {
var enemy_top;
var enemy_type;
var enemyId;
init();
function initialEnemyTop() {
var Postion = $("#bg #e" + enemyId).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
return Postion;
} function init() {
//随机生成飞机类型；
enemy_type = (parseInt(Math.random() * 10) > 5) ? 0 : 1;
//随机生成飞机id
enemyId = parseInt(Math.random() * 10000);
//向#bg中添加飞机；
var enemy = "<div class='enemyPlane' id='e" + enemyId + "'></div>";
$("#bg").append(enemy);
//获取敌机的值；
enemy_top = initialEnemyTop();
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
//随机生成敌机开始时的Left值
var enemy_left = parseInt(Math.random() * (530 - 64));
//根据随机出来的飞机类型，对飞机属性进行设置；
switch (enemy_type) {
case 0:
$("#bg #e" + enemyId).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
});
break;
case 1:
$("#bg #e" + enemyId).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
});
break;
}
//敌机开始移动
startMove();
} //敌机开始移动
function startMove() {
//获取敌机的高度
var planeHeight = $("#bg #e" + enemyId).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
//获取敌机的宽度
var planeWidth = $("#bg #e" + enemyId).css("width");
planeWidth = planeWidth.substring(0, planeWidth.length - 2);
planeWidth = parseInt(planeWidth);
//随机获取敌机的Left（只有飞机走折线时采用）
var planeLeft = parseInt(Math.random() * (530 - planeWidth));
//随机敌机是走折线，还是走直线；
if (parseInt(Math.random() * 10) > 5) {
$("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () {
var planeHeight1 = $("#bg #e" + enemyId).css("top");
planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2);
planeHeight1 = parseInt(planeHeight1);
enemyDismiss();
});
}
else {
//走折线时，第一次位置变化
$("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear');
//第二次位置变化
$("#bg #e" + enemyId).animate({
"top": (600 - planeHeight) + "px",
"left": planeLeft + "px"
}, 1500, 'linear', function () {
//销毁敌机
enemyDismiss();
});
}
} //销毁敌机
function enemyDismiss() {
$("#bg #e" + enemyId).hide();
$("#bg #e" + enemyId).remove();
} function getEnemyPosition() {
var position_top = $("#bg #e" + enemyId).css("top");
var position_left = $("#bg #e" + enemyId).css("left");
var position = {"top": position_top, "left": position_left};
return position;
}
3.子弹实现 JS
/**
* Created by mac on 2016-07-22.
*/
/**
* 使用闭包函数法不能实现相关功能。
*/
(function (window) {
//enemyType敌机1（d_j_1.gif）：0，
//敌机3（d_j_3.gif）:1
var enemy_top;
var enemy_index;
var EnemyPlane2 = function (enemyType) {
enemy_index = enemyIndex;
this.init(enemyType);
enemy_top = this.initialEnemyTop();
this.startMove();
};
EnemyPlane2.prototype.initialEnemyTop = function () { var Postion = $("#bg #" + enemy_index).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
return Postion;
};
EnemyPlane2.prototype.init = function (enemyType) {
var enemy = "<div class='enemyPlane' id='" + enemy_index + "'></div>";
$("#bg").append(enemy);
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
var enemy_left = parseInt(Math.random() * (530 - 64));
switch (enemyType) {
case 0:
$("#bg #" + enemy_index).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
});
break;
case 1:
$("#bg #" + enemy_index).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
});
break
}
};
EnemyPlane2.prototype.startMove = function () {
var planeHeight = $("#bg #" + enemy_index).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
if ((enemy_top + planeHeight) > 598) {
$("#bg #" + enemy_index).remove();//与empty()的区别在于是否将本身删除。它们的子元素都会被删除 }
else {
//enemy_top += 3;
//$("#bg #"+enemy_index).css("top",enemy_top + "px");
$("#bg #" + enemy_index).animate({"top": (600 - planeHeight) + "px"}, 4000, function () {
$("#bg #" + enemy_index).hide();
$("#bg #" + enemy_index).remove();
});
}
};
window.EnemyPlane2 = EnemyPlane2;
})(window);
/**
* 通过类的思想，实现飞机的控制；
* @param enemyType
* @constructor
*/
function EnemyPlane() {
var enemy_top;
var enemy_type;
var enemyId;
init();
function initialEnemyTop() {
var Postion = $("#bg #e" + enemyId).css("top");
Postion = Postion.substring(0, Postion.length - 2);
Postion = parseInt(Postion);
return Postion;
} function init() {
//随机生成飞机类型；
enemy_type = (parseInt(Math.random() * 10) > 5) ? 0 : 1;
//随机生成飞机id
enemyId = parseInt(Math.random() * 10000);
//向#bg中添加飞机；
var enemy = "<div class='enemyPlane' id='e" + enemyId + "'></div>";
$("#bg").append(enemy);
//获取敌机的值；
enemy_top = initialEnemyTop();
//Math.random();//生成一个0到1的随机数；
//parseInt();//取整
//$("#bg div:eq(0)").css("width"="72px");单个参数的用法
//随机生成敌机开始时的Left值
var enemy_left = parseInt(Math.random() * (530 - 64));
//根据随机出来的飞机类型，对飞机属性进行设置；
switch (enemy_type) {
case 0:
$("#bg #e" + enemyId).css({
"width": "47px",
"height": "72px",
"background": "url('./game_images/d_j_1.gif') no-repeat",
"left": enemy_left + "px"
});
break;
case 1:
$("#bg #e" + enemyId).css({
"width": "64px",
"height": "56px",
"background": "url('./game_images/d_j_3.gif') no-repeat",
"left": enemy_left + "px"
});
break;
}
//敌机开始移动
startMove();
} //敌机开始移动
function startMove() {
//获取敌机的高度
var planeHeight = $("#bg #e" + enemyId).css("height");
planeHeight = planeHeight.substring(0, planeHeight.length - 2);
planeHeight = parseInt(planeHeight);
//获取敌机的宽度
var planeWidth = $("#bg #e" + enemyId).css("width");
planeWidth = planeWidth.substring(0, planeWidth.length - 2);
planeWidth = parseInt(planeWidth);
//随机获取敌机的Left（只有飞机走折线时采用）
var planeLeft = parseInt(Math.random() * (530 - planeWidth));
//随机敌机是走折线，还是走直线；
if (parseInt(Math.random() * 10) > 5) {
$("#bg #e" + enemyId).animate({"top": (600 - planeHeight) + "px"}, 3000, function () {
var planeHeight1 = $("#bg #e" + enemyId).css("top");
planeHeight1 = planeHeight1.substring(0, planeHeight1.length - 2);
planeHeight1 = parseInt(planeHeight1);
enemyDismiss();
});
}
else {
//走折线时，第一次位置变化
$("#bg #e" + enemyId).animate({"top": (300 - planeHeight) + "px", "left": "1px"}, 1500, 'linear');
//第二次位置变化
$("#bg #e" + enemyId).animate({
"top": (600 - planeHeight) + "px",
"left": planeLeft + "px"
}, 1500, 'linear', function () {
//销毁敌机
enemyDismiss();
});
}
} //销毁敌机
function enemyDismiss() {
$("#bg #e" + enemyId).hide();
$("#bg #e" + enemyId).remove();
} function getEnemyPosition() {
var position_top = $("#bg #e" + enemyId).css("top");
var position_left = $("#bg #e" + enemyId).css("left");
var position = {"top": position_top, "left": position_left};
return position;
}
}
JS+html实现简单的飞机大战的更多相关文章
- 微信小游戏 demo 飞机大战 代码分析 （三）(spirit.js, animation.js)
微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...
- MFC实现简单飞机大战（含游戏声音）
1 实验内容 本实验主要是实现简单的飞机大战游戏,包含游戏声音.碰撞后爆炸效果,有大小敌机等.所用到的知识点如下: 1.贴图技术 2.飞机类.子弹类实现 3.位图移动 4.碰撞判断,实现爆炸效果 5. ...
- 微信小游戏 demo 飞机大战 代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...
- 微信小游戏 demo 飞机大战 代码分析 （二）(databus.js)
微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 微信小游戏 demo 飞机大战 代码分析 （一）(game.js, main.js)
微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 用Javascript模拟微信飞机大战游戏
最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...
- 飞机大战编写以及Java的面向对象总结
面向对象课程完结即可编写一个简单的飞机大战程序.我觉得我需要总结一下 飞机大战中类的设计: 父类:FlyingObject(抽象类) 接口:Award .Enemy 子类:Hero.Bullet.Ai ...
- android:怎样用一天时间，写出“飞机大战”这种游戏！（无框架-SurfaceView绘制）
序言作为一个android开发人员,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的. 体验地址:http://www.wandoujia. ...
- js 飞机大战
完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...
随机推荐
- sqlserver查询编辑器编辑数据
1.我想编辑这几行的sortid,方式可以直接写sql,但是还有一种更简洁的方法,如下: 2.用这种方式可以直接修改,比较方便. 3.总结:要做一件事情,可能有很多种方法.而且很有可能有简单的方法,如 ...
- [Google Code Jam (Round 1A 2008) ] A. Minimum Scalar Product
Problem A. Minimum Scalar Product This contest is open for practice. You can try every problem as ...
- java.lang.NoClassDefFoundError: org/apache/commons/lang/StringUtils
java.lang.NoClassDefFoundError: org/apache/commons/lang/StringUtils Caused by: java.lang.ClassNotFou ...
- QMessageBox 中的 OK 按钮改为中文“确定”
有很多资料用于将 QMessageBox 的 OK 改为中文.但大多很麻烦.本文提供一个简便方法,用于定制 QMessageBox 的按钮,包括将其翻译成中文显示. QMessageBox 对其 ...
- linux环境c++开发：ubuntu12.04使用llvm3.4.2
什么是 clang/llvm/libc++［1］ clang 是最近几年(在大财主苹果的支持下)发展得非常好的 C 家族语言 (包括C/C++/Obj-C/Obj-C++) 编译器前端,所谓前端,就是 ...
- heritrix 3.2.0 -- 环境搭建
heritrix作为一个比较经典的开源爬虫,写这篇文章目的是因为,3.X之后的heritrix的介绍以及配置的文章比较少了. heritrix 3.x 以后使用maven 2配置jar包引用,但是总是 ...
- Find Median from Data Stream 解答
Question Median is the middle value in an ordered integer list. If the size of the list is even, the ...
- HDU1394 Minimum Inversion Number（线段树OR归并排序）
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- mysqldump命令详解（转载）
1.简介 mysqldump为MySQL逻辑备份工具,产生一系列SQL语句,之后重新执行以产生备份的库.表及数据.也可产生CSV.XML等格式的数据.适用于各类引擎的表. 运行mysqldump需一定 ...
- 【转】Android中自动连接到指定SSID的Wi-Fi
最近在做一个项目,其中涉及到一块“自动连接已存在的wifi热点”的功能,在网上查阅了大量资料,五花八门,但其中一些说的很简单,即不能实现傻瓜式的拿来就用,有些说的很详细,但其中不乏些许错误造成功能无法 ...