Simple HTML Game: Catch the Ball

This is a basic HTML game called 'Catch the Ball' that you can try out and learn from. It's perfect for beginners to get started with web development and game programming.

Game Overview

The goal is to catch as many balls as you can before the timer runs out. Use your keyboard to control a basket and try to position it under falling balls.

Game Instructions

Click the 'Start Game' button to begin.
Move the basket left and right using the left and right arrow keys.
Catch as many balls as possible by positioning the basket below them.
You have 60 seconds to play.
Your score is displayed at the end.

Game Code

To build this game, you'll use HTML, CSS, and JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
	<title>Catch the Ball</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<center>
		<h1>Catch the Ball</h1>
		<p>Use the left and right arrow keys to move the basket.</p>
		<p>Click the button to start the game.</p>
		<button onclick="startGame()">Start Game</button>
		<br><br>
		<canvas id="myCanvas" width="480" height="320"></canvas>
	</center>
	<script>
		var canvas;
		var context;
		var ballX = 240;
		var ballY = 20;
		var ballSpeedX = 5;
		var ballSpeedY = 7;
		var basketX = 200;
		var score = 0;
		var time = 60;

		function startGame() {
			canvas = document.getElementById("myCanvas");
			context = canvas.getContext("2d");
			var gameTimer = setInterval(updateGame, 1000/30);
			var timer = setInterval(updateTimer, 1000);
			document.addEventListener('keydown', moveBasket);
		}

		function moveBasket(event) {
			if (event.keyCode == 37) { // left arrow
				basketX -= 20;
			} else if (event.keyCode == 39) { // right arrow
				basketX += 20;
			}
		}

		function updateGame() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawBasket();
			drawBall();
			moveBall();
			checkCollision();
			drawScore();
			drawTime();
		}

		function drawBasket() {
			context.fillStyle = "blue";
			context.fillRect(basketX, canvas.height - 20, 80, 10);
		}

		function drawBall() {
			context.beginPath();
			context.arc(ballX, ballY, 10, 0, Math.PI*2);
			context.fillStyle = "red";
			context.fill();
			context.closePath();
		}

		function moveBall() {
			ballX += ballSpeedX;
			ballY += ballSpeedY;
			if (ballX < 10 || ballX > canvas.width - 10) {
				ballSpeedX = -ballSpeedX;
			}
			if (ballY < 10 || ballY > canvas.height - 30) {
				ballSpeedY = -ballSpeedY;
			}
		}

		function checkCollision() {
			if (ballY > canvas.height - 30 && ballX > basketX && ballX < basketX + 80) {
				score++;
				ballX = Math.random() * (canvas.width - 20) + 10;
				ballY = 20;
				ballSpeedX = (Math.random() * 10) - 5;
				ballSpeedY = (Math.random() * 10) + 5;
			}
		}

		function drawScore() {
			context.fillStyle = "black";
			context.font = "20px Arial";
			context.fillText("Score: " + score, 10, 30);
		}

		function updateTimer() {
			time--;
			if (time == 0) {
				clearInterval(gameTimer);
				alert("Game Over! Your score is " + score);
			}
		}

		function drawTime() {
			context.fillStyle = "black";
			context.font = "20px Arial";
			context.fillText("Time: " + time, canvas.width - 90, 30);
		}
	</script>
</body>
</html>

Conclusion

This simple HTML game demonstrates basic JavaScript and CSS concepts for web development and game programming. Feel free to modify the code and experiment with different features. Enjoy playing!

Simple HTML Game: Catch the Ball - Learn to Code and Have Fun

Simple HTML Game: Catch the Ball - Learn to Code and Have Fun

Simple HTML Game: Catch the Ball

Game Overview

Game Instructions

Game Code

Conclusion