jsgame/js/main.js

var firstCar;
var secondCar;
var myPuddle;
var myX;
var myY;
var mySpeed;

class Substrate {
    constructor(x, y, height, width, friction, ) {
      this.height = height;
      this.width = width;
    }
  }



function startGame() {
    firstCar = new component(30, 50, "blue", 25, 225, 'car');
    myPuddle = new component(100, 100, "#5FC4D8", 150, 225, 'substrate');
    myX = new component("14px", "Consolas", "black", 180, 5, "text");
    myY = new component("14px", "Consolas", "black", 180, 10, "text");
    mySpeed = new component("30px", "Consolas", "red", 30, 15, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.getElementById("mainCanvas"),
    start : function() {
        this.canvas.width = 1080;
        this.canvas.height = 580;
        this.context = this.canvas.getContext("2d");
        this.frameNo = 0;
        this.friction = 0.05; // wspolczynik tarcia
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    stop : function() {
        clearInterval(this.interval);
    },    
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);        
    }
}

function component(width, height, color, x, y, type) {
    
    this.type = type;
    this.lightsColor = 'yellow';
    this.width = width;
    this.height = height;
    this.speed = 0;
    if (this.type == "text") {
        this.angle = 0;
    } else {
        this.angle = Math.PI / 2;
    }
    this.maxForwardSpeed = 4;
    this.maxBackwardSpeed = -2;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
            if (this.type === 'car') {
                ctx.fillStyle = this.lightsColor;
                ctx.fillRect(this.width / -2 + 1, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
                ctx.fillRect(this.width / -2 + this.width - 6, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
                ctx.fillStyle = 'white';
                ctx.fillRect(this.width / -2 + (this.width /4), this.height / -2 + (this.height / 3), this.width / 2, this.height / 3);
            }
        }
        ctx.restore();
    }
    this.newPos = function() {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }
}

function accelerate(n, myGamePiece) {
    if (n>0) {
        if (myGamePiece.speed < myGamePiece.maxForwardSpeed) {
            myGamePiece.speed = myGamePiece.speed + n;
            if (myGamePiece.speed > myGamePiece.maxForwardSpeed) {
                myGamePiece.speed = myGamePiece.maxForwardSpeed;
            }
        } else if (myGamePiece.speed == myGamePiece.maxForwardSpeed) {
            // nothing to do in this case
        } else {
            slowdown(myGameArea.friction, myGamePiece);
        }
    } else {
        if (myGamePiece.speed > myGamePiece.maxBackwardSpeed) {
            myGamePiece.speed = myGamePiece.speed + n;
            if (myGamePiece.speed < myGamePiece.maxBackwardSpeed) {
                myGamePiece.speed = myGamePiece.maxBackwardSpeed;
            }            
        } else if (myGamePiece.speed == myGamePiece.maxBackwardSpeed) {
            // nothing to do in this case
        } else {
            slowdown(myGameArea.friction, myGamePiece);
        }
    }
}

function slowdown(n, myGamePiece) {
    if (myGamePiece.speed > 0) {
        myGamePiece.speed = myGamePiece.speed - n;
        if (myGamePiece.speed < 0) {myGamePiece.speed = 0;}
    } else if (myGamePiece.speed < 0) {
        myGamePiece.speed = myGamePiece.speed + n;
        if (myGamePiece.speed > 0) {myGamePiece.speed = 0;}
    }
}

function boosterOn(lmyGamePiece) {
    lmyGamePiece.maxForwardSpeed = 8;
    lmyGamePiece.maxBackwardSpeed = -5;
    lmyGamePiece.lightsColor = 'red';
}

function boosterOff(lmyGamePiece) {
    lmyGamePiece.maxForwardSpeed = 4;
    lmyGamePiece.maxBackwardSpeed = -2;
    lmyGamePiece.lightsColor = 'yellow';
}

function checkSubstrate(x,y) {

}

function updateGameArea() {
    var direction = 0;
    myGameArea.clear();
    firstCar.moveAngle = 0;
    if (myGameArea.keys && myGameArea.keys[32]) { //space
        slowdown(0.2, firstCar);
        //myGamePiece.speed = 0;        
    }    
    if (myGameArea.keys && myGameArea.keys[69]) { boosterOn(firstCar);} // E
    if (myGameArea.keys && myGameArea.keys[81]) { boosterOff(firstCar);} // Q
    if (myGameArea.keys && (myGameArea.keys[37] || myGameArea.keys[65])) {
        if (firstCar.speed > 0) firstCar.moveAngle = -2;
        if (firstCar.speed < 0) firstCar.moveAngle = 2;
    } // left arrow || A
    if (myGameArea.keys && (myGameArea.keys[39] || myGameArea.keys[68])) {
        if (firstCar.speed > 0) firstCar.moveAngle = 2;
        if (firstCar.speed < 0) firstCar.moveAngle = -2;
    } // right arrow || D
    if (myGameArea.keys && (myGameArea.keys[38] || myGameArea.keys[87]) && !myGameArea.keys[32]) {accelerate(0.2, firstCar); direction = 1;} // up arrow || W
    if (myGameArea.keys && (myGameArea.keys[40] || myGameArea.keys[83]) && !myGameArea.keys[32]) {accelerate(-0.1, firstCar); direction = -1;} // down arrow || S
    if (direction === 0) {
        slowdown(myGameArea.friction, firstCar);
    }
    myX.text="X: " + firstCar.x.toFixed(2);
    myX.update();
    myY.text="Y: " + firstCar.y.toFixed(2);
    myY.update();
    mySpeed.text="SPEED: " + firstCar.speed.toFixed(2);
    mySpeed.update();    
    myPuddle.update();
    firstCar.newPos();
    firstCar.update();
}