Scribd
Upload
7 views

Code 2, HTML

Uploaded by

Anish S Taklikar
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
7 views

Code 2, HTML

Uploaded by

Anish S Taklikar
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>Fireball Dodge</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// JavaScript code for the game goes here
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Define player properties


let player = {
x: 50,
y: canvas.height - 50,
width: 30,
height: 30,
jumping: false,
jumpHeight: 100,
jumpDuration: 500, // milliseconds
jumpStart: 0,
velocityY: 0,
gravity: 0.5
};

// Fireballs array
let fireballs = [];

// Game variables
let score = 0;
let gameSpeed = 2;
let gameOver = false;

// Event listener for tap/click to jump


canvas.addEventListener('click', () => {
if (!player.jumping) {
player.jumping = true;
player.jumpStart = Date.now();
}
});

// Game loop
function gameLoop() {
if (!gameOver) {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player position


if (player.jumping) {
let jumpTime = Date.now() - player.jumpStart;
if (jumpTime < player.jumpDuration) {
player.velocityY = -10; // Adjust jump height
} else {
player.jumping = false;
player.velocityY = 0;
}
} else {
player.velocityY += player.gravity;
}

player.y += player.velocityY;

// Draw player
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);

// Generate fireballs
if (Math.random() < 0.02) {
fireballs.push({
x: Math.random() * canvas.width,
y: 0,
radius: 10,
speed: Math.random() * 3 + 1 // random speed between 1 and
4
});
}

// Update and draw fireballs


fireballs.forEach((fireball, index) => {
fireball.y += fireball.speed;
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(fireball.x, fireball.y, fireball.radius, 0, Math.PI *
2);
ctx.fill();

// Check collision with player


if (collision(player, fireball)) {
gameOver = true;
}

// Remove fireball if off screen


if (fireball.y > canvas.height) {
fireballs.splice(index, 1);
score++;
}
});

// Display score
ctx.fillStyle = 'black';
ctx.font = '24px Arial';
ctx.fillText('Score: ' + score, 10, 30);
// Request next frame
requestAnimationFrame(gameLoop);
} else {
// Game over
ctx.fillStyle = 'black';
ctx.font = '36px Arial';
ctx.fillText('Game Over!', canvas.width / 2 - 100, canvas.height /
2 - 50);
ctx.fillText('Score: ' + score, canvas.width / 2 - 80,
canvas.height / 2);
}
}

// Function to check collision between two objects


function collision(player, fireball) {
let dx = player.x + player.width / 2 - fireball.x;
let dy = player.y + player.height / 2 - fireball.y;
let distance = Math.sqrt(dx * dx + dy * dy);

return distance < player.width / 2 + fireball.radius;


}

// Start the game loop


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

You might also like