improving consts and vars, maintain aspect ratio

js/component.js

@@ -69,4 +69,24 @@ function component(width, height, color, x, y, type) {
         }
         return crash;
     }
+    
+    this.moveRight = function(n) {
+        myGamePiece.speedX = n;
+        myGamePiece.isMoving = true;
+        myGamePiece.direction = true;
+    }
+
+    this.moveLeft = function(n){
+        myGamePiece.speedX = -n;
+        myGamePiece.isMoving = true;
+        myGamePiece.direction = false;
+    }
+
+    this.jump = function(n){
+        //myGamePiece.isJumping = true;
+        myGamePiece.speedY = -n;
+        //myGamePiece.y = myGameArea.canvas.height - n;
+        myGamePiece.isMoving = true;
+        //console.log("salto");
+    }
 }

js/gameScript.js

@@ -1,10 +1,14 @@
 var myGamePiece;
 var secs = 0;
-const imagesDir = 'images/';
-const charAnim = [imagesDir+'idle.png', imagesDir+'walk1.png', imagesDir+'walk2.png'];
+const GAMEWIDTH = window.innerWidth;
+const GAMEHEIGHT = window.innerHeight;
+const RATIO = GAMEWIDTH/GAMEHEIGHT;
+const imagesDir = "images/";
+const charAnim = [imagesDir+"idle.png", imagesDir+"walk1.png", imagesDir+"walk2.png"];
 
 function startGame() {
-    myGamePiece = new component(40, 60, charAnim[0], 0, window.innerHeight-60, "image");
+    console.log(GAMEWIDTH+' '+GAMEHEIGHT);
+    myGamePiece = new component(60*RATIO, 100*RATIO, charAnim[0], 0, window.innerHeight-60, "image");
     myGamePiece.gravity = 0.025;
     myScore = new component("30px", "Consolas", "black", 280, 40, "text");
     myGameArea.start();
@@ -13,8 +17,8 @@ function startGame() {
 var myGameArea = {
     canvas : document.createElement("canvas"),
     start : function() {
-        this.canvas.width = window.innerWidth-(window.innerWidth*0.015);
-        this.canvas.height = window.innerHeight-(window.innerHeight*0.015);
+        this.canvas.width = window.innerWidth-(window.innerWidth*0.02);
+        this.canvas.height = window.innerHeight-(window.innerHeight*0.025);
         this.context = this.canvas.getContext("2d");
         document.body.insertBefore(this.canvas, document.body.childNodes[0]);
         document.addEventListener("keydown",keyDown,false);
@@ -52,25 +56,6 @@ function everyinterval(n) {
     return false;
 }
 
-function moveRight(n){
-    myGamePiece.speedX = n;
-    myGamePiece.isMoving = true;
-    myGamePiece.direction = true;
-}
-
-function moveLeft(n){
-    myGamePiece.speedX = -n;
-    myGamePiece.isMoving = true;
-    myGamePiece.direction = false;
-}
-
-function jump(n){
-    //myGamePiece.isJumping = true;
-    myGamePiece.speedY = -n;
-    //myGamePiece.y = myGameArea.canvas.height - n;
-    myGamePiece.isMoving = true;
-    console.log("salto");
-}
 
 // 32 -> Space
 // 37 -> Left
@@ -79,9 +64,9 @@ function jump(n){
 // 40 -> Down
 function keyDown(e){
     if(!e) e = event;
-    if(e.keyCode == 32 && !myGamePiece.isJumping) jump(10);
-    if(e.keyCode == 37) moveLeft(1);
-    if(e.keyCode == 39) moveRight(1);
+    if(e.keyCode == 32 && !myGamePiece.isJumping) myGamePiece.jump(10);
+    if(e.keyCode == 37) myGamePiece.moveLeft(1);
+    if(e.keyCode == 39) myGamePiece.moveRight(1);
     
     //console.log(e.keyCode);
 }