Dev.to

Another Javascript pong

In this tutorial, we will create a pong game written in vanilla JavaScript and rendered on HTML . The game's HTML The HTML document structure is quite minimal, as the game will be rendered entirely on the element. Using your favorite text editor, create a new HTML document, save it as index.html, and add the following code to it: Gamedev Canvas Workshop * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } // JavaScript code goes here We have some basic CSS in the header. The body contains and elements — we will render the game inside the first one and write the JavaScript code that controls it in the second one. The element has an id of myCanvas to allow us to easily grab a reference to it, and it is 480 pixels wide and 320 pixels high. All the JavaScript code we will write in this tutorial will go between the opening and closing tags. Canvas basics To actually be able to render graphics on the element, first we have to grab a reference to it in JavaScript. Add the following below your opening tag. const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); Here we're storing a reference to the element to the canvas variable. Then we're creating the ctx variable to store the 2D rendering context — the actual tool we can use to paint on the Canvas. Defining a drawing loop To keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. You can run a function over and over again using a JavaScript timing function. Later on in the tutorial, we'll see how requestAnimationFrame() helps with drawing, but we'll start with setInterval() at first to create some looping logic. Add the following JavaScript. The draw() function will be executed within setInterval every 10 milliseconds: function draw() { // drawing code } setInterval(draw, 10); Thanks to the infinite nature of setInterval the draw() function will be called every 10 milliseconds forever, or until we stop it. Now, let's draw the ball — add the following inside your draw() function: ctx.beginPath(); ctx.arc(50, 50, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); All the instructions are between the beginPath() and closePath() methods. We are defining a circle using the arc() method. It takes six parameters: x and y coordinates of the arc's center arc radius start angle and end angle (what angle to start and finish drawing the circle, in radians) direction of drawing (false for clockwise, the default, or true for anti-clockwise.) This last parameter is optional. In our case the ball is painted 50 pixels from the left side of the screen and 50 pixels from the top side. The fillStyle property stores a color that will be used by the fill() method to paint the circle, in our case, blue. The ball should be repainted on every frame.

Mar 29, 2025 - 21:03
 0
Another Javascript pong

In this tutorial, we will create a pong game written in vanilla JavaScript and rendered on HTML .

The game's HTML

The HTML document structure is quite minimal, as the game will be rendered entirely on the element. Using your favorite text editor, create a new HTML document, save it as index.html, and add the following code to it:



  
    
    Gamedev Canvas Workshop

We have some basic CSS in the header. The body contains and elements — we will render the game inside the first one and write the JavaScript code that controls it in the second one. The element has an id of myCanvas to allow us to easily grab a reference to it, and it is 480 pixels wide and 320 pixels high. All the JavaScript code we will write in this tutorial will go between the opening