非html5实现js版弹球游戏示例代码
非html5实现js版弹球游戏示例代码
开始前的html页面 &开始后的html游戏界面 &html页面布局，即l文件源码如下： 　　复制代码 代码如下:　　&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""& &html& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8"/& &title&弹球游戏&/title& &link rel="stylesheet" type="text/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(); } },
&&&主编推荐
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
港口与航道工程建设工程法规及相关知识建设工程经济考试大纲矿业工程市政公用工程通信与广电工程
操作系统汇编语言计算机系统结构人工智能数据库系统微机与接口
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
Powerpoint教程WPS教程
电子政务客户关系管理首席信息官办公自动化大数据
职称考试题目
就业指导签约违约职业测评
招生信息考研政治
网络安全安全设置工具使用手机安全
3DMax教程Flash教程CorelDraw教程Director教程
Dreamwaver教程HTML教程网站策划网站运营Frontpage教程
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
互联网电信IT业界IT生活
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
组织运营财务资本
视频播放文件压缩杀毒软件输入法微博
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&当前位置： &
& 免费下载
sponser links:
这是本人做的一个纯JAVA游戏小程序--弹球-
最新本分类资源
一些JAVA小游戏的实现！
对JAVA基础学习很有帮助。-
连连看游戏的模拟,基本功能基本实现!好好玩啊!提高反应力!-Lianliankan game simulati ...
关于SWARM下的有关JHEATBUGs的源程序。可以非常清晰的看到仿真效果，一般用ECLIPSE编 ...
JAVA实现经典停等协议的多线程方法,这个简单的但是经典的方法是多线程编程的入门材料- ...
这是本人做的一个纯JAVA游戏小程序--弹球-
J2ME Jsr184 3D游戏开发碰撞的一个程序，可以用于很多游戏中-
这是一个打字的程序,给刚学打字的人计时.-
JAVA的机器人比赛游戏，锻炼JAVA编程能力的小程序。-
一个同学录系统，很不错的吧，适合初学者。相信对大家有帮助 ...
本类热门下载
一些JAVA小游戏的实现！
对JAVA基础学习很有帮助。-
一个同学录系统，很不错的吧，适合初学者。相信对大家有帮助 ...
netbean下开发的，头顶足球的游戏代码，可以模拟真实世界了，有重力等系统- ...
JAVA的机器人比赛游戏，锻炼JAVA编程能力的小程序。-
这是本人做的一个纯JAVA游戏小程序--弹球-
连连看游戏的模拟,基本功能基本实现!好好玩啊!提高反应力!-Lianliankan game simulati ...
goldminer游戏，还不完善，只能在全屏模式下运行-
几个java编的实例小游戏，希望大家喜欢，多多指教。-
格斗类小游戏
没什么好说的了
真的真的-
可以在Linux文本界面下运行的华容道游戏（C+ ncurses库）。-
CopyRight & 2008- All Rights reserved.　苏ICP备
号　京公网安备：95