JSFiddle - React, Tailwind, and code Playground
JavaScript
var game;
var gameOptions = {
gameWidth: 800,
gameHeight: 800,
tileSize: 100,
fieldSize: {
rows: 8,
cols: 8
},
colors: [0xffffe0, 0x90ee90, 0xe6e6fa, 0x00bfff, 0xff69b4, 0x7cfc00, 0xff8c00, 0xffd700, 0x00ff00, 0x00ced1, 0x00ffff]
}
var n=2;
window.onload = function() {
game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight);
game.state.add("TheGame", TheGame);
game.state.start("TheGame");
}
var TheGame = function(){};
TheGame.prototype = {
preload: function(){
game.stage.backgroundColor = 0x222222;
game.load.image("tiles", "tile.png");
},
create: function(){
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
this.createLevel();
},
createLevel: function(){
var val;
this.tilesArray = [];
this.tileGroup = game.add.group();
this.tileGroup.x = (game.width - gameOptions.tileSize * gameOptions.fieldSize.cols) / 2; //
this.tileGroup.y = (game.height - gameOptions.tileSize * gameOptions.fieldSize.rows) / 2;
for(var i = 0; i < gameOptions.fieldSize.rows; i++){
this.tilesArray[i] = [];
for(var j = 0; j < gameOptions.fieldSize.cols; j++){
val = game.rnd.integerInRange(0, n);
this.addTile(i, j, val);
}
}
this.show();
},
addTile: function(row, col, val){
if(n<val) n=val;
var tileXPos = col * gameOptions.tileSize + gameOptions.tileSize / 2;
var tileYPos = row * gameOptions.tileSize + gameOptions.tileSize / 2;
var theTile = game.add.button(tileXPos, tileYPos, "tiles", this.pickTile, this);
theTile.anchor.set(0.5);
var text = game.add.text(this.tileSize/2,this.tileSize/2,"2",{font:"bold 16px Arial",align:"center"});
// setting text anchor in the horizontal and vertical center
text.anchor.set(0.5);
...