Skip to main content

Tutorial-1: Creating an HTML5 Game

In this tutorial, we'll create a simple HTML5 game using JavaScript, inspired by the game development tutorial from W3Schools.

Pre-requisites​

Before we begin, ensure you have:

  • Basic understanding of HTML, CSS, and JavaScript.
  • A code editor like Visual Studio Code or Sublime Text installed on your system.

Steps​

Step 1: Set Up HTML Structure​

Create a new HTML file (e.g., index.html) and set up the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HTML5 Game</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <canvas id="myCanvas" width="480" height="320"></canvas>

  <script src="game.js"></script>
</body>
</html>

Step 2: Style the Canvas (Optional)​

Create a CSS file named styles.css to style the canvas:

body {
  margin: 0;
}

canvas {
  border: 1px solid black;
  display: block;
  margin: auto;
}

Step 3: Write JavaScript for the Game​

Create a JavaScript file named game.js and implement the game logic:

// Get the canvas element
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Ball properties
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var ballRadius = 10;

// Paddle properties
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;

// Control variables
var rightPressed = false;
var leftPressed = false;

// Event listeners for paddle movement
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

// Functions to handle key events
function keyDownHandler(e) {
  if (e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = true;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key == "Right" || e.key == "ArrowRight") {
    rightPressed = false;
  } else if (e.key == "Left" || e.key == "ArrowLeft") {
    leftPressed = false;
  }
}

// Draw the ball on the canvas
function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

// Draw the paddle on the canvas
function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

// Main draw function
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();

  // Ball collision detection with walls
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (y + dy < ballRadius) {
    dy = -dy;
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      document.location.reload();
      alert("GAME OVER");
    }
  }

  // Paddle movement
  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  }

  x += dx;
  y += dy;
  requestAnimationFrame(draw);
}

draw(); // Start the game loop

Step 4: Test Your Game​

Open the index.html file in a web browser to test your HTML5 game. Use the left and right arrow keys to move the paddle and prevent the ball from falling off the bottom of the screen.

Step 5: Customize and Expand​

Feel free to customize and expand upon the game by adding features like scoring, multiple levels, or different types of objects.

Conclusion​

You have successfully created a simple HTML5 game using JavaScript, following the basics outlined in the W3Schools game development tutorial.