Added Matching Pairs game and updated fixed to camera example.

Author: photonstorm

README.md

@@ -12,7 +12,7 @@ By Richard Davey, [Photon Storm](http://www.photonstorm.com)
 View the [Official Website](http://phaser.io)<br />
 Follow on [Twitter](https://twitter.com/photonstorm)<br />
 Join the [Forum](http://www.html5gamedevs.com/forum/14-phaser/)<br />
-Try out 160+ [Phaser Examples](http://gametest.mobi/phaser/examples/)
+Try out 170+ [Phaser Examples](http://gametest.mobi/phaser/examples/)
 
 [Subscribe to our new Phaser Newsletter](https://confirmsubscription.com/h/r/369DE48E3E86AF1E). We'll email you when new versions are released as well as send you our regular Phaser game making magazine.
 
@@ -47,10 +47,9 @@ Version 1.1.4 - "Kandor" - In development
 New features:
 
 * Added a stage.fullScreenScaleMode property to determine scaling when fullscreen (thanks oysterCrusher)
-* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe)
 * Added support for margin and spacing around a frame in Loader.spritesheet.
 * Added Device.vibration to check if the Vibration API is available or not.
-* Added Device.trident and Device.tridentVersion for testing IE11 and forced IE11 to Canvas renderer until pixi updates to support it.
+* Added Device.trident and Device.tridentVersion for testing IE11.
 
 New Examples:
 
@@ -59,6 +58,8 @@ New Examples:
 * Physics - Bounce accelerator (use the keyboard) by Patrick OReilly.
 * Physics - Bounce knock (use the keyboard) by Patrick OReilly.
 * Physics - Snake (use the keyboard to control the snake like creature) by Patrick OReilly and Richard Davey.
+* Added touch joystick example showing how to use the clay.io virtual game controller (thanks gabehollombe)
+* Games - Matching Pairs by Patrick OReilly.
 
 Updates:
 
@@ -72,6 +73,10 @@ Updates:
 * separateY updated to re-implement the 'riding platforms' special condition (thanks cocoademon)
 * SoundManager.onSoundDecode now dispatches the key followed by the sound object, also now dispatched by the Cache when doing an auto-decode on load.
 * Switch method of using trimmed sprites to support scaling and rotation (thanks cocoademon)
+* Most of the GameObjectFactory functions now have a group parameter, so you can do: game.add.sprite(x, y, frame, frameName, group) rather than defaulting to the World group.
+* Group.countLiving and countDead used to return -1 if the Group was empty, but now return 0.
+* Text can now be fixedToCamera, updated world/fixed to camera example to show this.
+
 
 Bug Fixes:
 
@@ -203,11 +208,13 @@ Version 1.1.4 ("Kandor")
 
 Versions 1.2 ("Saldaea")
 
-* Integration with an advanced physics system. We've been experimenting with p2.js but have yet to conclude our research.
-* A more advanced Particle system, one that can render to a single canvas (rather than spawn hundreds of Sprites), more advanced effects, etc.
+* Integration with the p2.js physics system.
 
-Version 1.2+
+Beyond version 1.2
 
+* Dedicated CocoonJS packaging features (screencanvas, etc)
+* The ability to pass in a configuration option on Game boot, containing more advanced configuration features.
+* A more advanced Particle system, one that can render to a single canvas (rather than spawn hundreds of Sprites), more advanced effects, etc.
 * Massively enhance the audio side of Phaser. Although it does what it does well, it could do with taking more advantage of Web Audio - echo effects, positional sound, etc.
 * Comprehensive testing across Firefox OS devices, CocoonJS and Ejecta.
 * Integration with third party services like Google Play Game Services and Amazon JS SDK.
@@ -225,7 +232,7 @@ Version 1.2+
 Learn By Example
 ----------------
 
-Phaser comes with an ever growing suite of Examples. Personally I feel that we learn better by looking at small refined code examples, so we created over 150 of them and create new ones to test every new feature added. Inside the `examples` folder you'll find the current set. If you write a particularly good example then please send it to us.
+Phaser comes with an ever growing suite of Examples. Personally I feel that we learn better by looking at small refined code examples, so we created over 170 of them and create new ones to test every new feature added. Inside the `examples` folder you'll find the current set. If you write a particularly good example then please send it to us.
 
 The examples need to be run through a local web server (in order to avoid file access permission errors from your browser). You can use your own web server, or start the included web server using grunt.
 

examples/games/matching pairs.js

@@ -0,0 +1,223 @@
+// mods by Patrick OReilly 
+// Twitter: @pato_reilly Web: http://patricko.byethost9.com
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.tilemap('matching', 'assets/maps/phaser_tiles.json', null, Phaser.Tilemap.TILED_JSON);
+    game.load.tileset('tiles', 'assets/tiles/phaser_tiles.png', 100, 100, -1, 1, 1);
+
+}
+
+var timeCheck = 0;
+var flipFlag = false;
+
+var startList = new Array();
+var squareList = new Array();
+
+var masterCounter = 0;
+var squareCounter = 0;
+var square1Num;
+var square2Num;
+var savedSquareX1;
+var savedSquareY1;
+var savedSquareX2;
+var savedSquareY2;
+
+var map;
+var tileset;
+var layer;
+
+var marker;
+var currentTile;
+var currentTilePosition;
+
+var tileBack = 25;
+var timesUp = '+';
+var youWin = '+';
+
+function create() {
+
+    map = game.add.tilemap('matching');
+
+    tileset = game.add.tileset('tiles');
+
+    layer = game.add.tilemapLayer(0, 0, 600, 600, tileset, map, 0);
+
+    marker = game.add.graphics();
+    marker.lineStyle(2, 0x00FF00, 1);
+    marker.drawRect(0, 0, 100, 100);
+
+    randomizeTiles();
+
+}
+
+function update() {
+
+    countDownTimer();
+
+    if (layer.getTileX(game.input.activePointer.worldX) <= 5) // to prevent the marker from going out of bounds
+    {
+        marker.x = layer.getTileX(game.input.activePointer.worldX) * 100;
+        marker.y = layer.getTileY(game.input.activePointer.worldY) * 100;
+    }
+
+    if (flipFlag == true)
+    {
+        if (game.time.now - timeCheck > 1000)
+        {
+            flipBack();
+        }
+    }
+    else
+    {
+        processClick();
+    }
+
+}
+
+function countDownTimer() {
+
+    var timeLimit = 120;
+
+    myTime = game.time.now;
+    mySeconds = parseInt(myTime / 1000);
+    myCountdownSeconds = timeLimit - mySeconds;
+
+    if (myCountdownSeconds <= 0)
+    {
+        // time is up
+        timesUp = 'Time is up!';
+    }
+
+}
+
+function processClick() {
+
+    currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y));
+    currentTilePosition = ((layer.getTileY(game.input.activePointer.worldY) + 1) * 6) - (6 - (layer.getTileX(game.input.activePointer.worldX) + 1));
+
+    if (game.input.mousePointer.isDown)
+    {
+        // check to make sure the tile is not already flipped
+        if (currentTile == tileBack)
+        {
+            // get the corresponding item out of squareList
+            currentNum = squareList[currentTilePosition - 1];
+            flipOver();
+            squareCounter++;
+
+            // is the second tile of pair flipped?
+            if (squareCounter == 2)
+            {
+                // reset squareCounter
+                squareCounter = 0;
+                square2Num = currentNum;
+
+                // check for match
+                if (square1Num == square2Num)
+                {
+                    masterCounter++;
+
+                    if (masterCounter == 18)
+                    {
+                        // go "win"
+                        youWin = 'Got them all!';
+                    }
+                }
+                else
+                {
+                    savedSquareX2 = layer.getTileX(marker.x);
+                    savedSquareY2 = layer.getTileY(marker.y);
+                    flipFlag = true;
+                    timeCheck = game.time.now;
+                }
+            }
+            else
+            {
+                savedSquareX1 = layer.getTileX(marker.x);
+                savedSquareY1 = layer.getTileY(marker.y);
+                square1Num = currentNum;
+            }
+        }
+    }
+}
+
+function flipOver() {
+
+    map.putTile(currentNum, layer.getTileX(marker.x), layer.getTileY(marker.y));
+}
+
+function flipBack() {
+
+    flipFlag = false;
+
+    map.putTile(tileBack, savedSquareX1, savedSquareY1);
+    map.putTile(tileBack, savedSquareX2, savedSquareY2);
+
+}
+
+function randomizeTiles() {
+
+    for (num = 1; num <= 18; num++)
+    {
+        startList.push(num);
+    }
+    
+    for (num = 1; num <= 18; num++)
+    {
+        startList.push(num);
+    }
+
+    // for debugging
+    myString1 = startList.toString();
+
+    // randomize squareList
+    for (i = 1; i <= 36; i++)
+    {
+        randomPosition = game.rnd.integerInRange(0, startList.length);
+
+        thisNumber = startList[randomPosition];
+
+        squareList.push(thisNumber);
+
+        a = startList.indexOf(thisNumber);
+
+        startList.splice(a, 1);
+    }
+
+    // for debugging
+    myString2 = squareList.toString();
+
+    for (col = 0; col < 6; col++)
+    {
+        for (row = 0; row < 6; row++)
+        {
+            map.putTile(tileBack, col, row);
+        }
+    }
+}
+
+function getHiddenTile() {
+
+    thisTile = squareList[currentTilePosition - 1];
+    return thisTile;
+}
+
+function render() {
+
+    game.debug.renderText(timesUp, 620, 208, 'rgb(0,255,0)');
+    game.debug.renderText(youWin, 620, 240, 'rgb(0,255,0)');
+
+    game.debug.renderText('Time: ' + myCountdownSeconds, 620, 15, 'rgb(0,255,0)');
+    game.debug.renderText('Matched Pairs: ' + masterCounter, 620, 304, 'rgb(0,0,255)');
+    game.debug.renderText('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 620, 48, 'rgb(255,0,0)');
+
+    game.debug.renderText('LayerX: ' + layer.getTileX(marker.x), 620, 80, 'rgb(255,0,0)');
+    game.debug.renderText('LayerY: ' + layer.getTileY(marker.y), 620, 112, 'rgb(255,0,0)');
+
+    game.debug.renderText('Tile Position: ' + currentTilePosition, 620, 144, 'rgb(255,0,0)');
+    game.debug.renderText('Hidden Tile: ' + getHiddenTile(), 620, 176, 'rgb(255,0,0)');
+
+}

examples/wip/pivot.js

@@ -4,25 +4,22 @@ function preload() {
 
     game.load.image('atari', 'assets/sprites/atari130xe.png');
     game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+    game.load.image('ball', 'assets/sprites/pangball.png');
 
 }
 
 var sprite1;
-var sprite2;
+// var sprite2;
 
 function create() {
 
     game.stage.backgroundColor = '#2d2d2d';
 
-    //  This will check Sprite vs. Sprite collision
+    sprite1 = game.add.sprite(300, 300, 'ball');
 
-    sprite1 = game.add.sprite(300, 300, 'atari');
-    sprite1.name = 'atari';
-	sprite1.body.immovable = true;
-
-    sprite1.anchor.setTo(0.5, 0.5);
-    sprite1.pivot.x = 250;
-    sprite1.pivot.y = 300;
+    sprite1.anchor.setTo(0, 1);
+    sprite1.pivot.x = 100;
+    sprite1.pivot.y = 100;
 
     // sprite2 = game.add.sprite(0, 0, 'mushroom');
     // sprite2.name = 'mushroom';
@@ -32,8 +29,8 @@ function create() {
 function update() {
 
     sprite1.angle += 1;
-    sprite1.pivot.x = game.input.x;
-    sprite1.pivot.y = game.input.y;
+    // sprite1.pivot.x = game.input.x;
+    // sprite1.pivot.y = game.input.y;
 
 }
 
@@ -42,7 +39,7 @@ function render() {
     game.debug.renderPixel(sprite1.pivot.x, sprite1.pivot.y);
 
     // game.debug.renderSpriteInfo(sprite1, 100, 400);
-    game.debug.renderSpriteBounds(sprite1);
+    // game.debug.renderSpriteBounds(sprite1);
     // game.debug.renderSpriteInfo(sprite2, 100, 100);
     // game.debug.renderSpriteBounds(sprite2);
 }

examples/world/fixed to camera.js

@@ -18,20 +18,29 @@ var logo2;
 function create() {
 
     //  Modify the world and camera bounds
-    game.world.setBounds(-1000, -1000, 1000, 1000);
+    game.world.setBounds(-1000, -1000, 2000, 2000);
 
     for (var i = 0; i < 200; i++)
     {
         game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom');
     }
 
-    logo1 = game.add.sprite(100, 100, 'phaser');
+    game.add.text(0, 0, "this text scrolls\nwith the background", { font: "32px Arial", fill: "#f26c4f", align: "center" });
+
+    logo1 = game.add.sprite(0, 0, 'phaser');
     logo1.fixedToCamera = true;
+    logo1.cameraOffset.setTo(100, 100);
 
-    logo2 = game.add.sprite(500, 100, 'phaser');
+    logo2 = game.add.sprite(0, 0, 'phaser');
     logo2.fixedToCamera = true;
+    logo2.cameraOffset.setTo(500, 100);
+
+
+    var t = game.add.text(0, 0, "this text is fixed to the camera", { font: "32px Arial", fill: "#ffffff", align: "center" });
+    t.fixedToCamera = true;
+    t.cameraOffset.setTo(200, 500);
 
-    game.add.tween(logo2).to( { y: 400 }, 2000, Phaser.Easing.Back.InOut, true, 0, 2000, true);
+    game.add.tween(logo2.cameraOffset).to( { y: 400 }, 2000, Phaser.Easing.Back.InOut, true, 0, 2000, true);
 
     cursors = game.input.keyboard.createCursorKeys();