2048
演示地址：
思路
- 设计一个400x400的画布，以及每一个方块大小为100x100。
- 定义一个长度为16的数组对应画布中的每一个方格。
- 方格移动，合并修改方格上数字。
工具
- phaser.js(3.20.1)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="../js/dist/phaser.js"></script>
<script src="2048.js"></script>
</head>
<body>
</body>
</html>
- 布局
var game;
var tileSize = 100;
window.onload = function(){
var config = {
type: Phaser.AUTO, //Phaser.CANVAS Phaser.WEBGL
backgroundColor: 0x222222,
width: tileSize * 4,
height: tileSize * 4,
scene: playGame
};
game = new Phaser.Game(config);
window.focus();
}
var fieldArray = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
var colors = {
2: '#FFFFFF', 4: '#FFEEEE', 8: '#FFDDDD', 16: '#FFCCCC', 32: '#FFBBBB',
64: '#FFAAAA', 128: '#FF9999', 256: '#FF8888', 512: '#FF7777', 1024: '#FF6666',
2048: '#FF5555', 4096: '#FF4444', 8192: '#FF3333', 16384: '#FF2222',
32768: '#FF1111', 65536: '#FF0000'
}
- 绘制2的方块
addTwo(){
do{
var randomValue = Math.floor(Math.random()*16);
} while (fieldArray[randomValue]!=0)
fieldArray[randomValue] = 2;
var x = this.toCol(randomValue)*tileSize;
var y = this.toRow(randomValue)*tileSize;
var tile = this.add.sprite(0, 0, "tile");
tile.alpha = 0.5;
tile.setOrigin(0, 0);
tile.pos = randomValue;
var text = this.add.text( tileSize/2, tileSize/2,"2",{font:"bold 16px Arial",align:"center"});
text.setOrigin(0.5, 0.5);
text.setColor(colors[fieldArray[randomValue]])
var container = this.add.container(x, y, [tile, text]);
container.pos = randomValue;
this.tileSprites.add(container);
}
toRow(n){
return Math.floor(n/4);
}
toCol(n){
return n%4;
}
- 移动
//左移
moveLeft(){
var me = this;
var sprites = this.tileSprites.getChildren();
//排序，根据x的坐标升序
var newSprites = me.sortByXY(sprites, 'x', 'asc');
newSprites.forEach(function(sprite){
var pos = sprite.pos;
var row = me.toRow(pos);
var col = me.toCol(pos);
var _val = fieldArray[pos];
while(col > 0){
col--
var num = me.toNum(row, col);
//检测当前精灵与num位置是否有精灵，是否可以合并
//0：没有精灵，1：有精灵，2：合并
var checked = me.checkSprite(sprite, num);
if(checked > 0){
if(checked == 1) {
col++;
}
break;
}
}
fieldArray[pos] = 0;
sprite.pos = me.toNum(row, col);
if(!sprite.del) {
fieldArray[sprite.pos] = _val;
}
me.moving = true;
var move = me.tweens.add({
targets: [ sprite ],
x: { value: col * tileSize, duration: 500, ease: 'Power1' },
onComplete: function(){
if(sprite.del) {
sprite.destroy()
}
me.moving = false;
//更新方块上的文字
me.updateNumbers();
}
});
});
//新增两个2的方块
this.addNewTwo();
}
网友评论