html file includes phaser js and our game code (game.js) which is placed in js folder. Let us start with the basic one screen setup as following<\/p>\n
let loadGame = function () {\r\n\r\n let config = {\r\n type: Phaser.AUTO,\r\n width: 500,\r\n height: 500,\r\n backgroundColor: 0x000000,\r\n scene: TheGame\r\n }\r\n\r\n let game = new Phaser.Game(config);\r\n};\r\n\r\nif (document.readyState === \"complete\" || (document.readyState !== \"loading\" && !document.documentElement.doScroll)) {\r\n loadGame();\r\n} else {\r\n document.addEventListener(\"DOMContentLoaded\", loadGame);\r\n}\r\n\r\nclass TheGame extends Phaser.Scene {\r\n\r\n constructor() {\r\n super(\"TheGame\");\r\n }\r\n\r\n preload() {\r\n }\r\n\r\n create() {\r\n }\r\n}<\/pre>\nIf you are coming from Phaser 2 then you would notice some differences. We are starting a game and passing a config which defines the type (similar to Phaser 2; AUTO, WEBGAL, CANVAS), width and height of the game, backgroundColor and one scene. We have\u00a0a skeleton scene which is not doing anything at the moment. We will add code to this as we move forward. In Phaser 2 we has the concept of states where we could define multiple states and then load one state at a time. We could move between states such as a menu screen, game screen, game over screen. Scenes are something similar but highly advanced now. In Phaser 2 we could only load one state a time but now in Phaser 3 we can have multiple scenes running in parallel. We can move from one scene to another or run multiple screens at the same time. Scenes can overlay each other or can be placed adjacent to each other and all we have to do is to change the camera position to move from once scene to another. Scenes are much powerful now since they are now self-contained games in their own right with all game objects such as input, camera, tweens etc available to them. Scenes are managed by The Scene Manager but we would never need to access anything via The Scene Manager. Everything a game requires would be available inside scene itself.<\/p>\n
Read all about scenes in the Phaser 3 devlogs\u00a0here<\/a>\u00a0and\u00a0here<\/a>. Its a must read.<\/p>\nThe work so far gives us a screen as following<\/p>\n
![\"\"](\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/02\/Phaser3_Placeholder-300x172.png\")
<\/p>\n
Now let us center align our game in the html. Add following style to canvas element<\/p>\n
canvas{\r\n display:block;\r\n margin: 0;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}<\/pre>\nWe will add this class in css file and load the css in html. Now we have an app.css file in css folder as following<\/p>\n
body {\r\n padding: 0px;\r\n margin: 0px;\r\n background: #000;\r\n overflow-x: hidden;\r\n\tfont-family:cursive;\r\n}\r\ncanvas{\r\n display:block;\r\n margin: 0;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}<\/pre>\nhtml file is changed to<\/p>\n
<html>\r\n <head>\r\n <title>Peg Solitaire<\/title>\r\n <meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no\">\r\n <link rel=\"stylesheet\" href=\"css\/app.css\">\r\n \r\n <script src=\"js\/phaser.min.js\"><\/script>\r\n <\/head>\r\n <body>\r\n <script src=\"js\/game.js\"><\/script>\r\n <\/body>\r\n<\/html><\/pre>\nAlso changed the background color of the game so now our empty game looks like following<\/p>\n
![\"\"](\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/02\/Phaser3_Placeholder1-300x209.png\")
<\/p>\n
We are going to create an english board. First we need to import a spritesheet which contains the images we are going to use in this game. I have a simple 3 image spritesheet as following<\/p>\n
![\"\"](\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/02\/pegs.png\")
<\/p>\n
We will import the spritesheet in preload method<\/p>\n
preload() {\r\n this.load.spritesheet(\"pegs\", \"images\/pegs.png\", {\r\n frameWidth: 60,\r\n frameHeight: 60\r\n });\r\n }<\/pre>\nNow we are going to draw the board<\/p>\n
class TheGame extends Phaser.Scene {\r\n\r\n constructor() {\r\n super(\"TheGame\");\r\n }\r\n\r\n preload() {\r\n this.load.spritesheet(\"pegs\", \"images\/pegs.png\", {\r\n frameWidth: 60,\r\n frameHeight: 60\r\n });\r\n }\r\n\r\n create() {\r\n this.boardDef = [\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [1, 1, 1, 1, 1, 1, 1],\r\n [1, 1, 1, 0, 1, 1, 1],\r\n [1, 1, 1, 1, 1, 1, 1],\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [-1, -1, 1, 1, 1, -1, -1]\r\n ];\r\n\r\n \/\/ add our sprites\r\n this.board = [];\r\n this.selectedPeg = null;\r\n\r\n for (let i = 0, len = this.boardDef.length; i < len; i++) {\r\n let r = this.boardDef[i];\r\n let row = [];\r\n this.board.push(row);\r\n for (let j = 0, cnt = r.length; j < cnt; j++) {\r\n let c = r[j];\r\n if (c >= 0) {\r\n let cell = this.add.image(30 + i * 60, 30 + j * 60, \"pegs\");\r\n cell.setFrame(c > 0 ? 1 : 0);\r\n cell.setOrigin(0);\r\n row.push(cell);\r\n } else {\r\n row.push(null);\r\n }\r\n }\r\n }\r\n }\r\n\r\n clickPeg(peg) {\r\n }\r\n}<\/pre>\nNow we have drawn the\u00a0board as following<\/p>\n
![\"\"](\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/02\/Phaser3_Peg_Game_1-300x240.png\")
<\/p>\n
In this code we have added the images to their positions.\u00a0The game play\u00a0can be done by simply changing the frame\u00a0according to the rules. No heavy processing or complex logic is required in the game (unless we want to add automatic solver for the game).<\/p>\n
One important change in Phaser 3 from Phaser 2 is that all images or sprites are by default positioned from center (in Phaser 2 this started from top left corner) so if we want to change it to top left corner then we can use setOrigin method and set it to 0.<\/p>\n
Now let us simply add some event and game code<\/p>\n
class TheGame extends Phaser.Scene {\r\n\r\n constructor() {\r\n super(\"TheGame\");\r\n }\r\n\r\n preload() {\r\n this.load.spritesheet(\"pegs\", \"images\/pegs.png\", {\r\n frameWidth: 60,\r\n frameHeight: 60\r\n });\r\n }\r\n\r\n create() {\r\n this.boardDef = [\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [1, 1, 1, 1, 1, 1, 1],\r\n [1, 1, 1, 0, 1, 1, 1],\r\n [1, 1, 1, 1, 1, 1, 1],\r\n [-1, -1, 1, 1, 1, -1, -1],\r\n [-1, -1, 1, 1, 1, -1, -1]\r\n ];\r\n\r\n \/\/ If a Game Object is clicked on, this event is fired.\r\n \/\/ We can use it to emit the 'clicked' event on the game object itself.\r\n this.input.on('gameobjectup', function (pointer, gameObject) {\r\n gameObject.emit('clicked', gameObject);\r\n }, this);\r\n\r\n \/\/ add our sprites\r\n this.board = [];\r\n this.selectedPeg = null;\r\n\r\n for (let i = 0, len = this.boardDef.length; i < len; i++) {\r\n let r = this.boardDef[i];\r\n let row = [];\r\n this.board.push(row);\r\n for (let j = 0, cnt = r.length; j < cnt; j++) {\r\n let c = r[j];\r\n if (c >= 0) {\r\n let cell = this.add.image(30 + i * 60, 30 + j * 60, \"pegs\");\r\n cell.setFrame(c > 0 ? 1 : 0);\r\n cell.setOrigin(0);\r\n\r\n \/\/ enable input events\r\n cell.setInteractive();\r\n cell.on('clicked', this.clickPeg, this);\r\n cell.gridX = i;\r\n cell.gridY = j;\r\n row.push(cell);\r\n } else {\r\n row.push(null);\r\n }\r\n }\r\n }\r\n }\r\n\r\n clickPeg(peg) {\r\n if (peg.frame.name === 0) {\r\n \/\/ if we have not selected a peg to jump then no need to move any further\r\n if (!this.selectedPeg)\r\n return;\r\n\r\n let clickedX = peg.gridX;\r\n let clickedY = peg.gridY;\r\n let selectedX = this.selectedPeg.gridX;\r\n let selectedY = this.selectedPeg.gridY;\r\n\r\n if ((clickedX + 2 === selectedX || clickedX - 2 === selectedX) && clickedY === selectedY) {\r\n \/\/ move horizontal\r\n let pegToRemove = this.board[(selectedX + clickedX) \/ 2][clickedY];\r\n if (pegToRemove.frame.name === 0)\r\n return;\r\n\r\n pegToRemove.setFrame(0);\r\n peg.setFrame(1);\r\n this.selectedPeg.setFrame(0);\r\n this.selectedPeg = null;\r\n\r\n } else if ((clickedY + 2 === selectedY || clickedY - 2 === selectedY) && clickedX === selectedX) {\r\n \/\/ move vertical\r\n let pegToRemove = this.board[clickedX][(selectedY + clickedY) \/ 2];\r\n if (pegToRemove.frame.name === 0)\r\n return;\r\n\r\n pegToRemove.setFrame(0);\r\n peg.setFrame(1);\r\n this.selectedPeg.setFrame(0);\r\n this.selectedPeg = null;\r\n }\r\n\r\n } else {\r\n if (this.selectedPeg) {\r\n if (peg === this.selectedPeg) {\r\n peg.setFrame(1);\r\n this.selectedPeg = null;\r\n } else {\r\n this.selectedPeg.setFrame(1);\r\n this.selectedPeg = peg;\r\n peg.setFrame(2);\r\n }\r\n } else {\r\n this.selectedPeg = peg;\r\n peg.setFrame(2);\r\n }\r\n }\r\n }\r\n}<\/pre>\nNow we have a working Peg Solitaire game in about 100 lines of code. I have highlighted the code used for adding the event which was taken right out of the example on Phaser 3 demo site. You can try the code at work below<\/p>\n\n\n