\/\/make an alignment grid\r\nthis.agrid = new AlignGrid(5, 5);<\/pre>\nFor debugging we can turn on the grid<\/p>\n
\/\/for debugging\r\nthis.agrid.show();<\/pre>\nAnd this is the result:<\/p>\n
![\"\"](\"https:\/\/media.publit.io\/file\/w_230,h_300,c_fit,q_80\/websiteImages\/phasergames\/grid2.jpg\")
<\/p>\n
Now, let’s add in the rings, and we will set the background color to gray<\/p>\n
\/\/add the rings to the game\r\n \/\/\r\n this.ring1 = game.add.sprite(0, 0, \"ring\");\r\n this.ring2 = game.add.sprite(0, 0, \"ring\");\r\n \/\/set the rings' anchors\r\n \/\/\r\n this.ring1.anchor.set(0.5, 0.5);\r\n this.ring2.anchor.set(0.5, 0.5);<\/pre>\nThe reason for setting the rings’ x and y positions at 0,0 is because we will be placing the rings with the grid class<\/p>\n
this.agrid.placeAt(x,y,sprite);<\/p>\n
the x and y positions start at 0<\/p>\n
\/\/Align the rings to the grid\r\n\/\/\r\nthis.agrid.placeAt(1, 3, this.ring1);\r\nthis.agrid.placeAt(3, 3, this.ring2);<\/pre>\nWe also need to scale the rings by getting the game.width to sprite.width ratio. You can find this by using the Align utility<\/p>\n
Align.getScaleToGameW(this.ring1);<\/pre>\nThis will log out to the browser’s developer panel<\/p>\n
I get the output:0.2916666666666667<\/p>\n
We then set the scale of the rings based on that<\/p>\n
Align.scaleToGameW(this.ring1, 0.29166);\r\nAlign.scaleToGameW(this.ring2, 0.29166);<\/pre>\nYou will not see any visible changes unless you switch to view in a mobile view.<\/p>\n
Here is how it looks now on the laptop version<\/p>\n
![\"\"](\"https:\/\/media.publit.io\/file\/w_224,h_300,c_fit,q_80\/websiteImages\/phasergames\/desktop.jpg\")
<\/p>\n
If you turn off the scaling, here is how it looks on the iPad. Notice that the rings are smaller than the cells.<\/p>\n
![\"\"](\"https:\/\/media.publit.io\/file\/w_226,h_300,c_fit,q_80\/websiteImages\/phasergames\/noscaling.png\")
<\/p>\n
With the scaling turned on, the rings are scaled correctly<\/p>\n
![\"\"](\"https:\/\/media.publit.io\/file\/w_226,h_300,c_fit,q_80\/websiteImages\/phasergames\/scaling-2.jpg\")
<\/p>\n
<\/p>\n
Flipping the ring<\/p>\n
To keep track of what color the ring is, we will set a custom property of color in the ring sprite<\/p>\n
\/\/set the rings' initial color\r\nthis.ring1.color = 1;\r\nthis.ring2.color = 1;<\/pre>\nLet’s now make a function to flip the rings.<\/p>\n
When you first create a sprite, the angle is a 0, if the angle is 0, then we change the angle to 180, or vice versa. We will also update the color based on the angle.<\/p>\n
changeRing(target) {\r\n \/\/whatever the ring is\r\n \/\/change it\r\n if (target.angle == 0) {\r\n target.angle = 180;\r\n target.color = 0;\r\n } else {\r\n target.angle = 0;\r\n target.color = 1;\r\n }\r\n },<\/pre>\nNow we set the listeners to flip the rings<\/p>\n
In the create function<\/p>\n
\/\/set listeners\r\nthis.ring1.inputEnabled = true;\r\nthis.ring2.inputEnabled = true;\r\nthis.ring1.events.onInputDown.add(this.changeRing, this);\r\nthis.ring2.events.onInputDown.add(this.changeRing, this);<\/pre>\nClicking the rings will now flip them.<\/p>\n
Making the Dots<\/h3>\n
We need to have two dots fall at the same time, so we will make a group of two dots called a row.<\/p>\n
We will also need a group to hold the rows<\/p>\n
In the create function<\/p>\n
\/\/make a group to hold the rows of dots\r\nthis.rowGroup = game.add.group();<\/pre>\nLet’s set up a function to make the rows.<\/p>\n
makeRow() {\r\n \/\/\r\n \/\/\r\n \/* make a group to hold the dots*\/\r\n var dotGroup = game.add.group();\r\n\r\n \/\/make the left dot\r\n var dot1 = game.add.sprite(0, 0, \"dots\");\r\n\r\n \/\/set the anchor\r\n dot1.anchor.set(0.5, 0.5);\r\n\r\n \/\/scale it to the game\r\n Align.scaleToGameW(dot1, 0.083);\r\n\r\n \/\/put the dot on a random frame \r\n dot1.frame = game.rnd.integerInRange(0, 1);\r\n \r\n \/\/make the right dot\r\n var dot2 = game.add.sprite(0, 0, \"dots\");\r\n \/\/set the anchor\r\n dot2.anchor.set(0.5, 0.5);\r\n \/\/scale it to the game\r\n Align.scaleToGameW(dot2, 0.083);\r\n \/\/put the dot on a random frame \r\n dot2.frame = game.rnd.integerInRange(0, 1);\r\n\r\n \/\/line up the dots on the grid\r\n this.agrid.placeAt(1, 1, dot1);\r\n this.agrid.placeAt(3, 1, dot2);\r\n\r\n \/\/add the dots to the group\r\n dotGroup.add(dot1);\r\n dotGroup.add(dot2);\r\n\r\n \/\/although we lined up the grid\r\n \/\/it is important to make sure the dot\r\n \/\/y position is at 0\r\n dot1.y = 0;\r\n dot2.y = 0;\r\n\r\n \/\/place the group off the top of the screen\r\n dotGroup.y = -100;\r\n\r\n \/\/when the dotGroup gets too low \r\n \/\/we need to add a new row\r\n \/\/since we need to do this only once, we set a flag\r\n \/\/in the group\r\n dotGroup.triggerFlag = false;\r\n \/\/when the dotGroup gets too low \r\n \/\/we need to check if the dots match\r\n \/\/since we need to do this only once, we set a flag\r\n \/\/in the group\r\n dotGroup.checkFlag = false;\r\n \r\n this.rowGroup.add(dotGroup);\r\n }<\/pre>\nAt the end of the create function call the makeRow function<\/p>\n
this.makeRow();<\/pre>\n <\/p>\n
Making the rows fall<\/h3>\n
To be able to change the speed set up a variable in the create function<\/p>\n
this.speed = 2.5;<\/pre>\nWe will move everything down with the code in the update function<\/p>\n
update: function() {\r\n this.rowGroup.forEach(function(row) {\r\n \/\/update the row's y positons\r\n row.y += this.speed;\r\n \/\/\r\n \/\/if the row is greater than 25% of the \r\n \/\/game's height make a new row if we\r\n \/\/have not done so already\r\n if (row.y < game.height \/ 4 && row.triggerFlag == false) {\r\n row.triggerFlag = true;\r\n this.makeRow();\r\n }\r\n \/\/\r\n \/\/if the row is greater than the hit point\r\n \/\/and we have not checked already\r\n if (row.y < this.hitPoint && row.checkFlag == false) {\r\n row.checkFlag = true;\r\n\r\n \/\/get the dots from the row\r\n var dot1 = row.getChildAt(0);\r\n var dot2 = row.getChildAt(1);\r\n\r\n \/\/check if the dots frames are equal to the ring's colors\r\n if (dot1.frame == this.ring1.color && dot2.frame == this.ring2.color) {\r\n \r\n \/\/every five points up the speed\r\n if (model.score \/ 5 == Math.floor(model.score \/ 5)) {\r\n this.speed += .5;\r\n }\r\n \/\/destory the row\r\n row.destroy();\r\n } else {\r\n \r\n \/\/call the game over\r\n game.state.start(\"StateOver\");\r\n }\r\n }\r\n }.bind(this));<\/pre>\nYour game should now look like this<\/p>\n
![\"\"](\"https:\/\/media.publit.io\/file\/w_224,h_300,c_fit,q_80\/websiteImages\/phasergames\/falling.png\")
<\/p>\n
Adding Components<\/h3>\n
This is where the Ultra template will save you a lot of time with its built-in components<\/p>\n
Adding the score box<\/h4>\n
In the create function<\/p>\n
\/\/ make an instance of the scorebox and align it on the grid\r\nthis.scoreBox = new ScoreBox();\r\nthis.agrid.placeAt(2, 0, this.scoreBox);<\/pre>\n![\"\"](\"https:\/\/media.publit.io\/file\/w_88,h_52,c_fit,q_80\/websiteImages\/phasergames\/scorebox.png\")
<\/p>\n
You can change the font size and color or the components in the js\\themes\\blueTheme.js file<\/p>\n
Adding the sound Buttons<\/h4>\n
In the create function<\/p>\n
\/\/add sound buttons to the state\r\nvar soundButtons = new SoundButtons();<\/pre>\n![\"\"](\"https:\/\/media.publit.io\/file\/w_480,h_67,c_fit,q_80\/websiteImages\/phasergames\/soundbuttons.jpg\")
<\/p>\n
These buttons will toggle on and off the sound and music<\/p>\n
Events<\/h3>\n
The template is event-driven, and there is an instance of a Phaser.Signal class called eventDispatcher<\/p>\n
To Increase the Score<\/h4>\n
This will be dispatched if the colors match the rings<\/p>\n
\/\/up the score\r\neventDispatcher.dispatch(G.UP_SCORE, 1);<\/pre>\nThe score is held in model.score and this event will trigger updates in the scoreBox<\/p>\n
in the create function at the top, we need to clear the score if the player\u00a0<\/span>hits play again<\/p>\nmodel.score=0;<\/pre>\nPlaying a sound<\/h3>\n
to play a sound we dispatch a G.PLAY_SOUND event<\/p>\n
eventDispatcher.dispatch(G.PLAY_SOUND,soundKey);<\/pre>\nWe will use the beep key if the colors match and hit if they do not<\/p>\n
Increasing the speed<\/p>\n
For every five points we will increase the speed. Place this code right after the score is updated<\/p>\n
\/\/every five points up the speed\r\nif (model.score \/ 5 == Math.floor(model.score \/ 5)) {\r\n this.speed += .5;\r\n }<\/pre>\nYour stateMain file should now look like this<\/p>\n
var StateMain = {\r\n preload: function() {},\r\n create: function() {\r\n this.speed = 2.5;\r\n model.score = 0;\r\n \/\/keep this line\r\n \/\/to tell the game what state we are in!\r\n model.state = \"main\";\r\n \/\/make an aligment grid\r\n this.agrid = new AlignGrid(5, 5);\r\n \/\/\r\n \/\/for debugging\r\n this.agrid.show();\r\n \/\/ \r\n \/\/ make an instance of the scorebox and align it on the grid\r\n this.scoreBox = new ScoreBox();\r\n this.agrid.placeAt(2, 0, this.scoreBox);\r\n\r\n \/\/add sound buttons to the state\r\n var soundButtons = new SoundButtons();\r\n \/\/\r\n \/\/\r\n \/\/background color\r\n game.stage.backgroundColor = \"#212F3F\";\r\n \/\/\r\n \/\/\r\n \/\/add the rings to the game\r\n \/\/\r\n this.ring1 = game.add.sprite(0, 0, \"ring\");\r\n this.ring2 = game.add.sprite(0, 0, \"ring\");\r\n \/\/set the rings' anchors\r\n \/\/\r\n this.ring1.anchor.set(0.5, 0.5);\r\n this.ring2.anchor.set(0.5, 0.5);\r\n \/\/Align the rings to the grid\r\n \/\/\r\n this.agrid.placeAt(1, 3, this.ring1);\r\n this.agrid.placeAt(3, 3, this.ring2);\r\n \/\/\r\n \/\/\r\n \/\/set the rings' initial color\r\n this.ring1.color = 1;\r\n this.ring2.color = 1;\r\n \/\/\r\n \/\/\r\n \/\/\r\n Align.scaleToGameW(this.ring1, 0.29166);\r\n Align.scaleToGameW(this.ring2, 0.29166);\r\n \/\/\r\n \/\/\r\n \/\/\r\n \/\/\r\n \/\/\r\n \/\/\r\n \/\/set listeners\r\n this.ring1.inputEnabled = true;\r\n this.ring2.inputEnabled = true;\r\n this.ring1.events.onInputDown.add(this.changeRing, this);\r\n this.ring2.events.onInputDown.add(this.changeRing, this);\r\n \/\/\r\n \/\/\r\n \/\/Define a y point where the rings will \r\n \/\/be compared to the dots\r\n \/\/we will set this just above the rings\r\n this.hitPoint = this.ring1.y - this.ring1.height \/ 2;\r\n \/\/\r\n \/\/make a group to hold the rows of dots\r\n this.rowGroup = game.add.group();\r\n \/\/\r\n \/\/\r\n \/\/make a new row of dots for falling\r\n this.makeRow();\r\n \/\/\r\n },\r\n changeRing(target) {\r\n \/\/whatever the ring is\r\n \/\/change it\r\n if (target.angle == 0) {\r\n target.angle = 180;\r\n target.color = 0;\r\n } else {\r\n target.angle = 0;\r\n target.color = 1;\r\n }\r\n \/\/\r\n \/\/play the click sound\r\n eventDispatcher.dispatch(G.PLAY_SOUND, \"click\");\r\n },\r\n makeRow() {\r\n \/\/\r\n \/\/\r\n \/* make a group to hold the dots*\/\r\n var dotGroup = game.add.group();\r\n\r\n \/\/make the left dot\r\n var dot1 = game.add.sprite(0, 0, \"dots\");\r\n\r\n \/\/set the anchor\r\n dot1.anchor.set(0.5, 0.5);\r\n\r\n \/\/scale it to the game\r\n Align.scaleToGameW(dot1, 0.083);\r\n\r\n \/\/put the dot on a random frame \r\n dot1.frame = game.rnd.integerInRange(0, 1);\r\n \r\n \/\/make the right dot\r\n var dot2 = game.add.sprite(0, 0, \"dots\");\r\n \/\/set the anchor\r\n dot2.anchor.set(0.5, 0.5);\r\n \/\/scale it to the game\r\n Align.scaleToGameW(dot2, 0.083);\r\n \/\/put the dot on a random frame \r\n dot2.frame = game.rnd.integerInRange(0, 1);\r\n\r\n \/\/line up the dots on the grid\r\n this.agrid.placeAt(1, 1, dot1);\r\n this.agrid.placeAt(3, 1, dot2);\r\n\r\n \/\/add the dots to the group\r\n dotGroup.add(dot1);\r\n dotGroup.add(dot2);\r\n\r\n \/\/although we lined up the grid\r\n \/\/it is important to make sure the dot\r\n \/\/y position is at 0\r\n dot1.y = 0;\r\n dot2.y = 0;\r\n\r\n \/\/place the group off the top of the screen\r\n dotGroup.y = -100;\r\n\r\n \/\/when the dotGroup gets too low \r\n \/\/we need to add a new row\r\n \/\/since we need to do this only once, we set a flag\r\n \/\/in the group\r\n dotGroup.triggerFlag = false;\r\n \/\/when the dotGroup gets too low \r\n \/\/we need to check if the dots match\r\n \/\/since we need to do this only once, we set a flag\r\n \/\/in the group\r\n dotGroup.checkFlag = false;\r\n\r\n this.rowGroup.add(dotGroup);\r\n },\r\n update: function() {\r\n this.rowGroup.forEach(function(row) {\r\n \/\/update the row's y positons\r\n row.y += this.speed;\r\n \/\/\r\n \/\/if the row is greater than 25% of the \r\n \/\/game's height make a new row if we\r\n \/\/have not done so already\r\n if (row.y < game.height \/ 4 && row.triggerFlag == false) {\r\n row.triggerFlag = true;\r\n this.makeRow();\r\n }\r\n \/\/\r\n \/\/if the row is greater than the hit point\r\n \/\/and we have not checked already\r\n if (row.y < this.hitPoint && row.checkFlag == false) {\r\n row.checkFlag = true;\r\n\r\n \/\/get the dots from the row\r\n var dot1 = row.getChildAt(0);\r\n var dot2 = row.getChildAt(1);\r\n\r\n \/\/check if the dots frames are equal to the ring's colors\r\n if (dot1.frame == this.ring1.color && dot2.frame == this.ring2.color) {\r\n \/\/play the beep\r\n eventDispatcher.dispatch(G.PLAY_SOUND, \"beep\");\r\n \/\/up the score\r\n eventDispatcher.dispatch(G.UP_SCORE, 1);\r\n\r\n \/\/every five points up the speed\r\n if (model.score \/ 5 == Math.floor(model.score \/ 5)) {\r\n this.speed += .5;\r\n }\r\n \/\/destory the row\r\n row.destroy();\r\n } else {\r\n \/\/play the hit sound\r\n eventDispatcher.dispatch(G.PLAY_SOUND, \"hit\");\r\n \/\/call the game over\r\n game.state.start(\"StateOver\");\r\n }\r\n }\r\n }.bind(this));\r\n }\r\n}<\/pre>\nThere are also resources to put together a title screen. See my tutorial on how to put together a title screen here<\/a>.<\/p>\n\n Play Now!<\/span><\/a>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Making a Phaser game in an 2 hours Most of the time I spend about a week or two on a game for my office, mostly refining things based on suggestions the team has made. When I’m doing my own games, however, there are times that I want to bust out a game in an […]<\/p>\n","protected":false},"author":1,"featured_media":3938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[31,32],"tags":[],"class_list":["post-3002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-phaser-intermediate"],"yoast_head":"\n
Falling Dots 2 hour game - Phaser Games<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Falling Dots 2 hour game - Phaser Games\" \/>\n<meta property=\"og:description\" content=\"Making a Phaser game in an 2 hours Most of the time I spend about a week or two on a game for my office, mostly refining things based on suggestions the team has made. When I’m doing my own games, however, there are times that I want to bust out a game in an […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/\" \/>\n<meta property=\"og:site_name\" content=\"Phaser Games\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-11T10:21:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/775-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"William\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"William\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/\",\"url\":\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/\",\"name\":\"Falling Dots 2 hour game - Phaser Games\",\"isPartOf\":{\"@id\":\"https:\/\/phasergames.com\/#website\"},\"datePublished\":\"2018-01-11T10:21:22+00:00\",\"dateModified\":\"2018-01-11T10:21:22+00:00\",\"author\":{\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\"},\"breadcrumb\":{\"@id\":\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phasergames.com\/falling-dots-2-hour-game\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phasergames.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Falling Dots 2 hour game\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/phasergames.com\/#website\",\"url\":\"https:\/\/phasergames.com\/\",\"name\":\"Phaser Games\",\"description\":\"Tutorials Code and Resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/phasergames.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951\",\"name\":\"William\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/phasergames.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g\",\"caption\":\"William\"},\"url\":\"https:\/\/phasergames.com\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Falling Dots 2 hour game - Phaser Games","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/","og_locale":"en_US","og_type":"article","og_title":"Falling Dots 2 hour game - Phaser Games","og_description":"Making a Phaser game in an 2 hours Most of the time I spend about a week or two on a game for my office, mostly refining things based on suggestions the team has made. When I’m doing my own games, however, there are times that I want to bust out a game in an […]","og_url":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/","og_site_name":"Phaser Games","article_published_time":"2018-01-11T10:21:22+00:00","og_image":[{"width":1200,"height":1200,"url":"https:\/\/media.publit.io\/file\/w_1200,h_1200,c_fit,q_80\/websiteImages\/phasergames\/775-2.jpg","type":"image\/jpeg"}],"author":"William","twitter_card":"summary_large_image","twitter_misc":{"Written by":"William","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/","url":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/","name":"Falling Dots 2 hour game - Phaser Games","isPartOf":{"@id":"https:\/\/phasergames.com\/#website"},"datePublished":"2018-01-11T10:21:22+00:00","dateModified":"2018-01-11T10:21:22+00:00","author":{"@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951"},"breadcrumb":{"@id":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phasergames.com\/falling-dots-2-hour-game\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/phasergames.com\/falling-dots-2-hour-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phasergames.com\/"},{"@type":"ListItem","position":2,"name":"Falling Dots 2 hour game"}]},{"@type":"WebSite","@id":"https:\/\/phasergames.com\/#website","url":"https:\/\/phasergames.com\/","name":"Phaser Games","description":"Tutorials Code and Resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/phasergames.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en"},{"@type":"Person","@id":"https:\/\/phasergames.com\/#\/schema\/person\/b434f42d364f46cafe18233abe7db951","name":"William","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/phasergames.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dc3c530c4e0428b7d6f496d147d5b29?s=96&d=mm&r=g","caption":"William"},"url":"https:\/\/phasergames.com\/author\/admin\/"}]}},"featured_image_src":"https:\/\/media.publit.io\/file\/w_600,h_400,c_fill,q_80\/websiteImages\/phasergames\/775-2.jpg","featured_image_src_square":"https:\/\/media.publit.io\/file\/w_600,h_600,c_fill,q_80\/websiteImages\/phasergames\/775-2.jpg","author_info":{"display_name":"William","author_link":"https:\/\/phasergames.com\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/3002"}],"collection":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/comments?post=3002"}],"version-history":[{"count":17,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/3002\/revisions"}],"predecessor-version":[{"id":3947,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/posts\/3002\/revisions\/3947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media\/3938"}],"wp:attachment":[{"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/media?parent=3002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/categories?post=3002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phasergames.com\/wp-json\/wp\/v2\/tags?post=3002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/media.publit.io\/file\/w_224,h_300,c_fit,q_80\/websiteImages\/phasergames\/sample.jpg\")
<\/p>\n\t