非html5实现js版弹球游戏示例代码
字体：[ ] 类型：转载 时间：
弹球游戏，一般都是使用html5来实现的，其实不然，使用js也可以实现类似的效果，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助
开始前的html页面 &开始后的html游戏界面 &html页面布局，即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/ 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"&分数： &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:504 height:504 background:B position: } #gamePanel .score{ font-size:20 color:W position: left:0; top:0; z-index:9999; } #gamePanel .bullet{ width:5 height:15 position: background:url(../img/bullet.png); overflow: } #gamePanel .stick{ width:80 height:18 position: background: } #gamePanel .ball{ width:15 height:15 position: background:url(../img/ball.gif); } #gamePanel .brick { width : 28 height : 28 position : background : url(../img/brick.gif); float : } #gamePanel .hideBrick { width : 28 height : 28 position : background : float : } #gamePanel .magic { width : 27 height : 11 position : background : } #gamePanel .shortMagic { width : 28 height : 12 position : background : } #gamePanel .bingo{ width:18 height:18 position: background:url(../img/bingo2.png); } #startBtn{ border-width:20 border-style: border-color:Black Black Black G position: left:240 top:240 cursor: width:0 height:0 overflow: }
JavaScript部分分为5个源文件，即ball.js（球类）、brick.js（砖类）、game.js（游戏类）、magic.js（魔法棒类）、stick.js（挡板类） 球类代码实现如下：
代码如下: // 球类 var Ball = function() { // 弹球dom元素 this.dom = // 是否激活 this.isFirst = // 弹球移动方向 this.direction = this.init(); } Ball.prototype = { // 弹球横向移动速度 movepx : 3, // 弹球纵向移动速度 movepy : 2, // 弹球移动频率 movesp : 20, // 弹球移动频率映射 movespMap : { 1 : 75, 2 : 65, 3 : 50, 4 : 40 }, // 初始化 init : function() { this.dom = document.createElement("div"); this.dom.className = "ball"; }, // 设置弹球的初始化位置，x与y坐标 setPosition : function(x, y) { this.dom.style.left = x + "px"; this.dom.style.top = y + "px"; }, // 弹球动画，就是移动，传入参数为游戏背景的宽与高 animation : function(gameWidth, gameHeight, stick) { var _this = // 实际的横向移动速度，左或者右 var _movepx = this.dom.offsetLeft & gameWidth/2 ? -1*this.movepx : this. var _movepy = this.dom.offsetTop & gameHeight/2 ? this.movepy : -1*this. // 处理移动函数 var process = function() { // 弹球的x,y坐标 var left = _this.dom.offsetL var top = _this.dom.offsetT // 是否要调转方向 if (left &= 0 || left &= gameWidth - _this.dom.clientWidth) { _movepx *= -1; } var isCrashStick = _this.OnCheckCrashStick(); var isCrashBall = _this.OnCheckCrashBrick(); // 判断是否想上调转方向 if (top & 0 || isCrashStick || isCrashBall) { _movepy *= -1; } // 向下移动 top = top + _ left = left + _ // 设置弹球位置 _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); } // 判断弹球移动方向 if (_movepx & 0 && _movepy & 0) { _this.direction = "RightUp";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "RightDown";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "LeftUp";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "LeftDown";
} }; // 开始移动 process(); }, // 外部接口，检测是否撞到魔法棒 OnCheckCrashStick : function() {}, // 外部接口，检测是否撞到砖块 OnCheckCrashBrick : function() {}, // 弹球结束事件 onend : function() {}, // 游戏结束 gameover : function() {} }
砖类代码如下brick.js源文件：
代码如下: // 砖类 var Brick = function(gamePanel) { // 砖的dom元素 this.dom = // 砖块所在的画布 this.gamePanel = gameP // 是否激活 this.isLive = // 是否带有魔法棒 this.magic = 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 = this.top = }, // 为positon : relative的Brick初始化尺寸 setSize : function(width, height) { this.width = this.height = }, // 初始化生成魔法棒 initMagic : function() { var _this = // 随机数 var random = parseInt(Math.random()*1000 + 1, 10); var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none"; // 新建一个魔法棒对象 var magic = new Magic(type); this.magic = magic.initPosition(this); // 将魔法棒添加进砖块中 this.gamePanel.appendChild(magic.dom); magic.onEnd = function() { _this.gamePanel.removeChild(magic.dom); }; magic.animation(this.gamePanel.clientHeight); }, // 击中后的动作 onEnd : function() { this.isLive = this.dom.className = "hideBrick"; this.initMagic(); } }
魔法棒类代码即magic.js源文件实现如下：
代码如下: // 魔法棒类 var Magic = function(type) { // Magic的dom元素 this.dom = // Magic的dom信息 this.left = 0; this.top = 0; this.width = 0; this.height = 0; this.type = this.init(); } Magic.prototype = { // 魔法棒类型 magicType : { "good" : "magic", "bad" : "shortMagic", "none" : "" }, // 每次移动位移 movepy : 3, // 移动速度 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. this.top = brick. 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"; }, // 魔法棒动画,height为游戏背景高度 animation : function(height) { if (this.type == "none") {
} var _this = // 向下移动函数 var downMove = function() { _this.top = _this.top + _this. _this.update(); // 判断魔法棒下移是否越界，是否击中stick if (_this.top & height && !_this.isBeatStick()) { setTimeout(downMove, _this.movespeed); } else { // 动画结束触发事件 _this.onEnd(); } }; downMove(); }, // 动画结束触发事件，外部覆盖 onEnd : function() {}, // 魔法棒是否击中挡板以及击中后处理事件，外部覆盖 isBeatStick : function() {} }
挡板类代码即stick.js源文件如下：
代码如下: // 新建棒类 var Stick = function() { // 飞机对应的dom元素 this.dom = // 是否移动中 this.isMove = // 移动的ID this.moveId = // 是否弹球中 this.isSend = // 变大标记 this.bigCount = 0; // 变小标记 this.smallCount = 0; // 接棒的宽度变大变小时做存储 this.width = 0; this.init(); } Stick.prototype = { // 游戏背景Dom gamePanel : null, // 游戏背景宽度 gameWidth : 0, // 游戏背景高度 gameHeight : 0, // 魔法棒移动速度 movepx : 10, // 魔法棒移动频率 movesp : 30, // 方向键值对应 keyCodeAndDirection : { 37 : "left", 39 : "right" }, // 初始化 init : function() { this.dom = document.createElement("div"); this.dom.className = "stick"; }, // 设置位置 setPosition : function(gamePanel, width, height) { // 将魔法棒添加进游戏背景中 this.gamePanel = gameP this.gamePanel.appendChild(this.dom); // 设置飞机的初始位置 this.dom.style.left = (width - this.dom.clientWidth)/2 + "px"; this.dom.style.top = height - this.dom.clientHeight + "px"; // 获取到游戏背景的宽和高 this.gameWidth = this.gameHeight = }, // 键盘按下事件 keydown : function(e) { var keyCode = e.keyC if (!this.isMove) { this.move(keyCode); } }, // 键盘释放事件 keyup : function(e) { // 判断是否为键盘释放 if (this.keyCodeAndDirection[e.keyCode]) { // 停止移动 this.stopMove(); } else if (e.keyCode == 32) { // 设置为非发弹中 this.isSend = } }, // 移动 move : function(keyCode) { // 设置为移动中 this.isMove = var _this = // 判断移动方向 switch(this.keyCodeAndDirection[keyCode]) { case "left" : { this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
} case "right" : { this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
} default : } }, // 向左移动 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(); } }, // 向右移动 moveRight : function() { var left = this.dom["offsetLeft"]; var maxDistance = this.gameWidth - this.dom.clientW left = left + this.movepx &= maxDistance ? left + this.movepx: maxD this.dom.style["left"] = left + "px"; if (left == maxDistance) { this.stopMove(); } }, // 变小 changeSmall : function() { if (this.smallCount &= 1) {
} 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) {
} 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";
} 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";
} else { this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px"; this.dom.style.width = 150 + "px"; } }, // 停止移动 stopMove : function() { this.isMove = clearInterval(this.moveId); }, // 发射弹球,外部接口， onSendBall : function() {}, // 改分数外部接口 onChangeScore : function() {} }
部分难点技术实现 通过键盘左右方向键移动挡板的代码实现：
代码如下: // 键盘按下事件 keydown : function(e) { var keyCode = e.keyC if (!this.isMove) { this.move(keyCode); } }, // 键盘释放事件 keyup : function(e) { // 判断是否为键盘释放 if (this.keyCodeAndDirection[e.keyCode]) { // 停止移动 this.stopMove(); } else if (e.keyCode == 32) { // 设置为非发弹中 this.isSend = } }, // 移动 move : function(keyCode) { // 设置为移动中 this.isMove = var _this = // 判断移动方向 switch(this.keyCodeAndDirection[keyCode]) { case "left" : { this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
} case "right" : { this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
} default : } }, // 向左移动 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(); } }, // 向右移动 moveRight : function() { var left = this.dom["offsetLeft"]; var maxDistance = this.gameWidth - this.dom.clientW left = left + this.movepx &= maxDistance ? left + this.movepx: maxD this.dom.style["left"] = left + "px"; if (left == maxDistance) { this.stopMove(); } },
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具非html5实现js版弹球游戏示例代码,JavaScript教程,JavaScript案例,JavaScript实例
本站中文域名：、　
　　　　　　　　
　　　　　
　|　　|　
　　　　　　　　　　　
您的位置： &&
&& 非html5实现js版弹球游戏示例代码
非html5实现js版弹球游戏示例代码
　　本文标签：　　　
开tml页面 &开始后的html游戏界面 &html页面布局，即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/ 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"&分数： &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:504 height:504 background:B position: } #gamePanel .score{ font-size:20 color:W position: left:0; top:0; z-index:9999; } #gamePanel .bullet{ width:5 height:15 position: background:url(/img/bullet.png); overflow: } #gamePanel .stick{ width:80 height:18 position: background: } #gamePanel .ball{ width:15 height:15 position: background:url(/img/ball.gif); } #gamePanel .brick { width : 28 height : 28 position : background : url(/img/brick.gif); float : } #gamePanel .hideBrick { width : 28 height : 28 position : background : float : } #gamePanel .magic { width : 27 height : 11 position : background : } #gamePanel .shortMagic { width : 28 height : 12 position : background : } #gamePanel .bingo{ width:18 height:18 position: background:url(/img/bingo2.png); } #startBtn{ border-width:20 border-style: border-color:Black Black Black G position: left:240 top:240 cursor: width:0 height:0 overflow: }
JavaScript部分分为5个源文件，即ball.js（球类）、brick.js（砖类）、game.js（游戏类）、magic.js（魔法棒类）、stick.js（挡板类） 球类代码实现如下： 复制代码 代码如下: // 球类 var Ball = function() { // 弹球dom元素 this.dom = // 是否激活 this.isFirst = // 弹球移动方向 this.direction = this.init(); } Ball.prototype = { // 弹球横向移动速度 movepx : 3, // 弹球纵向移动速度 movepy : 2, // 弹球移动频率 movesp : 20, // 弹球移动频率映射 movespMap : { 1 : 75, 2 : 65, 3 : 50, 4 : 40 }, // 初始化 init : function() { this.dom = document.createElement("div"); this.dom.className = "ball"; }, // 设置弹球的初始化位置，x与y坐标 setPosition : function(x, y) { this.dom.style.left = x + "px"; this.dom.style.top = y + "px"; }, // 弹球动画，就是移动，传入参数为游戏背景的宽与高 animation : function(gameWidth, gameHeight, stick) { var _this = // 实际的横向移动速度，左或者右 var _movepx = this.dom.offsetLeft & gameWidth/2 ? -1*this.movepx : this. var _movepy = this.dom.offsetTop & gameHeight/2 ? this.movepy : -1*this. // 处理移动函数 var process = function() { // 弹球的x,y坐标 var left = _this.dom.offsetL var top = _this.dom.offsetT // 是否要调转方向 if (left &= 0 || left &= gameWidth - _this.dom.clientWidth) { _movepx *= -1; } var isCrashStick = _this.OnCheckCrashStick(); var isCrashBall = _this.OnCheckCrashBrick(); // 判断是否想上调转方向 if (top & 0 || isCrashStick || isCrashBall) { _movepy *= -1; } // 向下移动 top = top + _ left = left + _ // 设置弹球位置 _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); } // 判断弹球移动方向 if (_movepx & 0 && _movepy & 0) { _this.direction = "RightUp";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "RightDown";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "LeftUp";
} if (_movepx & 0 && _movepy & 0) { _this.direction = "LeftDown";
} }; // 开始移动 process(); }, // 外部接口，检测是否撞到魔法棒 OnCheckCrashStick : function() {}, // 外部接口，检测是否撞到砖块 OnCheckCrashBrick : function() {}, // 弹球结束事件 onend : function() {}, // 游戏结束 gameover : function() {} }
砖类代码如下brick.js源文件： 复制代码 代码如下: // 砖类 var Brick = function(gamePanel) { // 砖的dom元素 this.dom = // 砖块所在的画布 this.gamePanel = gameP // 是否激活 this.isLive = // 是否带有魔法棒 this.magic = 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 = this.top = }, // 为positon : relative的Brick初始化尺寸 setSize : function(width, height) { this.width = this.height = }, // 初始化生成魔法棒 initMagic : function() { var _this = // 随机数 var random = parseInt(Math.random()*1000 + 1, 10); var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none"; // 新建一个魔法棒对象 var magic = new Magic(type); this.magic = magic.initPosition(this); // 将魔法棒添加进砖块中 this.gamePanel.appendChild(magic.dom); magic.onEnd = function() { _this.gamePanel.removeChild(magic.dom); }; magic.animation(this.gamePanel.clientHeight); }, // 击中后的动作 onEnd : function() { this.isLive = this.dom.className = "hideBrick"; this.initMagic(); } }
魔法棒类代码即magic.js源文件实现如下： 复制代码 代码如下: // 魔法棒类 var Magic = function(type) { // Magic的dom元素 this.dom = // Magic的dom信息 this.left = 0; this.top = 0; this.width = 0; this.height = 0; this.type = this.init(); } Magic.prototype = { // 魔法棒类型 magicType : { "good" : "magic", "bad" : "shortMagic", "none" : "" }, // 每次移动位移 movepy : 3, // 移动速度 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. this.top = brick. 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"; }, // 魔法棒动画,height为游戏背景高度 animation : function(height) { if (this.type == "none") {
} var _this = // 向下移动函数 var downMove = function() { _this.top = _this.top + _this. _this.update(); // 判断魔法棒下移是否越界，是否击中stick if (_this.top & height && !_this.isBeatStick()) { setTimeout(downMove, _this.movespeed); } else { // 动画结束触发事件 _this.onEnd(); } }; downMove(); }, // 动画结束触发事件，外部覆盖 onEnd : function() {}, // 魔法棒是否击中挡板以及击中后处理事件，外部覆盖 isBeatStick : function() {} }
挡板类代码即stick.js源文件如下： 复制代码 代码如下: // 新建棒类 var Stick = function() { // 飞机对应的dom元素 this.dom = // 是否移动中 this.isMove = // 移动的ID this.moveId = // 是否弹球中 this.isSend = // 变大标记 this.bigCount = 0; // 变小标记 this.smallCount = 0; // 接棒的宽度变大变小时做存储 this.width = 0; this.init(); } Stick.prototype = { // 游戏背景Dom gamePanel : null, // 游戏背景宽度 gameWidth : 0, // 游戏背景高度 gameHeight : 0, // 魔法棒移动速度 movepx : 10, // 魔法棒移动频率 movesp : 30, // 方向键值对应 keyCodeAndDirection : { 37 : "left", 39 : "right" }, // 初始化 init : function() { this.dom = document.createElement("div"); this.dom.className = "stick"; }, // 设置位置 setPosition : function(gamePanel, width, height) { // 将魔法棒添加进游戏背景中 this.gamePanel = gameP this.gamePanel.appendChild(this.dom); // 设置飞机的初始位置 this.dom.style.left = (width - this.dom.clientWidth)/2 + "px"; this.dom.style.top = height - this.dom.clientHeight + "px"; // 获取到游戏背景的宽和高 this.gameWidth = this.gameHeight = }, // 键盘按下事件 keydown : function(e) { var keyCode = e.keyC if (!this.isMove) { this.move(keyCode); } }, // 键盘释放事件 keyup : function(e) { // 判断是否为键盘释放 if (this.keyCodeAndDirection[e.keyCode]) { // 停止移动 this.stopMove(); } else if (e.keyCode == 32) { // 设置为非发弹中 this.isSend = } }, // 移动 move : function(keyCode) { // 设置为移动中 this.isMove = var _this = // 判断移动方向 switch(this.keyCodeAndDirection[keyCode]) { case "left" : { this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
} case "right" : { this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
} default : } }, // 向左移动 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(); } }, // 向右移动 moveRight : function() { var left = this.dom["offsetLeft"]; var maxDistance = this.gameWidth - this.dom.clientW left = left + this.movepx &= maxDistance ? left + this.movepx: maxD this.dom.style["left"] = left + "px"; if (left == maxDistance) { this.stopMove(); } }, // 变小 changeSmall : function() { if (this.smallCount &= 1) {
} 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) {
} 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";
} 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";
} else { this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px"; this.dom.style.width = 150 + "px"; } }, // 停止移动 stopMove : function() { this.isMove = clearInterval(this.moveId); }, // 发射弹球,外部接口， onSendBall : function() {}, // 改分数外部接口 onChangeScore : function() {} }
部分难点技术实现 通过键盘左右方向键移动挡板的代码实现： 复制代码 代码如下: // 键盘按下事件 keydown : function(e) { var keyCode = e.keyC if (!this.isMove) { this.move(keyCode); } }, // 键盘释放事件 keyup : function(e) { // 判断是否为键盘释放 if (this.keyCodeAndDirection[e.keyCode]) { // 停止移动 this.stopMove(); } else if (e.keyCode == 32) { // 设置为非发弹中 this.isSend = } }, // 移动 move : function(keyCode) { // 设置为移动中 this.isMove = var _this = // 判断移动方向 switch(this.keyCodeAndDirection[keyCode]) { case "left" : { this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
} case "right" : { this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
} default : } }, // 向左移动 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(); } }, // 向右移动 moveRight : function() { var left = this.dom["offsetLeft"]; var maxDistance = this.gameWidth - this.dom.clientW left = left + this.movepx &= maxDistance ? left + this.movepx: maxD this.dom.style["left"] = left + "px"; if (left == maxDistance) { this.stopMove(); } },
Google搜索中
搜狗搜索中
数据库开发
产品库推荐
| 站长工具：
All Rights Reserved.
珠江路在线版权所有
苏ICP备号 中文域名：
　|　　|　}