HTMLGame/js/gameScript.js

var myGamePiece;
var secs = 0;
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");
    myGamePiece.gravity = 0.025;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

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.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        document.addEventListener("keydown",keyDown,false);
        document.addEventListener("keyup",keyUp,false);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 15);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}



function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    secs++;
    if(secs >= 0 && secs < 30 && myGamePiece.isMoving){
        myGamePiece.image.src = charAnim[1];
    }
    if(secs >= 30 && secs < 50 && myGamePiece.isMoving){
        myGamePiece.image.src = charAnim[2];
    }
    if(secs >=50){
        secs = 0;
    }
    myGameArea.clear();
    //myGameArea.frameNo += 1;
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    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
// 38 -> Up
// 39 -> Right
// 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);
    
    //console.log(e.keyCode);
}

function keyUp(e){
    if(!e) e = event;
    myGamePiece.image.src = charAnim[0];
    myGamePiece.isMoving = false;
    if(e.keyCode == 32){
        myGamePiece.speedY = 0;
    }
    if(e.keyCode >= 37 && e.keyCode <= 40){
        myGamePiece.speedX = 0;
    }
}