飞机大战游戏

最新推荐文章于 2021-03-31 19:14:52 发布

lusizhifei

最新推荐文章于 2021-03-31 19:14:52 发布

阅读量288

点赞数 1

分类专栏： js 文章标签：打飞机飞机大战

本文链接：https://blog.csdn.net/lusizhifei/article/details/61200566

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<style type="text/css">
* {margin: 0;padding: 0;}
#container {
width: 320px;
height: 568px;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}

#start {
width: 320px;
height: 568px;
background: url(images/start_bg.png);
}

#main {
width: 320px;
height: 568px;
background: url(images/bg.png);
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="start"></div>
<div id="main"></div>
</div>

<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
function random(min, max) {
return Math.floor(Math.random() * (max + 1 - min)) + min;
}

// 游戏角色基本构造函数
/*function Role(x, y, width, height, imgSrc, container) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.element = null;
this.imgSrc = imgSrc;
this.container = container;
}*/
function Role(options) {
this.x = options.x;
this.y = options.y;
this.width = options.width;
this.height = options.height;
this.element = null;
this.imgSrc = options.imgSrc;
this.container = options.container;
}

// 自己的飞机
function Self(options) {
Role.call(this, options);
this.hp = options.hp;

// 调用初始化方法，初始设置DOM元素
this.init();
}

// 实现自己飞机DOM元素的初始化
Self.prototype.init = function(){
var _img = this.element = document.createElement("img");
_img.src = this.imgSrc;
this.container.appendChild(_img);
// 设置DOM元素的CSS样式
css(_img, {
position : "absolute",
top : this.y + "px",
left : this.x + "px",
width : this.width + "px",
height : this.height + "px"
});
}

// 敌机
function Enemy(options) {
Role.call(this, options);
this.hp = options.hp;
this.score = options.score;
this.speed = options.speed;

this.init();
}

Enemy.prototype.init = function () {
var _img = this.element = document.createElement("img");
_img.src = this.imgSrc;
this.container.appendChild(_img);
// 设置DOM元素的CSS样式
css(_img, {
position : "absolute",
top : this.y + "px",
left : this.x + "px",
width : this.width + "px",
height : this.height + "px"
});
}

Enemy.prototype.move = function(){
this.element.style.top = this.element.offsetTop + this.speed + "px";
}

// 子弹
function Bullet(options) {
Role.call(this, options);
this.speed = options.speed;

this.init();
}

// 初始化子弹的 DOM 元素
Bullet.prototype.init = function () {
var _img = this.element = document.createElement("img");
_img.src = this.imgSrc;
this.container.appendChild(_img);
// 设置DOM元素的CSS样式
css(_img, {
position : "absolute",
top : this.y + "px",
left : this.x + "px",
width : this.width + "px",
height : this.height + "px"
});
}

// 子弹移动
Bullet.prototype.move = function(){
this.element.style.top = this.element.offsetTop - this.speed + "px";
}

/* 变量 */
var _self = null; // 自己的飞机对象

// 点击开始界面，启动游戏
on($("#start"), "click", function(){
/* 界面切换 */
$("#start").style.display = "none";
$("#main").style.display = "block";

/* 生成自己的飞机对象 */
_self = new Self({
x : 100,
y : 300,
width : 66,
height : 80,
imgSrc : "images/self.gif",
container : $("#main")
});

/* 定时任务 */
var bullets = [], // 使用数组存储所生成的子弹
enemies = [], // 使用数组保存所有生成的敌机对象
count = 0; // 计数
var timer = setInterval(function(){
count++;

/* 生成与移动子弹 */
if (count % 5 === 0){
// 生成子弹
bullets.push(new Bullet({
x : _self.x + _self.width / 2,
y : _self.y,
width : 6,
height : 14,
imgSrc : "images/bullet.png",
container : $("#main"),
speed : 5
}));
}
// 所有子弹运动
for (var i = 0, len = bullets.length; i < len; i++) {
bullets[i].move();
// 当子弹超出主界面范围，则移除
if (bullets[i].element.offsetTop <= 0) {
bullets[i].container.removeChild(bullets[i].element);
bullets.splice(i, 1);
len--;
}
}

/* 生成敌机 */
if (count % 20 === 0) {
enemies.push(new Enemy({
x : random(20, 280),
y : -30,
width : 34,
height : 24,
imgSrc : "images/small_fly.png",
container : $("#main"),
speed : random(2, 3)
}));
}
// 所有飞机运动
for (var i = 0, len = enemies.length; i < len; i++) {
enemies[i].move();
// 当飞机从下方运动超出主界面，移除
if (enemies[i].element.offsetTop > enemies[i].container.offsetHeight) {
enemies[i].container.removeChild(enemies[i].element);
enemies.splice(i, 1);
len--;
}
}

/* 碰撞检测 */
// 子弹与敌机碰撞
for (var i = 0, l = bullets.length; i < l; i++) {
var _bullet = bullets[i].element;
for (var j = 0, len = enemies.length; j < len; j++) {
var _enemy = enemies[j].element;
if (!(_enemy.offsetTop + _enemy.offsetHeight < _bullet.offsetTop
|| _enemy.offsetLeft + _enemy.offsetWidth < _bullet.offsetLeft
|| _enemy.offsetTop > _bullet.offsetTop + _bullet.offsetHeight
|| _enemy.offsetLeft > _bullet.offsetLeft + _bullet.offsetWidth)) {
// 碰撞，让子弹和飞机都消失
enemies[j].container.removeChild(_enemy);
enemies.splice(j, 1);
bullets[i].container.removeChild(_bullet);
bullets.splice(i, 1);
l--;
break;
}
}
}

// 自己飞机与敌机碰撞
// ...........
}, 1000 / 60);
});

// 自己飞机移动
function selfPlanMove(e){
e = e || event;

// 设置飞机DOM元素在文档中的绝对位置
offset(_self.element, {
top : e.pageY - _self.height / 2,
left : e.pageX - _self.width / 2
});

// 限定飞机的移动范围
var _left = _self.element.offsetLeft,
_top = _self.element.offsetTop;
if (_left < 0)
_left = 0;
else if (_left > _self.container.offsetWidth - _self.width)
_left = _self.container.offsetWidth - _self.width;
if (_top < 0)
_top = 0;
else if (_top > _self.container.offsetHeight - _self.height)
_top = _self.container.offsetHeight - _self.height;
// 重新设置飞机DOM元素定位
css(_self.element, {
top : _top + "px",
left : _left + "px"
});

// 重新修改飞机坐标
_self.x = _left;
_self.y = _top;
}

// 鼠标指针进入游戏主界面，让飞机跟随鼠标指针移动
on($("#main"), "mouseenter", function(){
on($("#main"), "mousemove", selfPlanMove);
});

// 鼠标指针移出游戏主界面，让飞机跟随鼠标指针移动的事件取消
on($("#main"), "mouseleave", function(){
off($("#main"), "mousemove", selfPlanMove);
});
</script>

</body>
</html>

lusizhifei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
飞机大战游戏

飞机大战* {margin: 0;padding: 0;}#container {width: 320px;height: 568px;position: absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto;overflow: hidden;}#start {width:
复制链接

扫一扫