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{ ...
随机推荐
- HDU 4010 Query on The Trees(动态树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4010 题意:一棵树,四种操作: (1)若x和y不在一棵树上,将x和y连边: (2)若x和y在一棵树上, ...
- inux关于readlink函数获取运行路径的小程序
inux关于readlink函数获取运行路径的小程序 相关函数: stat, lstat, symlink 表头文件: #include <unistd.h> 定义函数:int re ...
- Android之字符串的拆分-split
字符串的拆分可以利用android的 split 来简单实现 具体看如下代码: String s3 = "Real-How-To"; String [] temp = null; ...
- JQuery 动画之 广告
html页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- Apache、Tomcat、JBoss、WebLogic的区别与关系
Weblogic: 是一个企业级的应用服务器,其中包括j2ee中的各类应用如jsp,servlet,ejb等 Tomcat: 是一个初级的应用服务器,支持sp和servlet,不支持EJB,如需E ...
- 多线程下不反复读取SQL Server 表的数据
在进行一些如发送短信.邮件的业务时,我们常常会使用一个表来存储待发送的数据,由后台多个线程不断的从表中读取待发送的数据进行发送.发送完毕后再将数据转移到历史表中,这样保证待发送表的数据普通情况下不会太 ...
- （3）选择元素——（5）为项目列表加样式（Styling list-item levels）
Let's suppose that we want the top-level items, and only the top-level items, to be arranged horizon ...
- 关闭SQL Server 数据库所有使用连接
使用存储过程终止:在查询分析器下创建终止数据库所有接连的存储过程,通过调用该存储过程可以关闭所有使用该数据库的连接操作.--创建终止使用数据库下所有进程的存储过程,参数为数据库名称use maste ...
- POJ 1469 ZOJ1140 二分匹配裸题
很裸,左点阵n,右点阵m 问最大匹配是否为n #include <cstdio> #include <cstring> #include <vector> usin ...
- Linux :: vi E212: Can't open file for writing
Linux :: vi E212: Can't open file for writing sysct1.conf 可能无写权限!查看方法:ls -lh /etc/sysct1.conf如果没有,则c ...