非html5實(shí)現(xiàn)js版彈球游戲示例代碼
更新時(shí)間：2013年09月22日 15:05:44 作者：
彈球游戲，一般都是使用html5來(lái)實(shí)現(xiàn)的，其實(shí)不然，使用js也可以實(shí)現(xiàn)類(lèi)似的效果，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
開(kāi)始前的html頁(yè)面
開(kāi)始后的html游戲界面
html頁(yè)面布局，即index.html文件源碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>彈球游戲</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<center>
<div id="gamePanel" tabindex="0">
<div class="score">分?jǐn)?shù)：
<span id="score">0</span>
</div>
<div id="startBtn" onclick="Start()"></div>
</div>
</center>
<script type="text/javascript" src="js/magic.js"></script>
<script type="text/javascript" src="js/brick.js"></script>
<script type="text/javascript" src="js/ball.js"></script>
<script type="text/javascript" src="js/stick.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>
index.css文件源碼如下：
#gamePanel{
width:504px;
height:504px;
background:Black;
position:relative;
}
#gamePanel .score{
font-size:20px;
color:White;
position:absolute;
left:0;
top:0;
z-index:9999;
}
#gamePanel .bullet{
width:5px;
height:15px;
position:absolute;
background:url(../img/bullet.png);
overflow:hidden;
}
#gamePanel .stick{
width:80px;
height:18px;
position:absolute;
background:blue;
}
#gamePanel .ball{
width:15px;
height:15px;
position:absolute;
background:url(../img/ball.gif);
}
#gamePanel .brick {
width : 28px;
height : 28px;
position : relative;
background : url(../img/brick.gif);
float : left;
}
#gamePanel .hideBrick {
width : 28px;
height : 28px;
position : relative;
background : black;
float : left;
}
#gamePanel .magic {
width : 27px;
height : 11px;
position : absolute;
background : green;
}
#gamePanel .shortMagic {
width : 28px;
height : 12px;
position : absolute;
background : yellow;
}
#gamePanel .bingo{
width:18px;
height:18px;
position:absolute;
background:url(../img/bingo2.png);
}
#startBtn{
border-width:20px;
border-style:solid;
border-color:Black Black Black Green;
position:absolute;
left:240px;
top:240px;
cursor:pointer;
width:0px;
height:0px;
overflow:hidden;
}
JavaScript部分分為5個(gè)源文件，即ball.js（球類(lèi)）、brick.js（磚類(lèi)）、game.js（游戲類(lèi)）、magic.js（魔法棒類(lèi)）、stick.js（擋板類(lèi)）
球類(lèi)代碼實(shí)現(xiàn)如下：
// 球類(lèi)
var Ball = function() {
// 彈球dom元素
this.dom = null;
// 是否激活
this.isFirst = true;
// 彈球移動(dòng)方向
this.direction = null;
this.init();
}
Ball.prototype = {
// 彈球橫向移動(dòng)速度
movepx : 3,
// 彈球縱向移動(dòng)速度
movepy : 2,
// 彈球移動(dòng)頻率
movesp : 20,
// 彈球移動(dòng)頻率映射
movespMap : {
1 : 75,
2 : 65,
3 : 50,
4 : 40
},
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "ball";
},
// 設(shè)置彈球的初始化位置，x與y坐標(biāo)
setPosition : function(x, y) {
this.dom.style.left = x + "px";
this.dom.style.top = y + "px";
},
// 彈球動(dòng)畫(huà)，就是移動(dòng)，傳入?yún)?shù)為游戲背景的寬與高
animation : function(gameWidth, gameHeight, stick) {
var _this = this;
// 實(shí)際的橫向移動(dòng)速度，左或者右
var _movepx = this.dom.offsetLeft > gameWidth/2 ? -1*this.movepx : this.movepx;
var _movepy = this.dom.offsetTop > gameHeight/2 ? this.movepy : -1*this.movepy;
// 處理移動(dòng)函數(shù)
var process = function() {
// 彈球的x,y坐標(biāo)
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;
// 是否要調(diào)轉(zhuǎn)方向
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {
_movepx *= -1;
}
var isCrashStick = _this.OnCheckCrashStick();
var isCrashBall = _this.OnCheckCrashBrick();
// 判斷是否想上調(diào)轉(zhuǎn)方向
if (top < 0 || isCrashStick || isCrashBall) {
_movepy *= -1;
}
// 向下移動(dòng)
top = top + _movepy;
left = left + _movepx;
// 設(shè)置彈球位置
_this.dom.style.top = top + "px";
_this.dom.style.left = left + "px";
if(top > gameHeight) {
_this.onend();
alert("You Lose");
} else {
setTimeout(process, _this.movesp);
}
// 判斷彈球移動(dòng)方向
if (_movepx > 0 && _movepy < 0) {
_this.direction = "RightUp";
return;
}
if (_movepx > 0 && _movepy > 0) {
_this.direction = "RightDown";
return;
}
if (_movepx < 0 && _movepy < 0) {
_this.direction = "LeftUp";
return;
}
if (_movepx < 0 && _movepy > 0) {
_this.direction = "LeftDown";
return;
}
};
// 開(kāi)始移動(dòng)
process();
},
// 外部接口，檢測(cè)是否撞到魔法棒
OnCheckCrashStick : function() {},
// 外部接口，檢測(cè)是否撞到磚塊
OnCheckCrashBrick : function() {},
// 彈球結(jié)束事件
onend : function() {},
// 游戲結(jié)束
gameover : function() {}
}
磚類(lèi)代碼如下brick.js源文件：
// 磚類(lèi)
var Brick = function(gamePanel) {
// 磚的dom元素
this.dom = null;
// 磚塊所在的畫(huà)布
this.gamePanel = gamePanel;
// 是否激活
this.isLive = true;
// 是否帶有魔法棒
this.magic = null;
this.width = 28;
this.height = 28;
this.left = 0;
this.top = 0;
this.init();
}
Brick.prototype = {
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "brick";
},
// 為position: relative的Brick初始化位置
setPosition : function(x, y) {
this.left = x;
this.top = y;
},
// 為positon : relative的Brick初始化尺寸
setSize : function(width, height) {
this.width = width;
this.height = height;
},
// 初始化生成魔法棒
initMagic : function() {
var _this = this;
// 隨機(jī)數(shù)
var random = parseInt(Math.random()*1000 + 1, 10);
var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none";
// 新建一個(gè)魔法棒對(duì)象
var magic = new Magic(type);
this.magic = magic;
magic.initPosition(this);
// 將魔法棒添加進(jìn)磚塊中
this.gamePanel.appendChild(magic.dom);
magic.onEnd = function() {
_this.gamePanel.removeChild(magic.dom);
};
magic.animation(this.gamePanel.clientHeight);
},
// 擊中后的動(dòng)作
onEnd : function() {
this.isLive = false;
this.dom.className = "hideBrick";
this.initMagic();
}
}
魔法棒類(lèi)代碼即magic.js源文件實(shí)現(xiàn)如下：
// 魔法棒類(lèi)
var Magic = function(type) {
// Magic的dom元素
this.dom = null;
// Magic的dom信息
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
this.type = type;
this.init();
}
Magic.prototype = {
// 魔法棒類(lèi)型
magicType : {
"good" : "magic",
"bad" : "shortMagic",
"none" : ""
},
// 每次移動(dòng)位移
movepy : 3,
// 移動(dòng)速度
movespeed : 20,
// 初始化魔法棒
init : function() {
this.dom = document.createElement("div");
this.dom.className = this.magicType[this.type];
//this.dom.style.display = "none";
this.width = parseInt(this.dom.style.width, 10);
this.height = parseInt(this.dom.style.height, 10);
},
// 魔法棒初始化位置
initPosition : function(brick) {
this.left = brick.left;
this.top = brick.top;
this.dom.style.left = this.left + "px";
this.dom.style.top = this.top + "px";
},
// 更新位置
update : function() {
this.dom.style.left = this.left + "px";
this.dom.style.top = this.top + "px";
},
// 魔法棒動(dòng)畫(huà),height為游戲背景高度
animation : function(height) {
if (this.type == "none") {
return;
}
var _this = this;
// 向下移動(dòng)函數(shù)
var downMove = function() {
_this.top = _this.top + _this.movepy;
_this.update();
// 判斷魔法棒下移是否越界，是否擊中stick
if (_this.top < height && !_this.isBeatStick()) {
setTimeout(downMove, _this.movespeed);
} else {
// 動(dòng)畫(huà)結(jié)束觸發(fā)事件
_this.onEnd();
}
};
downMove();
},
// 動(dòng)畫(huà)結(jié)束觸發(fā)事件，外部覆蓋
onEnd : function() {},
// 魔法棒是否擊中擋板以及擊中后處理事件，外部覆蓋
isBeatStick : function() {}
}
擋板類(lèi)代碼即stick.js源文件如下：
// 新建棒類(lèi)
var Stick = function() {
// 飛機(jī)對(duì)應(yīng)的dom元素
this.dom = null;
// 是否移動(dòng)中
this.isMove = false;
// 移動(dòng)的ID
this.moveId = null;
// 是否彈球中
this.isSend = false;
// 變大標(biāo)記
this.bigCount = 0;
// 變小標(biāo)記
this.smallCount = 0;
// 接棒的寬度變大變小時(shí)做存儲(chǔ)
this.width = 0;
this.init();
}
Stick.prototype = {
// 游戲背景Dom
gamePanel : null,
// 游戲背景寬度
gameWidth : 0,
// 游戲背景高度
gameHeight : 0,
// 魔法棒移動(dòng)速度
movepx : 10,
// 魔法棒移動(dòng)頻率
movesp : 30,
// 方向鍵值對(duì)應(yīng)
keyCodeAndDirection : {
37 : "left",
39 : "right"
},
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "stick";
},
// 設(shè)置位置
setPosition : function(gamePanel, width, height) {
// 將魔法棒添加進(jìn)游戲背景中
this.gamePanel = gamePanel;
this.gamePanel.appendChild(this.dom);
// 設(shè)置飛機(jī)的初始位置
this.dom.style.left = (width - this.dom.clientWidth)/2 + "px";
this.dom.style.top = height - this.dom.clientHeight + "px";
// 獲取到游戲背景的寬和高
this.gameWidth = width;
this.gameHeight = height;
},
// 鍵盤(pán)按下事件
keydown : function(e) {
var keyCode = e.keyCode;
if (!this.isMove) {
this.move(keyCode);
}
},
// 鍵盤(pán)釋放事件
keyup : function(e) {
// 判斷是否為鍵盤(pán)釋放
if (this.keyCodeAndDirection[e.keyCode]) {
// 停止移動(dòng)
this.stopMove();
} else if (e.keyCode == 32) {
// 設(shè)置為非發(fā)彈中
this.isSend = false;
}
},
// 移動(dòng)
move : function(keyCode) {
// 設(shè)置為移動(dòng)中
this.isMove = true;
var _this = this;
// 判斷移動(dòng)方向
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
break;
}
case "right" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
break;
}
default : break;
}
},
// 向左移動(dòng)
moveLeft : function() {
var left = this.dom["offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0;
this.dom.style["left"] = left + "px";
if (left == 0) {
this.stopMove();
}
},
// 向右移動(dòng)
moveRight : function() {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth;
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
this.dom.style["left"] = left + "px";
if (left == maxDistance) {
this.stopMove();
}
},
// 變小
changeSmall : function() {
if (this.smallCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.smallCount ++;
this.bigCount >= 1 ? this.bigCount -- : this.bigCount + 0;
}
this.dom.style.left = parseInt(this.dom.style.left, 10) + 20 + "px";
this.dom.style.width = 40 + "px";
},
// 變大
changeBig : function() {
if (this.bigCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.bigCount ++;
this.smallCount >= 1 ? this.smallCount -- : this.smallCount + 0;
}
if (parseInt(this.dom.style.left, 10) <= 75 ) {
this.dom.style.width = parseInt(this.dom.style.width, 10) + 75 + parseInt(this.dom.style.left, 10)+ "px";
this.dom.style.left = 0 + "px";
return;
} else if (this.dom.style.width + 150 + parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 150 + "px";
this.dom.style.width = this.dom.style.width + 150 + "px";
return;
} else {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px";
this.dom.style.width = 150 + "px";
}
},
// 停止移動(dòng)
stopMove : function() {
this.isMove = false;
clearInterval(this.moveId);
},
// 發(fā)射彈球,外部接口，
onSendBall : function() {},
// 改分?jǐn)?shù)外部接口
onChangeScore : function() {}
}
部分難點(diǎn)技術(shù)實(shí)現(xiàn)
通過(guò)鍵盤(pán)左右方向鍵移動(dòng)擋板的代碼實(shí)現(xiàn)：
// 鍵盤(pán)按下事件
keydown : function(e) {
var keyCode = e.keyCode;
if (!this.isMove) {
this.move(keyCode);
}
},
// 鍵盤(pán)釋放事件
keyup : function(e) {
// 判斷是否為鍵盤(pán)釋放
if (this.keyCodeAndDirection[e.keyCode]) {
// 停止移動(dòng)
this.stopMove();
} else if (e.keyCode == 32) {
// 設(shè)置為非發(fā)彈中
this.isSend = false;
}
},
// 移動(dòng)
move : function(keyCode) {
// 設(shè)置為移動(dòng)中
this.isMove = true;
var _this = this;
// 判斷移動(dòng)方向
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
break;
}
case "right" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
break;
}
default : break;
}
},
// 向左移動(dòng)
moveLeft : function() {
var left = this.dom["offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0;
this.dom.style["left"] = left + "px";
if (left == 0) {
this.stopMove();
}
},
// 向右移動(dòng)
moveRight : function() {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth;
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
this.dom.style["left"] = left + "px";
if (left == maxDistance) {
this.stopMove();
}
},
開(kāi)始后的html游戲界面
html頁(yè)面布局，即index.html文件源碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>彈球游戲</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<center>
<div id="gamePanel" tabindex="0">
<div class="score">分?jǐn)?shù)：
<span id="score">0</span>
</div>
<div id="startBtn" onclick="Start()"></div>
</div>
</center>
<script type="text/javascript" src="js/magic.js"></script>
<script type="text/javascript" src="js/brick.js"></script>
<script type="text/javascript" src="js/ball.js"></script>
<script type="text/javascript" src="js/stick.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>
index.css文件源碼如下：
復(fù)制代碼 代碼如下:
#gamePanel{
width:504px;
height:504px;
background:Black;
position:relative;
}
#gamePanel .score{
font-size:20px;
color:White;
position:absolute;
left:0;
top:0;
z-index:9999;
}
#gamePanel .bullet{
width:5px;
height:15px;
position:absolute;
background:url(../img/bullet.png);
overflow:hidden;
}
#gamePanel .stick{
width:80px;
height:18px;
position:absolute;
background:blue;
}
#gamePanel .ball{
width:15px;
height:15px;
position:absolute;
background:url(../img/ball.gif);
}
#gamePanel .brick {
width : 28px;
height : 28px;
position : relative;
background : url(../img/brick.gif);
float : left;
}
#gamePanel .hideBrick {
width : 28px;
height : 28px;
position : relative;
background : black;
float : left;
}
#gamePanel .magic {
width : 27px;
height : 11px;
position : absolute;
background : green;
}
#gamePanel .shortMagic {
width : 28px;
height : 12px;
position : absolute;
background : yellow;
}
#gamePanel .bingo{
width:18px;
height:18px;
position:absolute;
background:url(../img/bingo2.png);
}
#startBtn{
border-width:20px;
border-style:solid;
border-color:Black Black Black Green;
position:absolute;
left:240px;
top:240px;
cursor:pointer;
width:0px;
height:0px;
overflow:hidden;
}
JavaScript部分分為5個(gè)源文件，即ball.js（球類(lèi)）、brick.js（磚類(lèi)）、game.js（游戲類(lèi)）、magic.js（魔法棒類(lèi)）、stick.js（擋板類(lèi)）
球類(lèi)代碼實(shí)現(xiàn)如下：
復(fù)制代碼 代碼如下:
// 球類(lèi)
var Ball = function() {
// 彈球dom元素
this.dom = null;
// 是否激活
this.isFirst = true;
// 彈球移動(dòng)方向
this.direction = null;
this.init();
}
Ball.prototype = {
// 彈球橫向移動(dòng)速度
movepx : 3,
// 彈球縱向移動(dòng)速度
movepy : 2,
// 彈球移動(dòng)頻率
movesp : 20,
// 彈球移動(dòng)頻率映射
movespMap : {
1 : 75,
2 : 65,
3 : 50,
4 : 40
},
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "ball";
},
// 設(shè)置彈球的初始化位置，x與y坐標(biāo)
setPosition : function(x, y) {
this.dom.style.left = x + "px";
this.dom.style.top = y + "px";
},
// 彈球動(dòng)畫(huà)，就是移動(dòng)，傳入?yún)?shù)為游戲背景的寬與高
animation : function(gameWidth, gameHeight, stick) {
var _this = this;
// 實(shí)際的橫向移動(dòng)速度，左或者右
var _movepx = this.dom.offsetLeft > gameWidth/2 ? -1*this.movepx : this.movepx;
var _movepy = this.dom.offsetTop > gameHeight/2 ? this.movepy : -1*this.movepy;
// 處理移動(dòng)函數(shù)
var process = function() {
// 彈球的x,y坐標(biāo)
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;
// 是否要調(diào)轉(zhuǎn)方向
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {
_movepx *= -1;
}
var isCrashStick = _this.OnCheckCrashStick();
var isCrashBall = _this.OnCheckCrashBrick();
// 判斷是否想上調(diào)轉(zhuǎn)方向
if (top < 0 || isCrashStick || isCrashBall) {
_movepy *= -1;
}
// 向下移動(dòng)
top = top + _movepy;
left = left + _movepx;
// 設(shè)置彈球位置
_this.dom.style.top = top + "px";
_this.dom.style.left = left + "px";
if(top > gameHeight) {
_this.onend();
alert("You Lose");
} else {
setTimeout(process, _this.movesp);
}
// 判斷彈球移動(dòng)方向
if (_movepx > 0 && _movepy < 0) {
_this.direction = "RightUp";
return;
}
if (_movepx > 0 && _movepy > 0) {
_this.direction = "RightDown";
return;
}
if (_movepx < 0 && _movepy < 0) {
_this.direction = "LeftUp";
return;
}
if (_movepx < 0 && _movepy > 0) {
_this.direction = "LeftDown";
return;
}
};
// 開(kāi)始移動(dòng)
process();
},
// 外部接口，檢測(cè)是否撞到魔法棒
OnCheckCrashStick : function() {},
// 外部接口，檢測(cè)是否撞到磚塊
OnCheckCrashBrick : function() {},
// 彈球結(jié)束事件
onend : function() {},
// 游戲結(jié)束
gameover : function() {}
}
磚類(lèi)代碼如下brick.js源文件：
復(fù)制代碼 代碼如下:
// 磚類(lèi)
var Brick = function(gamePanel) {
// 磚的dom元素
this.dom = null;
// 磚塊所在的畫(huà)布
this.gamePanel = gamePanel;
// 是否激活
this.isLive = true;
// 是否帶有魔法棒
this.magic = null;
this.width = 28;
this.height = 28;
this.left = 0;
this.top = 0;
this.init();
}
Brick.prototype = {
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "brick";
},
// 為position: relative的Brick初始化位置
setPosition : function(x, y) {
this.left = x;
this.top = y;
},
// 為positon : relative的Brick初始化尺寸
setSize : function(width, height) {
this.width = width;
this.height = height;
},
// 初始化生成魔法棒
initMagic : function() {
var _this = this;
// 隨機(jī)數(shù)
var random = parseInt(Math.random()*1000 + 1, 10);
var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none";
// 新建一個(gè)魔法棒對(duì)象
var magic = new Magic(type);
this.magic = magic;
magic.initPosition(this);
// 將魔法棒添加進(jìn)磚塊中
this.gamePanel.appendChild(magic.dom);
magic.onEnd = function() {
_this.gamePanel.removeChild(magic.dom);
};
magic.animation(this.gamePanel.clientHeight);
},
// 擊中后的動(dòng)作
onEnd : function() {
this.isLive = false;
this.dom.className = "hideBrick";
this.initMagic();
}
}
魔法棒類(lèi)代碼即magic.js源文件實(shí)現(xiàn)如下：
復(fù)制代碼 代碼如下:
// 魔法棒類(lèi)
var Magic = function(type) {
// Magic的dom元素
this.dom = null;
// Magic的dom信息
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
this.type = type;
this.init();
}
Magic.prototype = {
// 魔法棒類(lèi)型
magicType : {
"good" : "magic",
"bad" : "shortMagic",
"none" : ""
},
// 每次移動(dòng)位移
movepy : 3,
// 移動(dòng)速度
movespeed : 20,
// 初始化魔法棒
init : function() {
this.dom = document.createElement("div");
this.dom.className = this.magicType[this.type];
//this.dom.style.display = "none";
this.width = parseInt(this.dom.style.width, 10);
this.height = parseInt(this.dom.style.height, 10);
},
// 魔法棒初始化位置
initPosition : function(brick) {
this.left = brick.left;
this.top = brick.top;
this.dom.style.left = this.left + "px";
this.dom.style.top = this.top + "px";
},
// 更新位置
update : function() {
this.dom.style.left = this.left + "px";
this.dom.style.top = this.top + "px";
},
// 魔法棒動(dòng)畫(huà),height為游戲背景高度
animation : function(height) {
if (this.type == "none") {
return;
}
var _this = this;
// 向下移動(dòng)函數(shù)
var downMove = function() {
_this.top = _this.top + _this.movepy;
_this.update();
// 判斷魔法棒下移是否越界，是否擊中stick
if (_this.top < height && !_this.isBeatStick()) {
setTimeout(downMove, _this.movespeed);
} else {
// 動(dòng)畫(huà)結(jié)束觸發(fā)事件
_this.onEnd();
}
};
downMove();
},
// 動(dòng)畫(huà)結(jié)束觸發(fā)事件，外部覆蓋
onEnd : function() {},
// 魔法棒是否擊中擋板以及擊中后處理事件，外部覆蓋
isBeatStick : function() {}
}
擋板類(lèi)代碼即stick.js源文件如下：
復(fù)制代碼 代碼如下:
// 新建棒類(lèi)
var Stick = function() {
// 飛機(jī)對(duì)應(yīng)的dom元素
this.dom = null;
// 是否移動(dòng)中
this.isMove = false;
// 移動(dòng)的ID
this.moveId = null;
// 是否彈球中
this.isSend = false;
// 變大標(biāo)記
this.bigCount = 0;
// 變小標(biāo)記
this.smallCount = 0;
// 接棒的寬度變大變小時(shí)做存儲(chǔ)
this.width = 0;
this.init();
}
Stick.prototype = {
// 游戲背景Dom
gamePanel : null,
// 游戲背景寬度
gameWidth : 0,
// 游戲背景高度
gameHeight : 0,
// 魔法棒移動(dòng)速度
movepx : 10,
// 魔法棒移動(dòng)頻率
movesp : 30,
// 方向鍵值對(duì)應(yīng)
keyCodeAndDirection : {
37 : "left",
39 : "right"
},
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "stick";
},
// 設(shè)置位置
setPosition : function(gamePanel, width, height) {
// 將魔法棒添加進(jìn)游戲背景中
this.gamePanel = gamePanel;
this.gamePanel.appendChild(this.dom);
// 設(shè)置飛機(jī)的初始位置
this.dom.style.left = (width - this.dom.clientWidth)/2 + "px";
this.dom.style.top = height - this.dom.clientHeight + "px";
// 獲取到游戲背景的寬和高
this.gameWidth = width;
this.gameHeight = height;
},
// 鍵盤(pán)按下事件
keydown : function(e) {
var keyCode = e.keyCode;
if (!this.isMove) {
this.move(keyCode);
}
},
// 鍵盤(pán)釋放事件
keyup : function(e) {
// 判斷是否為鍵盤(pán)釋放
if (this.keyCodeAndDirection[e.keyCode]) {
// 停止移動(dòng)
this.stopMove();
} else if (e.keyCode == 32) {
// 設(shè)置為非發(fā)彈中
this.isSend = false;
}
},
// 移動(dòng)
move : function(keyCode) {
// 設(shè)置為移動(dòng)中
this.isMove = true;
var _this = this;
// 判斷移動(dòng)方向
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
break;
}
case "right" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
break;
}
default : break;
}
},
// 向左移動(dòng)
moveLeft : function() {
var left = this.dom["offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0;
this.dom.style["left"] = left + "px";
if (left == 0) {
this.stopMove();
}
},
// 向右移動(dòng)
moveRight : function() {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth;
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
this.dom.style["left"] = left + "px";
if (left == maxDistance) {
this.stopMove();
}
},
// 變小
changeSmall : function() {
if (this.smallCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.smallCount ++;
this.bigCount >= 1 ? this.bigCount -- : this.bigCount + 0;
}
this.dom.style.left = parseInt(this.dom.style.left, 10) + 20 + "px";
this.dom.style.width = 40 + "px";
},
// 變大
changeBig : function() {
if (this.bigCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.bigCount ++;
this.smallCount >= 1 ? this.smallCount -- : this.smallCount + 0;
}
if (parseInt(this.dom.style.left, 10) <= 75 ) {
this.dom.style.width = parseInt(this.dom.style.width, 10) + 75 + parseInt(this.dom.style.left, 10)+ "px";
this.dom.style.left = 0 + "px";
return;
} else if (this.dom.style.width + 150 + parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 150 + "px";
this.dom.style.width = this.dom.style.width + 150 + "px";
return;
} else {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px";
this.dom.style.width = 150 + "px";
}
},
// 停止移動(dòng)
stopMove : function() {
this.isMove = false;
clearInterval(this.moveId);
},
// 發(fā)射彈球,外部接口，
onSendBall : function() {},
// 改分?jǐn)?shù)外部接口
onChangeScore : function() {}
}
部分難點(diǎn)技術(shù)實(shí)現(xiàn)
通過(guò)鍵盤(pán)左右方向鍵移動(dòng)擋板的代碼實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
// 鍵盤(pán)按下事件
keydown : function(e) {
var keyCode = e.keyCode;
if (!this.isMove) {
this.move(keyCode);
}
},
// 鍵盤(pán)釋放事件
keyup : function(e) {
// 判斷是否為鍵盤(pán)釋放
if (this.keyCodeAndDirection[e.keyCode]) {
// 停止移動(dòng)
this.stopMove();
} else if (e.keyCode == 32) {
// 設(shè)置為非發(fā)彈中
this.isSend = false;
}
},
// 移動(dòng)
move : function(keyCode) {
// 設(shè)置為移動(dòng)中
this.isMove = true;
var _this = this;
// 判斷移動(dòng)方向
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
break;
}
case "right" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
break;
}
default : break;
}
},
// 向左移動(dòng)
moveLeft : function() {
var left = this.dom["offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0;
this.dom.style["left"] = left + "px";
if (left == 0) {
this.stopMove();
}
},
// 向右移動(dòng)
moveRight : function() {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth;
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
this.dom.style["left"] = left + "px";
if (left == maxDistance) {
this.stopMove();
}
},
相關(guān)文章
這篇文章主要介紹了如何在JS數(shù)組特定索引處指定位置插入元素？將一個(gè)元素插入到現(xiàn)有數(shù)組的特定索引處，需要的朋友可以參考下2014-08-08
解決使用attachEvent函數(shù)時(shí)，this指向被綁定的元素的問(wèn)題的方法
解決使用attachEvent函數(shù)時(shí)，this指向被綁定的元素的問(wèn)題的方法...2007-08-08
這篇文章主要為大家詳細(xì)介紹了javascript局部自定義鼠標(biāo)右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JavaScript基于querySelector?/?querySelectorAll對(duì)元素的操作(DOM?AP
這篇文章主要介紹了JavaScript基于querySelector?/?querySelectorAll對(duì)元素的操作(DOM?API掃盲),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
今天小編就為大家分享一篇關(guān)于js的各種數(shù)據(jù)類(lèi)型判斷的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說(shuō)下vite配置環(huán)境變量和模式是怎么配置的,對(duì)vite環(huán)境變量相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來(lái)說(shuō)尤其方便,可幫助我們快速開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了js 閉包的9個(gè)使用場(chǎng)景，幫助大家更好的理解和學(xué)習(xí)JavaScript 閉包的使用，感興趣的朋友可以了解下2020-12-12
JavaScript實(shí)現(xiàn)經(jīng)典排序算法之冒泡排序
這篇文章主要介紹了JavaScript實(shí)現(xiàn)經(jīng)典排序算法之冒泡排序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12