Canvas Game Tutorial, Part 1

Posted on August 17, 2021

JavaScript Canvas Game Tutorial

What is Canvas?

Canvas is a HTML tag used to draw anything from artwork to game graphics. In this tutorial, we will show you how to create a web game using canvas.

Getting Started

To begin, add the canvas and script tags to the HTML and give the canvas a id of canvas:

<body>
    <canvas id="canvas"></canvas>
    <script>
    </script>
</body>

Now for the JavaScript which will be put in the script tags. We declare the canvas and set the size to be the same as the screen size.

<script>
onload = function (){
    ctx = canvas.getContext('2d');
    canvas.width = innerWidth;
    canvas.height = innerHeight;
}
</script>

Now for the drawing, to begin, let us draw a box which will serve as our main game peice. We will give it varibles heroX and heroY for coordinates and a color of red.

<script>
onload = function (){…
    var heroX = 100;
    var heroY = 100;
    function mainLoop(){
        ctx.fillStyle = "red";
        ctx.fillRect(heroX, heroY, 40, 40);
        //second two numbers are the height and width of the square
    }
}
</script>

Now we make buttons to move our hero:

<body>
    <canvas id="canavs"></canvas>
    <script>
    …
    </script>
    <button id="left">⬅️</button>
    <button id="right">➡️</button>
    <button id="up">⬆️</button>
    <button id="down">⬇️</button>
</body>

We will be able to add css styling later, but for now, let us make these buttons work. To make them work, we will need to connect a function to each button and have that function change the the value of heroX or heroY. That part is simple but we must also make our main function call itself again every time it finishes so animation is possible. Finally, we will also add a line to clear the canvas so we only see one hero.

<script>
onload = function (){…
    var heroX = 100;
    var heroY = 100;
    function mainLoop(){
        ctx.clearRect(0, 0, innerWidth, innerHeight); //clearing the canvas
        ctx.fillStyle = "red";
        ctx.fillRect(heroX, heroY, 40, 40);
        window.requestAnimationFrame(mainLoop)
    //Calls the function again
    }
    function goUp(){heroY-=10}
    function goDown(){heroY+=10}
    function goLeft(){heroX-=10}
    function goRight(){heroX+=10}
    mainLoop();
}
</script>

We now must add the event listeners so that the buttons will work.

<script>
onload = function (){
    …
    up.addEventListener("click", goUp);
    down.addEventListener("click", goDown);
    left.addEventListener("click", goLeft);
    right.addEventListener("click", goRight);
}
</script>

Finally, we will add a little css. Feel free to add more but I am just positioning the buttons on the screen for now.

<head>
    <style>
        button{
            position: relative;
            bottom: 20vh;
            display: inline-block;
        }
    </style>
</head>
<body>
    …
</body>

Conclusion

Now that we have the very basics, we can begin changing and adding things to create our game. The next part of this tutorial will be released as soon as possible. Here is the code we created today: (Also in the comments)

Contents

Canvas Game Tutorial, Part 1

What is Canvas?

Getting Started

Conclusion

Brain & Bones

Vachila64☕

Game Dev Tutorial - Part 1