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;
}
JS部分实现
ball.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();
}
}
// 扩展数组方法,删除特定的值
Array.prototype.remove = function() {
for (var i = 0, l = this.length; i < l; i ++) {
if (this[i] == obj) {
this.splice(i, 1);
return this;
}
}
throw "The Array has no this Obj";
}
Game.js
// 游戏控制类
var Game = {
// 游戏背景dom
gamePanel : null,
// 魔法棒
stick : null,
// 分数
score : 0,
// 砖块列表
brickList : [],
// 游戏是否结束
isGameOver : false,
// 初始化
init : function() {
var _this = this;
// 获取游戏背景
this.gamePanel = document.getElementById("gamePanel");
// 初始化砖块
this.createBricks();
// 启动魔法棒
this.startStick();
// 启动弹球
this.startBall();
// 设置键盘按下与释放事件
document.body.onkeydown = function(e) {
_this.onkeydown(e);
};
document.body.onkeyup = function(e) {
_this.onkeyup(e);
};
},
// 启动魔法棒
startStick : function() {
var _this = this;
// 新建飞机对象
this.stick = new Stick();
// 设置位置
this.stick.setPosition(this.gamePanel, this.gamePanel.clientWidth, this.gamePanel.clientHeight);
// 重写修改分数
this.stick.onChangeScore = function() {
_this.changeScore();
};
},
// 启动弹球
startBall : function() {
// 游戏结束,退出
if (this.isGameOver) {
return;
}
var _this = this;
// 新建一个敌机对象
var ball = new Ball();
// 将弹球添加进游戏背景
this.gamePanel.appendChild(ball.dom);
var ballX = parseInt(this.stick.dom.offsetLeft + this.stick.dom.clientWidth/2 - ball.dom.clientWidth/2, 10);
var ballY = parseInt(this.stick.dom.offsetTop - ball.dom.clientHeight, 10);
// 设置位置
ball.setPosition(ballX, ballY);
// 重写检测是否击中stick
ball.OnCheckCrashStick = function() {
// 游戏结束,退出
if (_this.isGameOver) {
return;
}
// 判断是否击中
var top = this.dom.offsetTop;
var left = this.dom.offsetLeft;
var gameHeight = _this.gamePanel.clientHeight;
var stick = _this.stick;
if ((top >= gameHeight - this.dom.clientHeight - stick.dom.clientHeight) && (left > stick.dom.offsetLeft) && (left < stick.dom.offsetLeft + stick.dom.clientWidth)) {
return true;
}
return false;
};
ball.OnCheckCrashBrick = function() {
// 游戏结束,退出
if (_this.isGameOver) {
return;
}
// 遍历砖块列表,判断是否打中砖块
for (var i = 0; i < _this.brickList.length; i ++) {
// 砖块被击中过
if (!_this.brickList[i].isLive || _this.brickList[i].dom.className == "hideBrick") {
continue;
}
// LeftUp
if ((this.direction == "LeftUp" || this.direction == "RightUp")
&& this.dom.offsetTop <= _this.brickList[i].top + _this.brickList[i].height
&& this.dom.offsetLeft >= _this.brickList[i].left
&& this.dom.offsetLeft <= _this.brickList[i].left + _this.brickList[i].width) {
_this.brickList[i].onEnd();
_this.brickList[i].magic.isBeatStick = function() {
if(this.top > _this.stick.dom.offsetTop
&& this.left >= _this.stick.dom.offsetLeft
&& this.left <= _this.stick.dom.offsetLeft + _this.stick.dom.clientWidth) {
if (this.type == "good") {
_this.stick.changeBig();
} else {
_this.stick.changeSmall();
}
return true;
}
return false;
};
_this.changeScore();
return true;
}
// 想左上移动碰到砖
if (this.dom.offsetLeft <= _this.brickList[i].left + _this.brickList[i].width
&& this.dom.offsetLeft >= _this.brickList[i].left
&& this.dom.offsetTop >= _this.brickList[i].top
&& this.dom.offsetTop <= _this.brickList[i].top + _this.brickList[i].height) {
_this.brickList[i].onEnd();
_this.brickList[i].magic.isBeatStick = function() {
if(this.top > _this.stick.dom.offsetTop
&& this.left >= _this.stick.dom.offsetLeft
&& this.left <= _this.stick.dom.offsetLeft + _this.stick.dom.clientWidth) {
if (this.type == "good") {
_this.stick.changeBig();
} else {
_this.stick.changeSmall();
}
return true;
}
return false;
};
_this.changeScore();
return false;
}
}
return false;
};
// 重写弹球结束事件
ball.onend = function() {
_this.gamePanel.removeChild(this.dom);
document.getElementById("startBtn").style.display = "block";
_this.gameover();
};
// 游戏结束函数
ball.gameover = function() {
_this.gameover();
};
// 弹球移动
ball.animation(this.gamePanel.clientWidth, this.gamePanel.clientHeight, this.stick);
// 启动
//setTimeout(function() {_this.startBall();}, 500);
},
// 键盘按下事件
onkeydown : function(e) {
e = e || window.event;
var keyCode = e.keyCode;
// 阻止浏览器默认事件
if (keyCode == 32 || this.stick.keyCodeAndDirection[keyCode]) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
} else {
return;
}
// 回调飞机键盘按下事件
this.stick.keydown(e);
},
// 键盘释放事件
onkeyup : function(e) {
e = e || window.event;
// 回调飞机键盘释放事件
this.stick.keyup(e);
},
// 初始化砖块
createBricks : function() {
for (var i = 0; i < 108; i ++) {
var brick = new Brick(this.gamePanel);
// 将新建砖块添加进砖块列表中
this.brickList.push(brick);
// 将砖块添加进游戏背景中
this.gamePanel.appendChild(brick.dom);
if (Math.random() > 0.7) {
brick.dom.className = "hideBrick";
} else {
// 为position : relative的砖块初始化位置
var x = (i % 18) * 28;
var y = Math.floor(i/18) * 28;
brick.setPosition(x, y);
brick.setSize(28, 28);
}
}
},
// 销毁砖块
removeBricks : function() {
for (var i = 0; i < this.brickList.length; i ++) {
this.gamePanel.removeChild(this.brickList[i].dom);
}
this.brickList = [];
},
// 修改分数
changeScore : function() {
this.score += 100;
document.getElementById("score").innerHTML = this.score;
},
// 游戏结束
gameover : function() {
this.isGameOver = true;
document.getElementById("score").innerHTML = "The Game is Over... Your Score : " + this.score;
this.removeBricks();
this.gamePanel.removeChild(this.stick.dom);
this.stick = null;
this.score = 0;
this.gamePanel = null;
document.body.onkeydown = null;
document.body.onkeyup = null;
document.getElementById("startBtn").style.display = "block";
}
}
// 游戏开始入口
function Start() {
Game.isGameOver = false;
Game.init();
document.getElementById("startBtn").style.display = "none";
document.getElementById("score").innerHTML = 0;
}
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() {}
}
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>