Merge pull request #7 from CLSB-Programming/develop-touch

v1.2

Author: jcxldn

index.html

@@ -12,13 +12,14 @@
         <canvas id="gameCanvas"></canvas>
         </div>
         <div id="info">
-            <p>The invaders get faster and drop more bombs as you complete each level! | Controls: WASD / Arrow Keys + Space</p>
+            <p>The invaders get faster and drop more bombs as you complete each level! | Controls: WASD / Arrow Keys + Space / Touch</p>
             <p><a id="muteLink" href="#" onclick="toggleMute()">Mute</a> | 
                 <a href="https://github.com/dwmkerr/spaceinvaders">Original Project</a> | 
                 <a href="https://github.com/CLSB-Programming/spaceinvaders">GitHub Project</a> | 
                 v1.1</p>
         </div>
 
+        <script src="js/keycodes.js"></script>
         <script src="js/starfield.js"></script>
         <script src="js/spaceinvaders.js"></script>
         <script src="js/setup.js"></script>

js/keycodes.js

@@ -0,0 +1,25 @@
+// Keycodes.js
+// A list of all key codes needed for the game.
+
+function Keycodes() {
+
+	this.space =  32;
+
+	this.w = 87;
+	this.a = 65;
+	this.d = 68;
+
+	this.p = 80;
+
+    this.arrows = {
+        up: 38,
+        left: 37,
+        right: 39
+    }
+
+    this.touch = {
+    	up: 38,
+    	left: 37,
+    	right: 39
+    }
+}

js/setup.js

@@ -11,6 +11,7 @@ canvas.height = 600;
 
 //  Create the game.
 var game = new Game();
+var keycodes = new Keycodes();
 
 //  Initialise it with the game canvas.
 game.initialise(canvas);
@@ -22,7 +23,7 @@ game.start();
 window.addEventListener("keydown", function keydown(e) {
     var keycode = e.which || window.event.keycode;
     //  Supress further processing of left/right/space/a/d/w/up (37/29/32/65/68/87/38)
-    if(keycode == 37 || keycode == 39 || keycode == 32 || keycode == 65 || keycode == 68 || keycode == 87 || keycode == 38) {
+    if(keycode == keycodes.arrows.left || keycode == keycodes.arrows.right || keycode == keycodes.space || keycode == 65 || keycode == 68 || keycode == 87 || keycode == 38) {
         e.preventDefault();
     }
     game.keyDown(keycode);
@@ -33,6 +34,20 @@ window.addEventListener("keyup", function keydown(e) {
     game.keyUp(keycode);
 });
 
+// Touch Input
+
+window.addEventListener("touchstart", function (e) {
+    game.touchstart(e);
+}, false);
+
+window.addEventListener('touchend', function(e){
+    game.touchend(e);
+}, false);
+
+window.addEventListener('touchmove', function(e){
+    game.touchmove(e);
+}, false);
+
 function toggleMute() {
     game.mute();
     document.getElementById("muteLink").innerText = game.sounds.mute ? "Unmute" : "Mute";

js/spaceinvaders.js

@@ -21,6 +21,8 @@
     ending.
 */
 
+var keycodes = new Keycodes();
+
 //  Creates an instance of the Game class.
 function Game() {
 
@@ -196,6 +198,35 @@ Game.prototype.keyDown = function(keyCode) {
     }
 };
 
+// Touch
+Game.prototype.touchstart = function(s) {
+    if(this.currentState() && this.currentState().keyDown) {
+        this.currentState().keyDown(this, keycodes.space);
+    }    
+};
+
+Game.prototype.touchend = function(s) {
+    delete this.pressedKeys[keycodes.arrows.right];
+    delete this.pressedKeys[keycodes.arrows.left];
+};
+
+var previousX = 0;
+
+Game.prototype.touchmove = function(e) {
+    var currentX = e.changedTouches[0].pageX;
+    if (previousX > 0){
+        if (currentX > previousX){
+            delete this.pressedKeys[keycodes.touch.left];
+            this.pressedKeys[keycodes.touch.right] = true;
+        }
+        else{
+            delete this.pressedKeys[keycodes.touch.right];
+            this.pressedKeys[keycodes.touch.left] = true;
+        }
+    }
+    previousX = currentX;
+};
+
 //  Inform the game a key is up.
 Game.prototype.keyUp = function(keyCode) {
     delete this.pressedKeys[keyCode];
@@ -236,11 +267,11 @@ WelcomeState.prototype.draw = function(game, dt, ctx) {
     ctx.fillText("Space Invaders", game.width / 2, game.height/2 - 40); 
     ctx.font="16px Arial";
 
-    ctx.fillText("Press 'Space' to start.", game.width / 2, game.height/2); 
+    ctx.fillText("Press 'Space' or tap to start.", game.width / 2, game.height/2); 
 };
 
 WelcomeState.prototype.keyDown = function(game, keyCode) {
-    if(keyCode == 32) /*space*/ {
+    if(keyCode == keycodes.space) /*space*/ {
         //  Space starts the game.
         game.level = 1;
         game.score = 0;
@@ -274,7 +305,7 @@ GameOverState.prototype.draw = function(game, dt, ctx) {
 };
 
 GameOverState.prototype.keyDown = function(game, keyCode) {
-    if(keyCode == 32) /*space*/ {
+    if(keyCode == keycodes.space) /*space*/ {
         //  Space restarts the game.
         game.lives = 3;
         game.score = 0;
@@ -344,17 +375,17 @@ PlayState.prototype.update = function(game, dt) {
     //  event for smooth movement, otherwise the ship would move
     //  more like a text editor caret.
 
-    // Left Movement Keys : A Key / Left Arrow Key
-    if(game.pressedKeys[65] || game.pressedKeys[37]) {
+    // Left Movement Keys : A Key / Left Arrow Key / Touch Left
+    if(game.pressedKeys[keycodes.a] || game.pressedKeys[keycodes.arrows.left] || game.pressedKeys[keycodes.touch.left]) {
         this.ship.x -= this.shipSpeed * dt;
     }
 
-    // Right Movement Keys: D Key / Right Arrow Key
-    if(game.pressedKeys[68] || game.pressedKeys[39]){
+    // Right Movement Keys: D Key / Right Arrow Key / Touch Right
+    if(game.pressedKeys[keycodes.d] || game.pressedKeys[keycodes.arrows.right] || game.pressedKeys[keycodes.touch.right]){
         this.ship.x += this.shipSpeed * dt;
     }
-    // Fire Keys : Space Key / W Key / Up Key
-    if(game.pressedKeys[32] || game.pressedKeys[87] || game.pressedKeys[38]) {
+    // Fire Keys : Space Key / W Key / Up Key / Touch Up
+    if(game.pressedKeys[keycodes.space] || game.pressedKeys[keycodes.w] || game.pressedKeys[keycodes.arrows.up] || game.pressedKeys[keycodes.touch.up]) {
         this.fireRocket();
     }
 
@@ -579,11 +610,11 @@ PlayState.prototype.draw = function(game, dt, ctx) {
 
 PlayState.prototype.keyDown = function(game, keyCode) {
 
-    if(keyCode == 32) {
+    if(keyCode == keycodes.space) {
         //  Fire!
         this.fireRocket();
     }
-    if(keyCode == 80) {
+    if(keyCode == keycodes.p) {
         //  Push the pause state.
         game.pushState(new PauseState());
     }
@@ -613,7 +644,7 @@ function PauseState() {
 
 PauseState.prototype.keyDown = function(game, keyCode) {
 
-    if(keyCode == 80) {
+    if(keyCode == keycodes.p) {
         //  Pop the pause state.
         game.popState();
     }