[go: up one dir, main page]
Scribd
Upload
6 views3 pages

Text

The document is an HTML file that implements a simple falling cubes game using JavaScript and a canvas element. Players control a paddle to catch falling cubes while trying to avoid letting them hit the ground, with a scoring system and lives. The game ends when the player loses all their lives, displaying a game over screen with the final score.

Uploaded by

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

Text

The document is an HTML file that implements a simple falling cubes game using JavaScript and a canvas element. Players control a paddle to catch falling cubes while trying to avoid letting them hit the ground, with a scoring system and lives. The game ends when the player loses all their lives, displaying a game over screen with the final score.

Uploaded by

4jqgqfvxgc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Falling Cubes Game</title>
<style>
canvas {
display: block;
margin: 0 auto;
background: #f0f0f0;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Set canvas size


canvas.width = 400;
canvas.height = 600;

// Game variables
const paddle = {
x: canvas.width / 2 - 50,
y: canvas.height - 20,
width: 100,
height: 10,
speed: 5,
dx: 0,
};

const cubes = [];


const cubeSize = 20;
const cubeSpeed = 2;
const maxLives = 3;
let lives = maxLives;
let score = 0;
let gameOver = false;

// Paddle movement
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") paddle.dx = -paddle.speed;
if (e.key === "ArrowRight") paddle.dx = paddle.speed;
});
document.addEventListener("keyup", (e) => {
if (e.key === "ArrowLeft" || e.key === "ArrowRight") paddle.dx = 0;
});

// Create a new cube


function createCube() {
const x = Math.random() * (canvas.width - cubeSize);
cubes.push({ x, y: 0 });
}

// Update paddle position


function movePaddle() {
paddle.x += paddle.dx;
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width)
paddle.x = canvas.width - paddle.width;
}

// Update cube positions


function moveCubes() {
for (let i = 0; i < cubes.length; i++) {
const cube = cubes[i];
cube.y += cubeSpeed;

// Check for collision with paddle


if (
cube.y + cubeSize > paddle.y &&
cube.x + cubeSize > paddle.x &&
cube.x < paddle.x + paddle.width
) {
cubes.splice(i, 1);
score++;
continue;
}

// Check if cube hits the ground


if (cube.y > canvas.height) {
cubes.splice(i, 1);
lives--;
if (lives === 0) gameOver = true;
}
}
}

// Draw paddle
function drawPaddle() {
ctx.fillStyle = "#0095DD";
ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

// Draw cubes
function drawCubes() {
ctx.fillStyle = "#FF5733";
for (const cube of cubes) {
ctx.fillRect(cube.x, cube.y, cubeSize, cubeSize);
}
}

// Draw score and lives


function drawScoreAndLives() {
ctx.fillStyle = "#000";
ctx.font = "16px Arial";
ctx.fillText(`Score: ${score}`, 10, 20);
ctx.fillText(`Lives: ${lives}`, canvas.width - 80, 20);
}

// Show game over screen


function drawGameOver() {
ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#fff";
ctx.font = "24px Arial";
ctx.textAlign = "center";
ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2 - 20);
ctx.fillText(`Score: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
ctx.fillText("Refresh to Restart", canvas.width / 2, canvas.height / 2 + 60);
}

// Update game state


function update() {
if (gameOver) return;

movePaddle();
moveCubes();

if (Math.random() < 0.02) createCube();


}

// Draw game state


function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
drawCubes();
drawScoreAndLives();
if (gameOver) drawGameOver();
}

// Game loop
function gameLoop() {
update();
draw();
if (!gameOver) requestAnimationFrame(gameLoop);
}

// Start game
gameLoop();
</script>
</body>
</html>

You might also like