首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

非html5实现js版弹球游戏示例代码

Posted in Javascript onSeptember 22, 2013

开始前的html页面
非html5实现js版弹球游戏示例代码 
开始后的html游戏界面
非html5实现js版弹球游戏示例代码 
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/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">分数： 
<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个源文件，即ball.js（球类）、brick.js（砖类）、game.js（游戏类）、magic.js（魔法棒类）、stick.js（挡板类）

球类代码实现如下： 

// 球类 
var Ball = function() { // 弹球dom元素 
this.dom = null; 
// 是否激活 
this.isFirst = true; 
// 弹球移动方向 
this.direction = null; 
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 = this; 
// 实际的横向移动速度，左或者右 
var _movepx = this.dom.offsetLeft > gameWidth/2 ? -1*this.movepx : this.movepx; 
var _movepy = this.dom.offsetTop > gameHeight/2 ? this.movepy : -1*this.movepy; 
// 处理移动函数 
var process = function() { 
// 弹球的x,y坐标 
var left = _this.dom.offsetLeft; 
var top = _this.dom.offsetTop; 
// 是否要调转方向 
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 + _movepy; 
left = left + _movepx; 
// 设置弹球位置 
_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"; 
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; 
} 
}; 
// 开始移动 
process(); 
}, 
// 外部接口，检测是否撞到魔法棒 
OnCheckCrashStick : function() {}, 
// 外部接口，检测是否撞到砖块 
OnCheckCrashBrick : function() {}, 
// 弹球结束事件 
onend : function() {}, 
// 游戏结束 
gameover : function() {} 
}

砖类代码如下brick.js源文件： 
// 砖类 
var Brick = function(gamePanel) { // 砖的dom元素 
this.dom = null; 
// 砖块所在的画布 
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; 
// 随机数 
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; 
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 = false; 
this.dom.className = "hideBrick"; 
this.initMagic(); 
} 
}

魔法棒类代码即magic.js源文件实现如下： 
// 魔法棒类 
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 = { 
// 魔法棒类型 
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.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"; 
}, 
// 魔法棒动画,height为游戏背景高度 
animation : function(height) { 
if (this.type == "none") { 
return; 
} 
var _this = this; 
// 向下移动函数 
var downMove = function() { 
_this.top = _this.top + _this.movepy; 
_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 = null; 
// 是否移动中 
this.isMove = false; 
// 移动的ID 
this.moveId = null; 
// 是否弹球中 
this.isSend = false; 
// 变大标记 
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 = gamePanel; 
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 = width; 
this.gameHeight = height; 
}, 
// 键盘按下事件 
keydown : function(e) { 
var keyCode = e.keyCode; 
if (!this.isMove) { 
this.move(keyCode); 
} 
}, 
// 键盘释放事件 
keyup : function(e) { 
// 判断是否为键盘释放 
if (this.keyCodeAndDirection[e.keyCode]) { 
// 停止移动 
this.stopMove(); 
} else if (e.keyCode == 32) { 
// 设置为非发弹中 
this.isSend = false; 
} 
}, 
// 移动 
move : function(keyCode) { 
// 设置为移动中 
this.isMove = true; 
var _this = this; 
// 判断移动方向 
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; 
} 
}, 
// 向左移动 
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.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"; 
} 
}, 
// 停止移动 
stopMove : function() { 
this.isMove = false; 
clearInterval(this.moveId); 
}, 
// 发射弹球,外部接口， 
onSendBall : function() {}, 

// 改分数外部接口 
onChangeScore : function() {} 
}

部分难点技术实现

通过键盘左右方向键移动挡板的代码实现： 

// 键盘按下事件 
keydown : function(e) { var keyCode = e.keyCode; 
if (!this.isMove) { 
this.move(keyCode); 
} 
}, 
// 键盘释放事件 
keyup : function(e) { 
// 判断是否为键盘释放 
if (this.keyCodeAndDirection[e.keyCode]) { 
// 停止移动 
this.stopMove(); 
} else if (e.keyCode == 32) { 
// 设置为非发弹中 
this.isSend = false; 
} 
}, 
// 移动 
move : function(keyCode) { 
// 设置为移动中 
this.isMove = true; 
var _this = this; 
// 判断移动方向 
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; 
} 
}, 
// 向左移动 
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.clientWidth; 
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance; 
this.dom.style["left"] = left + "px"; 
if (left == maxDistance) { 
this.stopMove(); 
} 
},

非html5实现js版弹球游戏示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
javascript相关事件的几个概念
May 21 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
原生js生成图片验证码
Oct 11 Javascript
多种方法判断Javascript对象是否存在
Sep 22 #Javascript
利用毫秒减值计算时长的js代码
Sep 22 #Javascript
js获取多个tagname的节点数组
Sep 22 #Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 #Javascript
jquery中获取id值方法小结
Sep 22 #Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 #Javascript
浏览器页面区域大小的js获取方法
Sep 21 #Javascript
reduce()(1) GCN(1) PIL(1) 信号同步(1) Python(3) 裁剪图片(1) 验证码(1) 鲲鹏(1) Flask(2) 进度条(1)
You might like
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
HTA版JSMin（省略修饰语若干）基于javascript语言编写
2009/12/24 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
走进javascript——不起眼的基础，值和分号
2017/02/24 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
js canvas实现星空连线背景特效
2019/11/01 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python连接字符串过程详解
2020/01/06 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
python使用smtplib模块发送邮件
2020/12/17 Python
新加坡领先的在线生活方式和杂货购物网站：EAMART
2019/04/02 全球购物
aden + anais英国官网：美国婴儿贴身用品品牌
2019/09/08 全球购物
String是最基本的数据类型吗？
2013/06/13 面试题
会计专业应届生求职信
2013/11/24 职场文书
财产保全担保书范文
2014/04/01 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
深入浅析React中diff算法
2021/05/19 Javascript