HTMLGame/js/gameScript.js

var myGamePiece;
var secs = 0;
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() {
    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();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        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);
        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;
}


// 32 -> Space
// 37 -> Left
// 38 -> Up
// 39 -> Right
// 40 -> Down
function keyDown(e){
    if(!e) e = event;
    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);
}

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;
    }
}