Scribd
Upload
12 views5 pages

JavaScript 2D Game Project

The document outlines a simple 2D JavaScript game called 'Catch the Falling Ball', where players control a red box to catch a falling blue ball to increase their score. The game ends when the ball touches the ground without being caught. The project includes HTML and JavaScript code, along with reflections on the learning experience and challenges faced during development.

Uploaded by

noumanpak17
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views5 pages

JavaScript 2D Game Project

The document outlines a simple 2D JavaScript game called 'Catch the Falling Ball', where players control a red box to catch a falling blue ball to increase their score. The game ends when the ball touches the ground without being caught. The project includes HTML and JavaScript code, along with reflections on the learning experience and challenges faced during development.

Uploaded by

noumanpak17
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Simple 2D JavaScript Game Project

Game Concept: Catch the Falling Ball

Objective: The player controls a red box and tries to catch the falling blue ball.
Win/Lose Condition: Each time the player catches the ball, the score increases.
If the ball touches the ground without being caught, the game is over.

HTML Code ([Link])


<!DOCTYPE html>
<html>
<head>
<title>Catch the Falling Ball</title>
<style>
canvas { background: lightblue; display: block; margin: auto; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="[Link]"></script>
</body>
</html>

JavaScript Code ([Link])


const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");

let playerX = 180;


let playerY = 350;
let ballX = [Link]() * 360;
let ballY = 0;
let score = 0;

function drawPlayer() {
[Link] = "red";
[Link](playerX, playerY, 40, 40);
}

function drawBall() {
[Link]();
[Link](ballX, ballY, 15, 0, [Link] * 2);
[Link] = "blue";
[Link]();
}

function update() {
[Link](0, 0, [Link], [Link]);
drawPlayer();
drawBall();

ballY += 5;

if (ballY > 350 && ballX > playerX && ballX < playerX + 40) {
score++;
ballY = 0;
ballX = [Link]() * 360;
}

if (ballY > 400) {


alert("Game Over! Score: " + score);
[Link]();
}

[Link] = "black";
[Link]("Score: " + score, 10, 20);
}

setInterval(update, 30);

[Link]("keydown", function(event) {
if ([Link] === "ArrowLeft") playerX -= 20;
if ([Link] === "ArrowRight") playerX += 20;
});
Game Screenshots

Screenshot 1: The game is running. The player is catching the falling ball and the score is
increasing.

Screenshot 2: The player moves left or right using arrow keys to catch the ball.
Screenshot 3: Game over screen appears when the ball touches the ground.
Reflection

In this project, I learned how to use JavaScript with the HTML canvas to create a simple 2D game.
I understood how to draw shapes, move objects, and detect collisions. I also learned how to use
variables and functions to control game logic and scoring.

The most challenging part was collision detection between the player and the ball.
I solved this by checking the position of both objects and comparing their coordinates.
This project improved my problem-solving skills and helped me understand how games work
behind the scenes.

You might also like