1 of 3

Learning javascript by developing a simple game. Need to convert it to Object Oriented Design

I am learning javascript and have developed a car game using :

  • HTML Canvas
  • javascript

The repository link is : https://github.com/lazycoder-007/car_race_html_javascript_game

The code is given below :

This is the GameArea object, with functions related to load, start and stop the game.

var myGameArea = {
    canvas : document.getElementById("myCanvas"),
    load : function(){
        this.canvas.width = canvasW;
        this.canvas.height = canvasH;
        this.context = this.canvas.getContext("2d");
        this.loadInterval = setInterval(loadGameArea, 20);
        this.frameNo = 0;
        window.addEventListener("keydown", function(e){
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = true;
        });
        window.addEventListener("keyup", function(e){
            myGameArea.keys[e.keyCode] = false;
        });
    },
    start : function(){
        clearInterval(this.loadInterval);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
        myMusic.stop();
    }
}

This is the updateGameArea function, which is invoked in a certain interval defined above.

function updateGameArea()
{
    for (i = 0; i < myObstacles.length; i += 1) {
        if (redGamePiece.crashWith(myObstacles[i])) {
          myGameArea.stop();
          return;
        }
    }
    myGameArea.clear();
    backgroundRoad.update();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || diveiderInterval(numberOfDividersPerFrame)) {
        roadDivider.push(new component(20, 80, "white", canvasW/2, 0));
    }
    for (i = 0; i < roadDivider.length; i += 1) {
        roadDivider[i].y += myObstacleSpeed;
        roadDivider[i].update();
    }
    if (myGameArea.frameNo == 1 || obstacleInterval(numberOfObstaclesPerFrame)) {
        myObstacleX = Math.floor(Math.random() * canvasW);
        myObstacleY = 0;
        myObstacles.push(new component(myObstacleW, myObstacleH, "redCarImage.png", myObstacleX, myObstacleY, "image"));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].y += myObstacleSpeed;
        myObstacles[i].update();
    }
    redGamePiece.speedX = 0;
    redGamePiece.speedY = 0;
    if (myGameArea.keys && myGameArea.keys[37] && redGamePiece.x > cornerGap) 
    {
        redGamePiece.speedX = -redGamePieceSpeedLeft; 
    }
    if (myGameArea.keys && myGameArea.keys[39] && redGamePiece.x < myGameArea.canvas.width - myObstacleW - cornerGap) 
    {
        redGamePiece.speedX = redGamePieceSpeedRight; 
    }
    if (myGameArea.keys && myGameArea.keys[38] && redGamePiece.y > cornerGap) 
    {
        redGamePiece.speedY = -redGamePieceSpeedUp; 
    }
    if (myGameArea.keys && myGameArea.keys[40] && redGamePiece.y < myGameArea.canvas.height - myObstacleH - cornerGap) 
    {
        redGamePiece.speedY = redGamePieceSpeedDown ; 
    }
    myScore.text = "SCORE: " + myGameArea.frameNo;
    myScore.update();
    redGamePiece.newPos();
    redGamePiece.update();
    
}

Finally, the functions to start the game.

function startTheGame()
{
    myMusic = new Sound("gameTheme.mp3", "true");
    redGamePieceX = canvasW/2;
    redGamePieceY = canvasH - redGamePieceX - cornerGap;
    //redGamePiece = new component(redGamePieceW, redGamePieceH, redGamePieceColor, redGamePieceX, redGamePieceY);
    redGamePiece = new component(redGamePieceW, redGamePieceH, "yellowCarImage.png", redGamePieceX, redGamePieceY, "image");
    backgroundRoad = new component(canvasW, canvasH, "roadImage.png", 0, 0, "image");
    myScore = new component("20px", "Consolas", "red", 10, 40, "text");
    myGameArea.stop();
    if(start)
    {
        myGameArea.start();
    }
    else
    {
        myGameArea.load();
    }
    //myMusic.play();
}

It is all working fine in this way.

I want suggestion to convert thi code to an object oriented way.

How do I start with converting this into object Oriented Design.

Any articles or help is appreciated.