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{ ...
随机推荐
- Android新建项目手动添加Layout布局
前言: 这是看<第一行代码>学习到的第一章,之前使用Eclipse创建Android项目都是自动生成MainActivity.java文件和layout文件夹下的activity_main ...
- 提交 应用ID 证书
https://developer.apple.com/account/ios/profile/profileCreate.action?formID=960914622
- PHP中$_GET['name']与$_POST['name']变量直接用变量名$name的php配置
php中,可以直接使用参数名称作为变量来接收get或post的传参,条件是php.ini中register_global设置成On 另外一种方法: if(!ini_get('register_glob ...
- poj2505-A multplication game
题意:两个人轮流用2~9来乘n,使n不断扩大,n开始为1.当给一个固定值k,谁先使n超过k谁赢. 分析:能到达必败态的状态为必胜态,只能到达必胜态的状态为必败态.对于给定的k,n>=k时为必败态 ...
- QDialog 添加最大化、最小化按钮和关闭按钮，并且要正常显示
在使用QDialog时,默认情况下只有“这是什么”和“关闭”按钮(不知道为什么QT要这么做),但是我们习惯有最大化和最小化按钮.本文介绍如何在该模式下如何设置. 新建一个QDialog工程,然后打开D ...
- visual studio 使用正则查找或替换示例
visual studio 使用正则查找或替换示例 注意哟:使用之前应做好备份 visual studio 2015: 多行替换 (.*)point\ =(.*);\r\n.+this.([A-Za- ...
- hidden symbol ... is referenced by DSO
在Linux上编译Qt的时候configure出来的Makefile传递给g++的参数visiblility=hidden,然后就会调用Qt库所使用的第三方库libpng库源代码函数声明添加上__at ...
- QWidget: Must construct a QApplication before a QPaintDevice的问题
卧槽,无意中编译自己基于Qt创建的Debug工程的时候运行时发生了标题中的错误,原来是把Qt Release的库也放到additional dependencies里面了,同时链接了Debug和Rel ...
- highchart 实现mrtg
最近需要对流量图进行重构, <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- 【czy系列赛】czy的后宫4 && bzoj1925 [Sdoi2010]地精部落
[问题描述] czy有很多妹子,妹子虽然数量很多,但是质量不容乐观,她们的美丽值全部为负数(喜闻乐见). czy每天都要带N个妹子到机房,她们都有一个独一无二的美丽值,美丽值为-1到-N之间的整数.他 ...