软件工程第二次作业————结对编程项目

从html5出现之后，javascript就开始越来越受欢迎了，微信朋友圈里层出不穷的小游戏就是最好的证明。对于移动端来说，游戏画面以及各种特效已变得不是最重要的，简单易上手和可玩性成为最突出的特性，例如前段时间狠火的flappybird和2048游戏。为了学习这门编程语言，本次软件工程作业我们尝试用js来完成一下。

我们选择了对一款html5小游戏进行恶趣味开发。。原游戏名为连锁反应，一群小球在窗口中跳动，玩家点击一下后会出现爆炸，一定区域内小球碰到会继续爆炸，形成连锁反应。每一关炸到一定个数的小球就可过关。

原程序截图：

 

相信很多男生小时候都玩过一个恶趣味的游戏——炸屎。。所以这次改编也算是对童年的一次回忆吧。。

把素材稍微改变一下：

大圆改为炸弹，小球改成了一坨坨X。。

游戏共有11关，每一关要炸的个数不断递增，炸够便可进入下一关。难度并不算高，多玩几次就可通关。

下面为游戏截图：

程序部分代码：

//游戏开始

newGame: function () {
this.ballsExpandedEl.empty();
this.levelScoreEl.empty();
this.totalScoreEl.empty();
this.levelNumberEl.empty();
this.notifierTitle.set("text", "炸掉" + this.levels[this.levelNumber][0] + "坨屎");
this.notifierButton.set('text', "开炸");
this.notifierButton.removeEvents();
this.notifierButton.addEvent("click", function () {
this.notifierBox.setStyle("display", "none");
this.notifierButton.removeEvents();
this.game = new GameLevel(this.levels[this.levelNumber], this);
}.bind(this))
this.notifierButton2.addEvent("click", function () {
clickMore();
})

}

//定义小球

var StarterBall = new Class({
element: false,
xposition: false,
yposition: false,
gameLevel: false,
initialize: function (gameLevel) {
this.gameLevel = gameLevel;
var coordinates = this.gameLevel.chainrxn.ballField.getCoordinates();
var dimensions = this.gameLevel.chainrxn.ballField.getSize();
this.element = new Element("div", {
"id": "starterBall"
}).inject(document.body);
this.xposition = coordinates.left + dimensions.x / 2;
this.yposition = coordinates.top + dimensions.y / 2;
this.move();
},
checkBounds: function () {
var coordinates = this.gameLevel.chainrxn.ballField.getCoordinates();
var max_y = this.gameLevel.ymax + coordinates.top;
var max_x = this.gameLevel.xmax + coordinates.left;
if(this.xposition > max_x) {
this.xposition = max_x;
} else if(this.xposition < coordinates.left) {
this.xposition = coordinates.left;
}
if(this.yposition > max_y) {
this.yposition = max_y;
} else if(this.yposition < coordinates.top) {
this.yposition = coordinates.top;
}
},
move: function () {
this.checkBounds();
this.element.setStyles({
"top": this.yposition - this.gameLevel.starterBallSize,
"left": this.xposition - this.gameLevel.starterBallSize
})
},
place: function (e) {
if(e.pageX){
this.xposition = e.pageX;
this.yposition = e.pageY;
}else{
this.xposition = e.page.x;
this.yposition = e.page.y;
}

this.checkBounds();
var coordinates = this.gameLevel.chainrxn.ballField.getCoordinates();
new Ball(this.gameLevel, this.gameLevel.numBalls, this.xposition - coordinates.left, this.yposition - coordinates.top);
this.element.removeClass("starterBall");
this.element.destroy();
$$("body")[0].removeEvents("mousemove");
$$("body")[0].removeEvents("click");
}
})

//爆炸效果

startExpansion: function () {
this.expanded = true;
this.gameLevel.expandedBalls.push(this.number);
this.gameLevel.totalBallsExpanded++;
this.gameLevel.chainrxn.ballsExpandedEl.set("text", "已经炸了" + this.gameLevel.totalBallsExpanded + "份了");
var newPoints = 100 * Math.pow(this.chainlevel, 3);
this.gameLevel.score += newPoints;
this.gameLevel.chainrxn.levelScoreEl.set("text", this.gameLevel.score + "关卡分");
this.gameLevel.chainrxn.totalScoreEl.set("text", this.gameLevel.score + this.gameLevel.chainrxn.score + " 总分");
this.downspeed = 0;
this.rightspeed = 0;
this.expanding = 1;
if(this.gameLevel.totalBallsExpanded >= this.gameLevel.ballWinCount && document.body.getStyle("background") != "#333") {
this.gameLevel.showWinBG();
}
(function () {
this.expanding = -1;
this.sizeChangeCount = this.gameLevel.shrinkingIntervals;
}).bind(this).delay(this.gameLevel.expandedLifeLength);
if(this.number == this.gameLevel.numBalls) {
return;
}
var coordinates = this.gameLevel.chainrxn.ballField.getCoordinates();
var pointBox = new Element("div", {
"text": "+" + newPoints
}).inject(document.body);
pointBox.addClass("points");
pointBox.setStyles({
"position": "absolute",
"top": (this.yposition + coordinates.top - this.gameLevel.pointPopupHeight / 2),
"left": (this.xposition + coordinates.left - this.gameLevel.pointPopupWidth / 2)
});
(function () {
pointBox.destroy();
}).delay(this.gameLevel.expandedLifeLength, this);
},

最后是通关画面，点击确定可重新开始游戏：