作者:channingbreeze
日期:2016-12-11
2048作为前段时间十分火爆的小游戏,以其简单的操作,有趣的玩法,一下子从小游戏的角逐中脱颖而出。本教程通过phaser来实现了一个标准版的2048,可以在桌面和移动端运行,一起来看看其中的关键代码吧。
效果就不在这里截图了,给一个地址,大家自己体验一下先。http://game.webxinxin.com/2048。
本教程主要介绍一些思路,技术关键点以及实现过程中遇到的一些坑!
开始界面呀,结束界面呀,这些就不介绍了,非常简单,如果还不会的话,可以看前面的入门教程和一些实例。本案例比较难的就是游戏的逻辑以及数据结构的组织方式。
第一个技术点是上面的两个计分的框,由于本案例的图片资源比较少,很多东西都是由js去画出来的,两个计分框也不例外。其实每个计分框可以看成一个大的sprite,这个大的sprite由几部分组成,框子、标题和分数,分别用graphic和两个text就能实现,把这些都放到sprite里面,就组成了一个计分框。
//score
var scoreSprite = game.add.sprite(10, 10);
var scoreGraphics = game.add.graphics(0, 0);
scoreGraphics.lineStyle(5, 0xA1C5C5);
scoreGraphics.beginFill(0x308C8C);
scoreGraphics.drawRoundedRect(0, 0, 70, 50, 10);
scoreGraphics.endFill();
scoreSprite.addChild(scoreGraphics);
var scoreTitle = game.add.text(0, 5, "SCORE", titleStyle);
scoreTitle.setTextBounds(0, 0, 70, 50);
scoreSprite.addChild(scoreTitle);
this.scoreText = game.add.text(0, 20, this.score, scoreStyle);
this.scoreText.setTextBounds(0, 0, 70, 50);
scoreSprite.addChild(this.scoreText);
其实有了计分框的实现思路,不难想象,2048游戏中的方块也是这种方式,一个框加上一个分数,组成一个sprite,也就是一个方块。但是方块仅仅实现了显示的需求,逻辑需求要怎么实现呢?所以其实我们需要一个4x4的数组,然后根据上下左右的滑动来做不同的遍历,决定怎么合并和移动方块。而每一个方块对象,除了有一个sprite属性外,还有一些标识去记录一些状态,表示逻辑的处理结果。
在滑动逻辑的处理中,我们总是从前面开始,从后往前遍历,如果碰到一个非零的方块,就检查是否能够合并,能够合并就进行合并,交换方块的位置及sprite等属性,并且直接开始执行动画(这种方式比记录下来动画再在最后全部执行来得简单)。如果不能合并,就需要移动当前方块了,这时候判断遍历的终点是否是空的,来决定移动的距离。
其实计算出最终的结果是很简单的,难的是计算出每一个方块的动画,每一个方块,可能会移动,可能会合并。具体的逻辑还需要大家自己细细琢磨。
// swipe的公共逻辑抽出
this.swipeCommon = function(i, j, arrNode, posJson, condition, nextArrNode, nextPosJson) {
var that = this;
var duration = 100;
// 遇到了可以合并的
if(!arrNode.newNode && arrNode.value == this.array[i][j].value) {
arrNode.value = arrNode.value * 2;
arrNode.newNode = true;
this.array[i][j].value = 0;
this.score = this.score + arrNode.value;
this.scoreText.text = this.score;
if(this.score > this.best) {
this.best = this.score;
this.bestText.text = this.best;
}
// 渐渐透明后被kill掉
var t1 = game.add.tween(arrNode.sprite).to({alpha: 0}, duration, Phaser.Easing.Linear.None, true);
t1.onComplete.add(function() {
this.sprite.kill();
that.placeSquare(this.x, this.y, this.value);
if(!that.canSwipe) {
that.canSwipe = true;
that.generateSquare();
}
}, arrNode);
var t2 = game.add.tween(this.array[i][j].sprite).to({alpha: 0}, duration, Phaser.Easing.Linear.None, true);
t2.onComplete.add(function() {
this.kill();
if(!that.canSwipe) {
that.canSwipe = true;
that.generateSquare();
}
}, this.array[i][j].sprite);
game.add.tween(this.array[i][j].sprite).to(posJson, duration, Phaser.Easing.Linear.None, true);
arrNode.sprite = this.array[i][j].sprite;
this.array[i][j].sprite = undefined;
} else if(arrNode.value == 0) {
arrNode.value = this.array[i][j].value;
this.array[i][j].value = 0;
var t = game.add.tween(this.array[i][j].sprite).to(posJson, duration, Phaser.Easing.Linear.None, true);
t.onComplete.add(function() {
if(!that.canSwipe) {
that.canSwipe = true;
that.generateSquare();
}
});
arrNode.sprite = this.array[i][j].sprite;
this.array[i][j].sprite = undefined;
} else if(condition) {
nextArrNode.value = this.array[i][j].value;
this.array[i][j].value = 0;
var t = game.add.tween(this.array[i][j].sprite).to(nextPosJson, duration, Phaser.Easing.Linear.None, true);
t.onComplete.add(function() {
if(!that.canSwipe) {
that.canSwipe = true;
that.generateSquare();
}
});
nextArrNode.sprite = this.array[i][j].sprite;
this.array[i][j].sprite = undefined;
}
};
其实在做滑动逻辑的时候,最好是先分别做完上下左右的逻辑,然后,再将公共的逻辑抽出,变成一个函数,这样会稍微简单一些。
另一个需要解决的问题,就是如何判断手势,也就是怎么判断上滑,下滑,左滑和右滑。这里我找到了网上的一个插件,使用起来还是很方便的。但是假如不用插件,我们其实也能做,无非就是判断一下按下和抬起的时候,点的相对位置而已。大家可以去看看插件的源码,也是这么做的,但是插件原来对滑动的判断并不敏感,我对参数做了一些改动,想省事的同学可以直接拿去用。关键代码就是:
// add swipe check
this.swipe = new Swipe(this.game, this.swipeCheck);
和
// swipe检测
this.swipeCheck = {
up: this.swipeUp.bind(this),
down: this.swipeDown.bind(this),
left: this.swipeLeft.bind(this),
right: this.swipeRight.bind(this)
};
其实把滑动检测和滑动逻辑做完之后,游戏基本就可以了。但是我还在方块的生成动画这里跌了一下,我希望方块生成的时候,从中心开始往外缩放。但是一开始设置了anchor竟然无效。一开始还以为无法实现,但是其实只是自己的几个精灵的组织关系没有写好,调整之后,很轻松就实现了。
// 在x,y位置放置一个值为value的方块
this.placeSquare = function(x, y, value) {
var squareStyle = { font: "bold 20px Arial", fill: "#FFFFFF", boundsAlignH: "center", boundsAlignV: "middle" };
var square = game.add.sprite();
square.reset(this.transX(x), this.transY(y));
var squareBackground = game.add.graphics(-45/2, -45/2);
squareBackground.beginFill(this.colors[value]);
squareBackground.drawRoundedRect(0, 0, 45, 45, 5);
squareBackground.endFill();
square.addChild(squareBackground);
var squareText = game.add.text(-45/2, -45/2, value, squareStyle);
squareText.setTextBounds(0, 0, 45, 45);
square.addChild(squareText);
this.array[x][y].value = value;
this.array[x][y].sprite = square;
square.anchor.setTo(0.5, 0.5);
square.scale.setTo(0.0, 0.0);
var tween = game.add.tween(square.scale).to({x:1.0, y:1.0}, 100, Phaser.Easing.Sinusoidal.InOut, true);
tween.onComplete.add(function() {
if(this.checkGameover()) {
this.gameOver();
}
}, this);
};
好了,2048的讲解到这里就结束了,期待下一个小游戏!
转载请注明出处:http://www.phaser-china.com/tutorial-detail-6.html