JavaScript - Game Part 1

In this lesson we will begin to make a simple game using html and JavaScript!

We will now be using all the knowledge you have of JavaScript to make a simple game that you can run in your browser! We will be using pure JavaScript for this game, but you can later learn about frameworks with pre-written useful functions that you can use to help make them. The game will consist of two paddles passing a ball between each other. You control one paddle and earn points by getting the ball past the other paddle, which will move on its own. The game is over when the opponent has 10 points. The game will look something like this:

Table of Contents:

  1. Drawing on a Canvas
  2. Drawing the Game Elements
  3. Moving the Ball and Adding Collision with the Walls
  4. Moving the Paddles with the Keyboard and Mouse
  5. Adding Collision Between the Ball and the Paddles
  6. Gaining Points and Winning

1 – Drawing on a Canvas

Create a file called index.html and set it up like this:

        <!DOCTYPE html>
            <meta charset="utf-8"/> 
                canvas { background: #202020; display: block; margin: 0 auto; }
        <canvas id="gameCanvas" width="800" height="600">
            <script src="game.js"></script>

The canvas CSS sets the background to gray and centers the canvas on the screen. The canvas is 800px wide and 600px high. Our JavaScript will be stored in a file called game.js, which we will now create. If you open the index.html file in the browser now, it should look like this:

Create a file called "game.js" in the same folder as the index.html file. To actually start drawing on the canvas, we need to create a variable storing the canvas and the context. To do so, add these lines of code at the beginning of the game.js file:

        let canvas = document.getElementById("gameCanvas");
        let context = canvas.getContext("2d");

With this, we get declare the canvas variable getting the element with id "gameCanvas", which is what I named my canvas in the html file. Whatever you call your canvas, make your you write the correct id string in the getElementByID function. We need to get the 2d context of the canvas in order to actually draw on it.

You have many ways of drawing on the canvas, and I recommend looking up ways to draw shapes or text if you are confused or if you want a different way of doing things. Here is one way to draw a rectangle on the canvas:

        // draws a white rectangle
        context.rect(50, 50, 100, 100);
        context.fillStyle = "#ffffff";

You draw the shape between the begin and end path functions. First, you draw a rectangle with the .rect(x, y, w, h) function with parameters x position, y position, width, and height in pixels. Note: the x and y values code for the x and y coordinates of the top-left corner of the rectangle. Then, you set the fillStyle property of the context to a color, in this case a hexadecimal color code. Then, you fill the shape with the color and end the path. The result should look like this:

The coordinate grid in the canvas may be different from what you expect. The top left corner is actually (0, 0), so the x value increases to the right and becomes negative to the left of the canvas, and the y value increases downward and becomes negative above the canvas.

You can also draw a circle like this:

        // draws a white circle
        context.arc(200, 200, 10, 0, Math.PI * 2);
        context.fillStyle = "#ffffff";

The parameters for the arc function in order are: the x coordinate of the center of the arc, the y coordinate of the center, the radius, the starting angle in radians, the ending angle in radians, (and another optional parameter that determines direction to draw the arc, not used here). Since this arc starts at 0 radians and ends at 2 PI radians, it actually draws an entire circle, so the direction of the arc is irrelevant.

You can draw text like this:

        // draws blue arial text
        context.font = "32px arial";
        context.fillStyle = "#0000ff";
        context.fillText("Text", 300, 300);

The fillText parameters in order are: the text string, the x coordinate, and the y coordinate (you can also add an optional maximum width parameter, not used here).

Here is what the browser screen now looks like:

That's all you need to know for this tutorial, but if you are ever confused about the functions used or their parameters, don't be afraid to look them up. There are other ways to draw as well, like using canvas.strokeStyle and canvas.stroke() to draw outlines of shapes or text, so you can explore those as well.

Clear all this code from the JS file. Next, we will begin drawing the game elements.

Lesson source code

< Previous Next >