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{ ...
随机推荐
- AnimateWindow
WINDOWS提供了一个很有意思的函数:AnimateWindow.之前我想实现像MSN,QQ这些收到邮件的时候动画方式,从地下升上来的显示一个窗口,感觉很麻烦,自己去写代码,效果很不理想,今天无意中 ...
- HTML5学习笔记简明版 目录索引
http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html
- C# WEB API ApiController 修改response header contentType
var res = Request.CreateResponse(HttpStatusCode.OK, file); res.Content.Headers.ContentType = new Med ...
- Hdu4742-Pinball Game 3D(cdq分治+树状数组)
Problem Description RD is a smart boy and excel in pinball game. However, playing common 2D pinball ...
- [Linux] killall 、kill 、pkill 命令详解
killall 命令 Linux系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进程,如果要找到我们需要杀 ...
- WEB程序会话管理--HttpSession和Cookie
WEB应用的会话管理的原理: 由于WEB应用的请求和响应是基于HTTP的,而HTTP由属于无状态的通信协议,只能记录本次请求的信息,因此服务器不会记住这一次的请求和下一次请求的关系.所以会话管理的原理 ...
- 【转】网络视频监控P2P解决方案
一．摘要 本文分析了日益增长的民用级别家庭和个人网络视频监控市场的需求特点,并给出了一种经济可行易于大规模部署的P2P解决方案. 由于篇幅有限,本文只给出了方案的思路,未对更深入的技术细节做详细的论述 ...
- WebFrom模拟MVC
如: aspx前台 这样写生成页面时不会产生新的html标签,用控件则会产生新的html标签 <h1><%= title %></h1> <p> ...
- redis知识
http://www.cnblogs.com/moon521/p/5301895.html 菜鸟教程:http://www.runoob.com/redis/redis-tutorial.html
- Cocoa Pods的安装
CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.幸运的是OS X系统默认已经可以运行Ruby了,因此我们只需执行以下命令: sudo gem install -n /usr/ ...