Added movement and groups

Zainking · Nov 21, 2014 · ddd0427 · ddd0427
1 parent a2e52de
commit ddd0427
Show file tree

Hide file tree

Showing 18 changed files with 1,061 additions and 17 deletions.
diff --git a/README.md b/README.md
diff --git a/examples/03_spriteFromImage.html b/examples/03_spriteFromImage.html
@@ -7,7 +7,7 @@
 
 //Create a Pixi stage and renderer and add the 
 //renderer.view to the DOM
-var stage = new PIXI.Stage(0x000000)
+var stage = new PIXI.Stage(0x000000);
 var renderer = PIXI.autoDetectRenderer(
   256, 256,
   {antialiasing: false, transparent: false, resolution: 1}  

diff --git a/examples/06_spriteFromTextureAtlas.html b/examples/06_spriteFromTextureAtlas.html
@@ -7,7 +7,7 @@
 
 //Create a Pixi stage and renderer and add the 
 //`renderer.view` to the DOM
-var stage = new PIXI.Stage(0x000000)
+var stage = new PIXI.Stage(0x000000);
 var renderer = PIXI.autoDetectRenderer(
   512, 512,
   {antialiasing: false, transparent: false, resolution: 1}  

diff --git a/examples/07_movingSprites.html b/examples/07_movingSprites.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Moving sprites</title>
+<body>
+<script src="../pixi.js/bin/pixi.js"></script>
+<script>
+
+//Create a Pixi stage and renderer
+var stage = new PIXI.Stage(0x000000);
+var renderer = PIXI.autoDetectRenderer(
+  256, 256,
+  {antialiasing: false, transparent: false, resolution: 1}  
+);
+document.body.appendChild(renderer.view);
+
+//Load an image
+var loader = new PIXI.AssetLoader(["images/cat.png"]);
+loader.onComplete = setup;
+loader.load();
+
+//Define any variables that are used in more than one function
+var cat;
+
+function setup() {
+
+  //Create the `cat` sprite 
+  var texture = PIXI.TextureCache["images/cat.png"];
+  cat = new PIXI.Sprite(texture);
+  cat.y = 96; 
+  stage.addChild(cat);
+
+  //Start the game loop
+  gameLoop();
+}
+
+function gameLoop(){
+
+  //Loop this function 60 times per second
+  requestAnimationFrame(gameLoop);
+
+  //Move the cat 1 pixel per frame
+  cat.x += 1;
+
+  //Render the stage
+  renderer.render(stage);
+}
+</script>
+</body>
+
+
diff --git a/examples/08_velocityVariables.html b/examples/08_velocityVariables.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Velocity variables</title>
+<body>
+<script src="../pixi.js/bin/pixi.js"></script>
+<script>
+
+//Create a Pixi stage and renderer
+var stage = new PIXI.Stage(0x000000);
+var renderer = PIXI.autoDetectRenderer(
+  256, 256,
+  {antialiasing: false, transparent: false, resolution: 1}  
+);
+document.body.appendChild(renderer.view);
+
+//Load an image
+var loader = new PIXI.AssetLoader(["images/cat.png"]);
+loader.onComplete = setup;
+loader.load();
+
+//Define any variables that are used in more than one function
+var cat;
+
+function setup() {
+
+  //Create the `cat` sprite 
+  var texture = PIXI.TextureCache["images/cat.png"];
+  cat = new PIXI.Sprite(texture);
+  stage.addChild(cat);
+
+  //Initialize the cat's velocity variables
+  cat.vx = 0;
+  cat.vy = 0;
+
+  //Start the game loop
+  gameLoop();
+}
+
+function gameLoop(){
+
+  //Loop this function 60 times per second
+  requestAnimationFrame(gameLoop);
+
+  //Update the cat's velocity
+  cat.vx = 1;
+  cat.vy = 1;
+
+  //Apply the velocity values to the cat's 
+  //position to make it move
+  cat.x += cat.vx;
+  cat.y += cat.vy;
+
+  //Render the stage
+  renderer.render(stage);
+}
+</script>
+</body>
+
+
+
diff --git a/examples/09_gameStates.html b/examples/09_gameStates.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Game states</title>
+<body>
+<script src="../pixi.js/bin/pixi.js"></script>
+<script>
+
+//Create a Pixi stage and renderer
+var stage = new PIXI.Stage(0x000000);
+var renderer = PIXI.autoDetectRenderer(
+  256, 256,
+  {antialiasing: false, transparent: false, resolution: 1}  
+);
+document.body.appendChild(renderer.view);
+
+//Load an image
+var loader = new PIXI.AssetLoader(["images/cat.png"]);
+loader.onComplete = setup;
+loader.load();
+
+//Define any variables that are used in more than one function
+var cat, state;
+
+function setup() {
+
+  //Create the `cat` sprite 
+  var texture = PIXI.TextureCache["images/cat.png"];
+  cat = new PIXI.Sprite(texture);
+  cat.y = 96; 
+  cat.vx = 0;
+  cat.vy = 0;
+  stage.addChild(cat);
+
+  //Set the game state
+  state = play;
+
+  //Start the game loop
+  gameLoop();
+}
+
+function gameLoop(){
+
+  //Loop this function 60 times per second
+  requestAnimationFrame(gameLoop);
+
+  //Update the current game state:
+  state();
+
+  //Render the stage
+  renderer.render(stage);
+}
+
+function play() {
+
+  //Move the cat 1 pixel to the right each frame
+  cat.vx = 1
+  cat.x += cat.vx;
+}
+
+</script>
+</body>
+
+
+
diff --git a/examples/10_keyboardMovement.html b/examples/10_keyboardMovement.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Keyboard movment</title>
+<body>
+<script src="../pixi.js/bin/pixi.js"></script>
+<script>
+
+//Create a Pixi stage and renderer
+var stage = new PIXI.Stage(0x000000);
+var renderer = PIXI.autoDetectRenderer(
+  256, 256,
+  {antialiasing: false, transparent: false, resolution: 1}  
+);
+document.body.appendChild(renderer.view);
+
+//Load an image
+var loader = new PIXI.AssetLoader(["images/cat.png"]);
+loader.onComplete = setup;
+loader.load();
+
+//Define any variables that are used in more than one function
+var cat, state;
+
+function setup() {
+
+  //Create the `cat` sprite 
+  var texture = PIXI.TextureCache["images/cat.png"];
+  cat = new PIXI.Sprite(texture);
+  cat.y = 96; 
+  cat.vx = 0;
+  cat.vy = 0;
+  stage.addChild(cat);
+
+  //Capture the keyboard arrow keys
+  var left = keyboard(37),
+      up = keyboard(38),
+      right = keyboard(39),
+      down = keyboard(40);
+
+  //Left arrow key `press` method
+  left.press = function() {
+    //Change the cat's velocity when the key is pressed
+    cat.vx = -5;
+    cat.vy = 0;
+  };
+  //Left arrow key `release` method
+  left.release = function() {
+    //If the left arrow has been released, and the right arrow isn't down,
+    //and the cat isn't moving vertically:
+    //Stop the cat
+    if (!right.isDown && cat.vy === 0) {
+      cat.vx = 0;
+    }
+  };
+
+  //Up
+  up.press = function() {
+    cat.vy = -5;
+    cat.vx = 0;
+  };
+  up.release = function() {
+    if (!down.isDown && cat.vx === 0) {
+      cat.vy = 0;
+    }
+  };
+
+  //Right
+  right.press = function() {
+    cat.vx = 5;
+    cat.vy = 0;
+  };
+  right.release = function() {
+    if (!left.isDown && cat.vy === 0) {
+      cat.vx = 0;
+    }
+  };
+
+  //Down
+  down.press = function() {
+    cat.vy = 5;
+    cat.vx = 0;
+  };
+  down.release = function() {
+    if (!up.isDown && cat.vx === 0) {
+      cat.vy = 0;
+    }
+  };
+
+  //Set the game state
+  state = play;
+
+  //Start the game loop
+  gameLoop();
+}
+
+function gameLoop(){
+
+  //Loop this function 60 times per second
+  requestAnimationFrame(gameLoop);
+
+  //Update the current game state
+  state();
+
+  //Render the stage
+  renderer.render(stage);
+}
+
+function play() {
+
+  //Use the cat's velocity to make it move
+  cat.x += cat.vx;
+  cat.y += cat.vy
+}
+
+//The `keyboard` helper function
+function keyboard(keyCode) {
+  var key = {};
+  key.code = keyCode;
+  key.isDown = false;
+  key.isUp = true;
+  key.press = undefined;
+  key.release = undefined;
+  //The `downHandler`
+  key.downHandler = function(event) {
+    if (event.keyCode === key.code) {
+      if (key.isUp && key.press) key.press();
+      key.isDown = true;
+      key.isUp = false;
+    }
+    event.preventDefault();
+  };
+
+  //The `upHandler`
+  key.upHandler = function(event) {
+    if (event.keyCode === key.code) {
+      if (key.isDown && key.release) key.release();
+      key.isDown = false;
+      key.isUp = true;
+    }
+    event.preventDefault();
+  };
+
+  //Attach event listeners
+  window.addEventListener(
+    "keydown", key.downHandler.bind(key), false
+  );
+  window.addEventListener(
+    "keyup", key.upHandler.bind(key), false
+  );
+  return key;
+}
+
+</script>
+</body>
+
+
+
+