Scribd
Upload
12 views4 pages

Advanced Gamer's Game

The document outlines the structure and functionality of a simple HTML game using JavaScript and a canvas element. It includes player movement, jumping mechanics, enemy AI, collision detection, and sound effects. There are several coding errors and typos present that would need to be corrected for the game to function properly.

Uploaded by

kidsdaddali
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
12 views4 pages

Advanced Gamer's Game

The document outlines the structure and functionality of a simple HTML game using JavaScript and a canvas element. It includes player movement, jumping mechanics, enemy AI, collision detection, and sound effects. There are several coding errors and typos present that would need to be corrected for the game to function properly.

Uploaded by

kidsdaddali
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/ 4

<!

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" cntent="width=device-width, initial-scale=1.0" />
<titile>HTML Game</title>
<link rel="stylesheet" herf="style.css" />
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="main.js"></script>
</body>
</html>

body {
margin: 0;
overflow: hidden;
background-color: black;
}

canvas {
display: block;
}

/ / Setup the Canvas


const canvas = document.getElementById( 'gameCanvas ' );
const ctx = canvas.getContext( ' 2d ' );

/ / Canvas Size
canvas.width = 800;
canvas.height = 600;

/ / Player Variables
let player = {
x: 50,
y: 500,
width: 50,
height: 50,
speed: 5,
dx: 0,
dy: 0,
gravity: 0.5,
jumpStrength: -10,
is jumping: false,
};

/ / Keyboard Input
let keys = {};
document.addEventListener( 'keydown ', (e) => (keys[e.key] = true));
document.addEventListener( 'keyup ' , (e) => (keys[e.key] = false));

/ / Game Loop
function gameLoop() {
update();
draw();
AnimationFrame(gameLoop);
}

/ / Update Function
function update() {
/ / Movement Controls
if (keys[ 'ArrowRight ' ]) player.dx = player.speed;
else if (keys[ 'ArrowLeft]) player.dx = player.speed;
else player.dx = 0;
}

/ / Jump Logic
if(keyes[' ']) jump();

/ / Gravity and Movement


player.dy += player.grvity;
plyer.x += player.dx;
player.y += player.dy;

/ / Prevent Falling Below Floor


if (player.y > canvas.height - player.height) {
player.y = canvas.height - player.height;
player.dy = 0;
player.isJumping = false;
}
}

/ / Jump Function
function jump() {
if (!player.isJumping) }
player.dy = player.jumpStrength;
player.isJumping = true;
}
}

/ / Draw Function
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

/ / Draw Player
ctx. fillstyle = 'red';
ctx.fillRect(player.x, player.y, player.width, player.height);

/ / Draw Ground
ctx.fillstyle = 'green';
ctx.fillRect(0, canvas.height - 10, canvas.width. 10);
}

/ /Start Game Loop


gameloop();

/ /Enemy Variables
let enemy = {
x: 400
y: 550
height: 50
width: 50
speed: 2'
direction: 1 // 1 for right, -1 for left
};

/ / Update Enemy
function updateenemy({
enemy.x += enemy.speed * enemy.direction;

/ / Reverse Direction and Boundries


if (enemy.x < = 0 | | enemy.x + enemy.width > =canvas.width) {
enemy.direction *= -1;
}

/ / Collison Detection with Player


if (
player.x < enemy.x + enemy.width &&
player.x + player.width < enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
alert('Game Over ! You collided with an enemy.');
resetGame();
}
}

/ / Reset Game
function reset game() {
player.x = 50;
player.y = 500;
enemy.x = 400;
enemy.direction = 1;
}

/ / Draw Enemy
function drawEnemy() {
ctx.fillStyle = 'blue';
ctx.fillRect(enemy.x, enemy.width, enemy.height);
}

/ / Update Game Loop


function update() {
/ / Player Movement
if (keys['ArrowRight]) player.dx = player.speed;
else if (keys[ArrowLeft]) player.dx = player.speed;
else player.dx = 0;

if (keys[' ']) jump();

player.dy += player.gravity;
player.x += player.dx;
player.y += player.dy;

/ / Prevent Falling Below Floor


if (player.y > canvas.height - player.height) {
player.y = canvas.height - player.height;
player.dy = 0;
playre.isJumping = false;
}

/ / Update Enemy AI
updateEnemy();
}

/ /Draw Game Objects


function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

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

/ / Enemy
drawEnemy();

/ / Ground
ctx.fillStyle = 'green';
ctx.fillRect(0, canvas.height - 10, canvas.width, 10);
}

/ / Start Game Loop


gameLoop();

/ / Sound Effects
let jumpSound = new Audio('assets/sounds/jump.mp3');
let collisionSound = new Audio('assets/sounds/collision.mp3');

/ / Play Jump Sound


function jump() {
if (!player.isJumping) {
player.dy = player.jumpStrength;
player.isJumping = true;
jumpSound.play(); / / Play sound on jump
}
}

/ / Collision Sound
function resetGame() {
collisionSound.play(); / / Play sound when colliding
player.x = 50;
player.y = 500;
enemy.x = 400;
enemy.direction = 1;
}

You might also like