原生JavaScript实现弹球游戏

原生JavaScript实现弹球游戏。游戏源码请到http://download.csdn.net/detail/zhangjinpeng66/6276567下载。点击图中央的三角图形开始。

开始后的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/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" οnclick="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();// 判断魔法棒下移是否越界，是否击中stickif (_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;// 移动的IDthis.moveId = null;// 是否弹球中this.isSend = false;// 变大标记this.bigCount = 0;// 变小标记this.smallCount = 0;// 接棒的宽度变大变小时做存储this.width = 0;this.init();}Stick.prototype = {// 游戏背景DomgamePanel : 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();}},

原生JavaScript实现弹球游戏相关推荐

原生JavaScript实现连连看游戏
向大家推荐一款原生JavaScript版连连看游戏,源码可在http://download.csdn.net/detail/zhangjinpeng66/6276583中下载,首页如下图所示: 首先看 ...
原生JavaScript实现打字游戏
写在最前面本文主要锻炼的是原生JavaScript的编程能力,运用了函数式编程的思想! 1.页面的排版与布局主要分成两个页面:a.初始呈现出来的界面:b.点击开始进入游戏的界面. a界面: 比较丑 ...
javascript 弹弹球小游戏
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>单机版 ...
原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏文章目录原生JavaScript抒写--贪吃蛇小游戏前言一.需求分析二.效果展示三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
php拼图游戏开发,原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置计算背景图位置 //1.让 ...
学习日记|javaScript在网页实现的弹球游戏
利用javeScript对象以及方法实现的网页弹球游戏. <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球& ...
纯js制作的弹球游戏
纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1  5 <!DOCTYP ...
html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程每日17点准时技术干货分享使用html+css+js实现弹球游戏代码如下,复制即可使用: <head> <style type="text/css ...
使用html+css+js实现弹球游戏
使用html+css+js实现弹球游戏使用html+css+js实现弹球游戏效果图: 代码如下,复制即可使用: <!doctype html> <head><styl ...

原生JavaScript实现弹球游戏

原生JavaScript实现弹球游戏相关推荐

最新文章

热门文章