gistlib - make a mario game in javascript

To create a Mario game in JavaScript, we will use the HTML5 Canvas element to render the graphics and handle user input using event listeners. This tutorial will cover the basics of creating a scrolling 2D platformer game with Mario as the main character.

Here are the steps to create a simple Mario game in JavaScript:

Set up your HTML file with a canvas element to render the game graphics:


index.tsx
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mario Game</title>
</head>
<body>
	<canvas id="game" width="600" height="400"></canvas>
	<script src="game.js"></script>
</body>
</html>
209 chars
12 lines

Create the game.js file and set up the canvas context:


index.tsx
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
85 chars
3 lines

Define the game objects, such as Mario, enemies, and obstacles:


index.tsx
const mario = {
	x: 50,
	y: 300,
	width: 50,
	height: 50,
	speed: 5,
	jumping: false
}

const goomba = {
	x: 300,
	y: 350,
	width: 50,
	height: 50
}

const mushroom = {
	x: 500,
	y: 350,
	width: 50,
	height: 50
}

const obstacles = [goomba, mushroom];
252 chars
25 lines

Draw the game objects on the canvas using the ctx.drawImage() method:


index.tsx
// Draw Mario
const marioImg = new Image();
marioImg.src = 'mario.png';
ctx.drawImage(marioImg, mario.x, mario.y, mario.width, mario.height);

// Draw obstacles
const goombaImg = new Image();
goombaImg.src = 'goomba.png';

const mushroomImg = new Image();
mushroomImg.src = 'mushroom.png';

obstacles.forEach(obstacle => {
	if (obstacle === goomba) {
		ctx.drawImage(goombaImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
	} else {
		ctx.drawImage(mushroomImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
	}
});
540 chars
20 lines

Handle user input using event listeners:


index.tsx
document.addEventListener('keydown', (event) => {
	if (event.keyCode === 38) {
		mario.jumping = true;
	}
});

document.addEventListener('keyup', (event) => {
	if (event.keyCode === 38) {
		mario.jumping = false;
	}
});
220 chars
12 lines

Update the game state and redraw the canvas every animation frame using the requestAnimationFrame() method:


index.tsx
function update() {
	// Move Mario based on user input
	if (mario.jumping) {
		mario.y -= mario.speed * 2;
	} else if (mario.y < 300) {
		mario.y += mario.speed;
	}

	// Check for collisions between Mario and obstacles
	obstacles.forEach(obstacle => {
		if (collides(mario, obstacle)) {
			// End the game or decrement health
		}
	});

	// Clear the canvas and redraw the game objects
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(marioImg, mario.x, mario.y, mario.width, mario.height);

	obstacles.forEach(obstacle => {
		if (obstacle === goomba) {
			ctx.drawImage(goombaImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
		} else {
			ctx.drawImage(mushroomImg, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
		}
	});

	// Request the next animation frame
	requestAnimationFrame(update);
}
836 chars
31 lines

Implement collision detection using the following collides() function:


index.tsx
function collides(obj1, obj2) {
	return obj1.x < obj2.x + obj2.width &&
				 obj1.x + obj1.width > obj2.x &&
				 obj1.y < obj2.y + obj2.height &&
				 obj1.y + obj1.height > obj2.y;
}
185 chars
7 lines

This is just a basic example of how to make a Mario game in JavaScript. Further features such as multiple levels and power-ups can be added to increase the complexity and fun of the game.

make a mario game in javascript

similar javascript code snippets

related categories