javascript游戲之打飛機、接禮物
來源：程序員人生 發布時間：2015-08-24 08:52:50 閱讀次數：3306次
1個簡單的JS游戲，需要jquery插件，是根據Floyd的打飛機游戲進行了1些簡化和修改，界面比較丑陋，添加些素材就好看多啦，比如加個背景圖片，子彈換成各種礼物圖片，黃色板磚換成礼物籃等等，編碼閑暇之余用來放松還是不錯的
。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>飛機接子彈</title>
<style>
#panel{height:400px;width:300px;background:Black;position:absolute;left:100px;top:100px;overflow:hidden;}
#panel div{position:absolute;left:0;color:White;font-size:12px;}
#panel .time{top:0;}
#panel .canBigCount{top:12px;}
#panel .score{top:24px;}
</style>
</head>
<body>
<br />
<div style="color:Red;">游戲說明：方向鍵左右控制移動，空格為變大5秒，吃到白色加100分，紅色扣100分，藍色增加1次變大</div>
<div><input type="button" value="開始" onclick="GameStart()" /></div>
<div id="panel" tabindex="0">
<div class="time">時間：<span id="time">60</span></div>
<div class="canBigCount">可變大次數：<span id="canBigCount">1</span></div>
<div class="score">分數：<span id="score">0</span></div>
</div>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>
var Fly = function () {
//板磚dom元素
this.dom = null;
//板磚信息
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
//移動狀態
this.isMove = false;
//setInterval id
this.moveId = null;
}
Fly.prototype = {
//移動位移
movepx: 10,
//移動位置更新頻率
moveSpeed: 30,
//初始化板磚位置
init: function (gameWidth, gameHeight) {
this.dom = $('#fly');
this.width = this.dom.width();
this.height = this.dom.height();
this.left = (gameWidth - this.width) / 2;
this.top = gameHeight - this.height;
this.update();
},
//更新位置
update: function () {
this.dom.css({ 'left': this.left, 'top': this.top });
},
//鍵盤按下事件
keydown: function (e, gameWidth) {
switch (e.keyCode) {
//方向左
case 37: {
if (!this.isMove) {
this.isMove = true;
this.move('left');
}
break;
};
//方向右
case 39: {
if (!this.isMove) {
this.isMove = true;
this.move('right', gameWidth);
}
break;
};
}
},
//鍵盤釋放事件
keyup: function (e) {
if (e.keyCode == 37 || e.keyCode == 39) {
this.stop();
}
},
//板磚移動
move: function (dir, gameWidth) {
_this = this;
if (dir == 'left') {
this.moveId = setInterval(function () {
_this.left = _this.left - _this.movepx <= 0 ? 0 : _this.left - _this.movepx;
_this.update();
}, this.moveSpeed);
}
else {
this.moveId = setInterval(function () {
_this.left = _this.left + _this.movepx >= gameWidth - _this.width ? gameWidth - _this.width : _this.left + _this.movepx;
_this.update();
}, this.moveSpeed);
}
},
stop: function () {
this.isMove = false;
clearInterval(this.moveId);
}
}
//子彈類,type為類型
var Bullet = function (type) {
//子彈dom元素
this.dom = null;
//子彈信息
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
this.type = type;
this.create();
}
Bullet.prototype = {
//子彈類型與色彩映照表
bullettype: {
"good": "White",
"bad": "Blue",
"heart": "Red"
},
//每次移動位移
movepx: 10,
//子彈速度
movespeed: 50,
//創建子彈dom
create: function () {
this.width = 5;
this.height = 5;
this.dom = $('<div style="position:absolute;width:' + this.width + 'px;height:' + this.height + 'px;overflow:hidden;background:' + this.bullettype[this.type] + ';"></div>');
},
//初始化子彈位置
initPosition: function (gameWidth) {
this.left = parseInt(Math.random() * gameWidth + 1, 10);
this.dom.css('left', this.left);
},
//子彈動畫,height為游戲背景高度
animation: function (height) {
var _this = this;
//向下移動函數
var downmove = function () {
//更新位置
_this.top = _this.top + _this.movepx;
_this.update();
//判斷子彈位置和是不是擊中板磚
if (_this.top < height && !_this.isBeatFly()) {
setTimeout(downmove, _this.movespeed);
}
else {
//動畫結束觸發事件
_this.onEnd();
}
}
downmove();
},
//更新位置
update: function () {
this.dom.css({ 'left': this.left, 'top': this.top });
},
//判斷子彈擊中板磚否
checkBeatFly: function (fly) {
if (this.left >= fly.left && this.left + this.width <= fly.left + fly.width) {
if (this.top + this.height >= fly.top && this.top + this.height <= fly.top + fly.height) {
return true;
}
}
return false;
},
//動畫結束觸發事件，外部覆蓋
onEnd: function () { },
//子彈是不是擊中板磚和擊中后處理事件，外部覆蓋
isBeatFly: function () { }
}
var Game = {
//分值
gameScore: 100,
//游戲背景dom元素
gamePanel: null,
//游戲背景寬度
gameWidth: 0,
//游戲背景高度
gameHeight: 0,
//子彈生成頻率
bulletHz: 200,
//板磚
fly: null,
//分數
score: 0,
//愛心
heart: 0,
//時間
time: 0,
//是不是開始
start: false,
//初始化
init: function () {
//初始化游戲背景數據
this.gamePanel = $('#panel');
this.gameWidth = this.gamePanel.width();
this.gameHeight = this.gamePanel.height();
this.score = 0;
this.heart = 0;
this.time = 30;
$('#time,#heart,#score').html(0);
//初始化板磚
this.fly = new Fly();
this.fly.init(this.gameWidth, this.gameHeight);
//為body綁定鍵盤事件
$('body').off('keydown').off('keyup')
.keydown(function (e) {
Game.fly.keydown(e, Game.gameWidth);
})
.keyup(function (e) {
Game.fly.keyup(e);
});
//初始化子彈
var _this = this;
var process = function () {
//隨機數，決定生成加分或扣份子彈
var random = parseInt(Math.random() * 10 + 1, 10);
//隨機數，決定生成愛心子彈
var heart = parseInt(Math.random() * 50 + 1, 10);
//新建1個子彈對象
var bullet = new Bullet(random % 3 == 0 ? 'bad' : heart < 10 ? 'heart' : 'good');
bullet.initPosition(_this.gameWidth);
//覆蓋子彈動畫結束事件
bullet.onEnd = function () {
this.dom.remove();
this.dom = null;
}
//覆蓋子彈是不是擊中飛機和擊中后處理事件
bullet.isBeatFly = function () {
if (this.checkBeatFly(_this.fly)) {
_this.changeScore(this.type);
return true;
}
return false;
}
_this.gamePanel.append(bullet.dom);
bullet.animation(_this.gameHeight);
if (_this.time > 0) {
setTimeout(process, _this.bulletHz);
};
}
process();
//計時
this.startTime();
this.start = true;
},
//改變分數
changeScore: function (type) {
switch (type) {
case 'heart':
this.heart += 1;
$('#heart').html(this.heart);
break;
case 'good':
this.score += 1;
break;
default:
this.score -= 1;
break;
}
$('#heart').html(this.heart);
$('#score').html(this.score);
},
//計時
startTime: function () {
var _this = this;
$('#time').html(this.time);
setTimeout(function () {
if (_this.time > 0) {
_this.time -= 1;
_this.startTime();
} else {
$('body').off('keydown').off('keyup');
Game.fly.stop();
_this.start = false;
}
}, 1000);
}
}
function GameStart() {
if (Game.start == false) {
Game.init();
}
}
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
