How to create a JavaScript game using GenAI for Absolute Beginners

15/02/25 by Mr Shane Currie | Charles Sturt Student

Edited 17/02/25 to include further explanations

This is a technical document requiring technical expertise to understand.

In todays article, I have created a crash course to explain how to create a JavaScript game for persons who have zero coding experience. By the end of this article, I hope to explain the basic fundamentals in creating your own JavaScript Game with the aid of GenAI.

What you need to create a JavaScript game

A notepad editor (I recommend downloading Notepad++)
Microsoft Paint or any other paint program
A web browser

What you will need to host a JavaScript game online

A webserver
A Static IP address
A Domain Name
A SSL Certificate (if your collecting user data)

Building a very simple 2D game

first we are going to be creating the following

A new folder called game to save your game files in
a HTML document called launchgameV1.1.html
A JavaScript Document called maingameV1.1.js
A JavaScript Document called inventory V1.1.js
A folder called assets (save this in the game folder)
A folder called images (save this in the assets folder)

To create a HTML or JavaScript file, simply create a new notepad document then rename the extension from .txt to .html for a HTML document or .js for a JavaScript document . To access these files to input code, simply right click on the file and open it using notepad. Now, I recommend that you download the Notepad++ tool, as this contains line numbers that are very useful for coding

Basic structure of an HTML, CSS, and JavaScript document

Now we have a basic directory setup we can now start building the game. GenAI can be used to create frameworks. However, in order to use GenAI to its full potential you are going to need to understand the basic structure of a HTML document

In Laymans HTML is the structure of your webpage, CSS is the style, and JavaScript enables user interaction for your website/game. A HTML document includes elements such as HTML, HEAD, STYLE & BODY. Below is a basic template of a HTML document

<!DOCTYPE html>
<html lang="en">

<head>
<title>Name of your game</title>

<style>
CSS code goes here
</style>

</head>
<body>
HTML code goes here (within the body element)

<script>
Your JavaScript game goes here (within the body element)
</script>

</body>
</html>

Now we need to understand some of the basic terminology used with Javascript When prompting GenAI, using these terms will save you a lot of time.

Common terms

Events: are user actions, like the user clicking a mouse or a key on the keyboard.
Variables: are used as containers to store information, such as the players health or coordinates, variable types include local variables and global variablea
Global Variables: can be defined outside of any function, and can be accessed anywhere and modified by any function within a script
Local Variables: are defined from within a function, and can only be accessible within that function
Functions: are sets of instructions, like deducting or adding player health, or making a Kangaroo bounce across a screen.
Conditional statements: control the logic of multiple conditions by using IF, ELSE & ELSE IF statements. For excample, IF your player eats an apple, they gain 10+ health, ELSE IF they eat a carrot they gain 10+ energy or if they do anything ELSE they lose 10+ energy
Array: can be used as a list of values for a single object, like the size of an apple and where it is located on a X,Y Axis.
Global Scope: typically includes code nested outside of a function that can work arcoss multiple JavaScript files
Syntax: is how code is structured by using indenting and special characters
Comments: can be included in the code to explain the purpose of the code
Load Order: is the order of your code from the top to bottom of the page such as defining variables before functions
Debugging: using bulit in webbrowser tools to debug and look up errors in your code
Version control: creating multiple versions of the game durring your progress, so you can roll back to a working version if you break something

Now I will explain each of these terms in further detail while also providing code examples. At the end of this document, I will provide the code of the simple game in full, so relax you can just copy and paste it. I will also provide a link so you can demo the beta version of this game.

Sytnax

Javascript code includes special characters like {} (curly brackets) ; (semicolons) and () (curvy brackets). These special characters are important as they organise the structure of your code. Curly brackets are used to group blocks of code together, the semicolon is used to inform that a line of code is finished and curvy brackets can contain parameters.

Comments

To include comments in your JavaScript code, include two forward slash characters before the comment as shown below

// This is a comment
javascript code goes here

Canvas

Note: provided code snipets are excamples, it will be easier for you to understand these concepts first before prompting GenAI.

A Canvus is a HTML element used to provide space for drawing objects. A canvas can be the player screen where the player interacts, to create a canvas, we define the style of the canvas within the STYLE element of the HTML document, such as the colour of the canvas as shown in the following example.

    canvas {
      background: #f0f0f0;
      display: block;
      margin: 0 auto;
    }

Then we define the canvas width and height within the BODY element of the HTML document, as shown in the example below that sets the height and width of the canvas.

	<canvas id="gameCanvas" width="250" height="350"></canvas>

Lastly we define the canvas with the SCRIPT element of the HTML document (or JavaScript document, if you separate your HTML and JavaScript Documents), in this example we are making a 2D game, variables are used here, I will explain what variables are in the next section

  <style>

// Get the canvas and context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

Variables

Now lets explain what are variables, a variable is typically a letter or a word that refers to a number or text value. As an example, the word playerHealth is a variable and the number 100 is the value of the players health.

In JavaScript, a variable can start with let,const or var. In this game we are using the LET and CONST variable types. A LET variable is used when values change in the game, such as the payers health. The CONST variable type is used when the value of the variable does not change, such as the file path of the image for the carrot or the apple. Below is an example of a LET variable type.

let playerHealth = 100;
let playerEnergy = 100;

Local and Global Variables

The difference between a global variable and a local variable is that global variables are declared outside of functions (relax, I will explain functions later) and can be used or modified by any function. Local variables exist only inside a function and do not affect anything outside the function unless they are assigned to a global variable.

It is good practice to pass local and global variables into functions as parameters (again, relax, I will explain parameters later).

In simple terms: If your game includes a kangaroo, a global variable is used to set its starting position on the map. When the kangaroo moves, a function runs using a local variable to determine the new position. If the kangaroo moves to a new area, the global variable must be updated so the game remembers the new position.

Global Conditions/Scope

With Javascript, a variable that is called outside of a function is considered a global condition. The following code includes a variable that contains objects, these objects are the number of apples and carrots the player starts with in the game.

// Global inventory counts for apple and carrot
window.inventoryCount = {
  apple: 9,
  carrot: 9
};

Arrays

An Array can contain multiple values for a single object, such as the location of an apple object within the game, as well as the image used and the size of the image.

// Global inventory items array (excluding the inventory icon)
window.inventoryItems = [
  {
    name: "apple",
    x: 50,     
    y: 50,
    width: 50,
    height: 50,
    src: "assets/images/apple.png",
    image: new Image()
  },
  {
    name: "carrot",
    x: 150,
    y: 50,
    width: 50,
    height: 50,
    src: "assets/images/carrot.png",
    image: new Image()
  }
];

Functions

A function is the logic the game uses when an variable is called or an event is triggered. Functions sit inside blocks of code nested within in curly brackets, here is a function that is used to draw the player health and energy stats on canvas, also ground and the inventory icon. This function also includes a conditional statement, I will explain conditional statements further in the next section. A game will typically include multiple functions.

// Function to draw the game view function drawGame() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Display player stats ctx.fillStyle = "black"; ctx.font = "20px Arial"; ctx.fillText("Health: " + playerHealth, 10, canvas.height - 10); ctx.fillText("Energy: " + playerEnergy, 10, canvas.height - 40); // Draw the ground (visual representation) ctx.fillStyle = "green"; ctx.fillRect(0, ground.y + kangaroo.height, canvas.width, 10); // Simple ground line // Draw the inventory icon if (window.inventoryIcon.image.complete) { ctx.drawImage( window.inventoryIcon.image, window.inventoryIcon.x, window.inventoryIcon.y, window.inventoryIcon.width, window.inventoryIcon.height ); }

Conditional Statements

Conditional Statements include the logic of a function, conditional statements include the statements IF, ELSE IF & ELSE. In laymans terms lets think of a scenario where you plan to play a game of soccer. IF you kick the ball in the goal, you score a point. ELSE IF you kick the ball out of bounds, ELSE IF you kick the ball to a team member, your team member gains the ball, ELSE IF you kick the ball to the opposition the opposition gains the ball. For anything ELSE, the ball is still in play. Below is an example of a conditional statement included in a function for a jumping kangaroo. This function includes parameters, I will explain parameters in the next section.

// Function to make the kangaroo jump
function jumpKangaroo(targetX) {
  if (playerEnergy < 10) {
    alert("Game Over! The kangaroo is out of energy and has gone to sleep.");
    return;
  }

  playerEnergy -= 10; // Reduce energy for jumping
  kangaroo.jumping = true;
  let jumpHeight = 100; // Max height of the jump
  let jumpSpeed = 5; // Jump speed
  let peakY = kangaroo.y - jumpHeight; // Highest point of the jump

  let jumpUp = setInterval(() => {
    if (kangaroo.y > peakY) {
      kangaroo.y -= jumpSpeed; // Move up
      kangaroo.x += (targetX - kangaroo.x) / 10; // Move towards target X smoothly
    } else {
      clearInterval(jumpUp);
      let fallDown = setInterval(() => {
        if (kangaroo.y < ground.y) {
          kangaroo.y += kangaroo.gravity; // Fall due to gravity
        } else {
          clearInterval(fallDown);
          kangaroo.y = ground.y; // Ensure it lands exactly on the ground
          kangaroo.x = targetX; // Lands at target X position
          kangaroo.jumping = false;
        }
      }, 30);
    }
  }, 30);
}

Parameters

Parameters can be used to provide pieces of information to a function. To use an example, lets say you are ordering a pizza. Making the pizza is a function but what ingredients will this pizza contain? will it contain salami, beef, olives etc? these ingredients are your parameters for the pizza. (typing this makes me want pizza). To provide an example of parameters used in JavaScript, the following code includes parameters within the curly brackets to draw the kangaroo image at X and Y coordinates. Parameters act as placeholders for values received by a function. Parameters can include global variables, that were first defined outside the function. Global function variables passed into a function as a parameter act as a local variables

  if (kangaroo.image.complete) {
    ctx.drawImage(kangaroo.image, kangaroo.x, kangaroo.y, kangaroo.width, kangaroo.height);
  }

Event listeners

Event listeners are used to listen for events, such as the player clicking on the mouse. In the following example if the player clicks on a location within the canvas window the jumpKangaroo function will be triggered

// Listen for clicks on the canvas canvas.addEventListener("click", function (e) { let rect = canvas.getBoundingClientRect(); let mouseX = e.clientX - rect.left; let mouseY = e.clientY - rect.top; // Check if the inventory icon was clicked let invIcon = window.inventoryIcon; if ( mouseX >= invIcon.x && mouseX <= invIcon.x + invIcon.width && mouseY >= invIcon.y && mouseY <= invIcon.y + invIcon.height ) { canvas.style.display = "none"; showInventory(); return; } if (!kangaroo.jumping) { jumpKangaroo(mouseX); // Start the jump } });

Load Order

The load order is the order that your code is loaded in, computers read code from top to bottom of the document. Variables must be first defined before being used in a function. In the below example, I make sure that the game loads the maingamev1.1.js script first before it loads the inventoryV1.1.js script. The reason I do this, is because the maingamev1.1.js script defines the global variable playerHealth. This variable is called within a function in the inventoryV1.1.js script, so I want the load order define the variable first before using the variable in the function.

<!-- Load the two JavaScript files -->
  <script src="maingameV1.1.js"></script>
  <script src="inventoryV1.1.js"></script>

Debugging

Debugging will be required when creating javaScript games. Debugging can be accomplished by acquiring error codes from your browser. To acquire these error codes first right click on your web browser to open the developer tab options (in edge they call it the inspect option) within this tab you can find the console output that includes error codes of your game, provide these error codes to GenAI for debugging assistince.

Version control

Version control is VERY important, ALWAYS BACK UP WORKING VERSIONS BEFORE MODIFYING THEM. For example, if you get a concept working in version 1.1 of the game SAVE that version as game-v1.1.js then create a copy of that file and name the copy game-v1.2.js. This way, if yourself or GenAI breaks your game, you can always roll back to the previous working version, TRUST ME, GenAI will break your game many times, and it will frustrate you.

Tip for working with GenAI, section your code!

A tip for working with GenAI, itemise sections of your code with comments. This will make it easier for updating your code when GenAI provides you frameworks, for example.


//Start of Section 1 of the Code  version 1.1

Javascript code that contains your variables

//End of Section 1 of the Code version 1.1

//Start of Section2 of the Code  version 1.1

Javascript code that containes your functions

//End of Section 2 of the Code  version 1.1

//Start of Section3 of the Code  version 1.1

Javascript code that contains your event listeners

//End of Section 3 of the Code  version 1.1

By sectioning your code using comments, GenAI (or other people assisting you with your code) can simply just prompt you on what section/s to update.

There is much more to learn about JavaScript, but now you know the basics you should be able to formulate prompts for GenAI to build the basic framework for your game. Now this is only the tip of the iceberg, other factors can include introducing object collision, multiple frames for your images (to simulate character movement) Complex mathematical algorithms to simulate gravity, mass, weight etc (dont worry, that what GenAI is for).

Anyway, I want to keep this article short and simple to explain the very basic concepts of creating a JavaScript game. If you have any questions, ask GenAI or myself. and as promised, here is the full code for the basic JavaScript game

If you get a white screen when running the code, its because you have not loaded your images in the assets/images directory.
Click here to demo the JavaScript Game

launchgameV1.4.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Launch Game</title>
  <style>
    canvas {
      background: #f0f0f0;
      display: block;
      margin: 0 auto;
    }
    #inventoryIcon {
      display: block;
      margin: 20px auto;
      cursor: pointer;
    }
    /* Hide inventory view by default */
    #inventoryContainer {
      display: none;
      text-align: center;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <!-- Inventory icon to access the inventory view (NEEDS DEBUGGING, inventory container displaies outside of canvus) -->
  <img src="assets/images/inventory.png" alt="Inventory" id="inventoryIcon" style="width: 0px; height: 0px;">
  
  <!-- Main game canvas -->
  <canvas id="gameCanvas" width="250" height="350"></canvas>
  
  <!-- Inventory container (will be populated by inventory.js) -->
  <div id="inventoryContainer"></div>
  
  <!-- Load the two JavaScript files -->
  <script src="maingameV1.1.js"></script>
  <script src="inventoryV1.1.js"></script>
</body>
</html>

maingamev1.1js file

// Global player stats
let playerHealth = 10;
let playerEnergy = 10;

// Define the inventory icon object
window.inventoryIcon = {
  name: "inventoryIcon",
  x: 100,
  y: 10,
  width: 40,
  height: 40,
  src: "assets/images/inventory.png",
  image: new Image()
};
window.inventoryIcon.image.src = window.inventoryIcon.src;

// Get the canvas and its drawing context
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");

// Define the ground object (defines where the kangaroo lands)
let ground = {
  y: 200, // Ground level (adjust if needed)
};

// Define the kangaroo object (defines movement)
let kangaroo = {
  x: 200, // Initial position
  y: ground.y, // Starts on the ground
  width: 50,
  height: 50,
  src: "assets/images/kangaroo.png",
  image: new Image(),
  jumping: false,
  speedY: 0, // Vertical speed for jumping
  gravity: 2, // Gravity strength
};
kangaroo.image.src = kangaroo.src;

// Function to draw the game view
function drawGame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Display player stats
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText("Health: " + playerHealth, 10, canvas.height - 10);
  ctx.fillText("Energy: " + playerEnergy, 10, canvas.height - 40);

  // Draw the ground (visual representation)
  ctx.fillStyle = "green";
  ctx.fillRect(0, ground.y + kangaroo.height, canvas.width, 10); // Simple ground line

  // Draw the inventory icon
  if (window.inventoryIcon.image.complete) {
    ctx.drawImage(
      window.inventoryIcon.image,
      window.inventoryIcon.x,
      window.inventoryIcon.y,
      window.inventoryIcon.width,
      window.inventoryIcon.height
    );
  }

  // Draw the kangaroo
  if (kangaroo.image.complete) {
    ctx.drawImage(kangaroo.image, kangaroo.x, kangaroo.y, kangaroo.width, kangaroo.height);
  }

  requestAnimationFrame(drawGame); // Continuously update canvas
}

// Function to make the kangaroo jump
function jumpKangaroo(targetX) {
  if (playerEnergy < 10) {
    alert("Game Over! The kangaroo is out of energy and has gone to sleep.");
    return;
  }

  playerEnergy -= 10; // Reduce energy for jumping
  kangaroo.jumping = true;
  let jumpHeight = 100; // Max height of the jump
  let jumpSpeed = 5; // Jump speed
  let peakY = kangaroo.y - jumpHeight; // Highest point of the jump

  let jumpUp = setInterval(() => {
    if (kangaroo.y > peakY) {
      kangaroo.y -= jumpSpeed; // Move up
      kangaroo.x += (targetX - kangaroo.x) / 10; // Move towards target X smoothly
    } else {
      clearInterval(jumpUp);
      let fallDown = setInterval(() => {
        if (kangaroo.y < ground.y) {
          kangaroo.y += kangaroo.gravity; // Fall due to gravity
        } else {
          clearInterval(fallDown);
          kangaroo.y = ground.y; // Ensure it lands exactly on the ground
          kangaroo.x = targetX; // Lands at target X position
          kangaroo.jumping = false;
        }
      }, 30);
    }
  }, 30);
}

// Listen for clicks on the canvas
canvas.addEventListener("click", function (e) {
  let rect = canvas.getBoundingClientRect();
  let mouseX = e.clientX - rect.left;
  let mouseY = e.clientY - rect.top;

  // Check if the inventory icon was clicked
  let invIcon = window.inventoryIcon;
  if (
    mouseX >= invIcon.x &&
    mouseX <= invIcon.x + invIcon.width &&
    mouseY >= invIcon.y &&
    mouseY <= invIcon.y + invIcon.height
  ) {
    canvas.style.display = "none";
    showInventory();
    return;
  }

  if (!kangaroo.jumping) {
    jumpKangaroo(mouseX); // Start the jump
  }
});

// Start the game loop
drawGame();

inventory.v1.1.js file

// inventory1.1.js

// Global inventory counts for apple and carrot
window.inventoryCount = {
  apple: 9,
  carrot: 9
};

// Global inventory items array (excluding the inventory icon)
window.inventoryItems = [
  {
    name: "apple",
    x: 50,     // Position for layout in the inventory view
    y: 50,
    width: 50,
    height: 50,
    src: "assets/images/apple.png",
    image: new Image()
  },
  {
    name: "carrot",
    x: 150,
    y: 50,
    width: 50,
    height: 50,
    src: "assets/images/carrot.png",
    image: new Image()
  }
];

// Load images for each inventory item
window.inventoryItems.forEach(function(item) {
  item.image.src = item.src;
});

// Function to use an apple (updates global playerHealth)
function useApple() {
  if (window.inventoryCount.apple > 0) {
    playerHealth += 10;  // playerHealth is global (declared in maingame.js)
    window.inventoryCount.apple--;
    updateInventoryDisplay();
  }
}

// Function to use a carrot (updates global playerEnergy)
function usecarrot() {
  if (window.inventoryCount.carrot > 0) {
    playerEnergy += 10;  // playerEnergy is global (declared in maingame.js)
    window.inventoryCount.carrot--;
    updateInventoryDisplay();
  }
}

// Function to update the inventory display (if it is open)
function updateInventoryDisplay() {
  let container = document.getElementById("inventoryContainer");
  if (container.style.display === "block") {
    showInventory();
  }
}

// Function to display the inventory view
function showInventory() {
  let container = document.getElementById("inventoryContainer");
  container.style.display = "block";
  container.innerHTML = ""; // Clear previous content

  // Create header for the inventory view
  let header = document.createElement("h2");
  header.textContent = "Inventory";
  container.appendChild(header);

  // For each inventory item (apple and carrot), create its display block
  window.inventoryItems.forEach(function(item) {
    let itemDiv = document.createElement("div");
    itemDiv.style.display = "inline-block";
    itemDiv.style.margin = "10px";

    let img = document.createElement("img");
    img.src = item.src;
    img.style.width = item.width + "px";
    img.style.height = item.height + "px";
    img.style.cursor = "pointer";
    itemDiv.appendChild(img);

    let countDisplay = document.createElement("p");
    if (item.name === "apple") {
      countDisplay.textContent = "Apples: " + window.inventoryCount.apple;
      // When the apple image is clicked, use an apple
      img.addEventListener("click", function() {
        useApple();
        countDisplay.textContent = "Apples: " + window.inventoryCount.apple;
      });
    } else if (item.name === "carrot") {
      countDisplay.textContent = "carrots: " + window.inventoryCount.carrot;
      // When the carrot image is clicked, use a carrot
      img.addEventListener("click", function() {
        usecarrot();
        countDisplay.textContent = "carrots: " + window.inventoryCount.carrot;
      });
    }
    itemDiv.appendChild(countDisplay);
    container.appendChild(itemDiv);
  });

  // Add a button to return to the main game view
  let backButton = document.createElement("button");
  backButton.textContent = "Back to Game";
  backButton.style.display = "block";
  backButton.style.margin = "20px auto";
  backButton.addEventListener("click", function() {
    container.style.display = "none";
    document.getElementById("gameCanvas").style.display = "block";
    drawGame();
  });
  container.appendChild(backButton);
}

Shanes Curries Blog