Scribd
Upload
33 views5 pages

Game

The document is an HTML file that implements a simple 2D game similar to Swordigo using JavaScript and the HTML5 canvas. It includes player movement, jumping, sword attacks, enemies, platforms, and collectibles, with collision detection and score tracking. The game runs in a continuous loop, updating the game state and rendering graphics on the canvas.

Uploaded by

harshpavar33
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
33 views5 pages

Game

The document is an HTML file that implements a simple 2D game similar to Swordigo using JavaScript and the HTML5 canvas. It includes player movement, jumping, sword attacks, enemies, platforms, and collectibles, with collision detection and score tracking. The game runs in a continuous loop, updating the game state and rendering graphics on the canvas.

Uploaded by

harshpavar33
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/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swordigo-like Game</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
background-color: #87CEEB; /* Sky Blue */
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Canvas setup
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Game Variables
const gravity = 0.5;
let player = {
x: 50,
y: 50,
width: 50,
height: 50,
color: 'red',
speedX: 0,
speedY: 0,
jumping: false,
moveSpeed: 5,
health: 3,
score: 0,
sword: {
width: 20,
height: 5,
active: false,
direction: 'right' // Track which way the player is facing
}
};

// Platforms
let platforms = [
{ x: 0, y: canvas.height - 50, width: canvas.width, height: 50, color:
'green' },
{ x: 200, y: canvas.height - 150, width: 200, height: 20, color:
'green' }
];

// Enemies
let enemies = [
{ x: 300, y: canvas.height - 150 - 40, width: 40, height: 40, color:
'blue', speed: 2, alive: true }
];

// Collectibles
let collectibles = [
{ x: 150, y: canvas.height - 100, width: 20, height: 20, color:
'yellow', collected: false }
];

// Handle keyboard input


let keys = {};
window.addEventListener("keydown", function(e) {
keys[e.key] = true;

// Handle sword attack


if (e.key === " ") { // Spacebar for attack
player.sword.active = true;
setTimeout(() => { player.sword.active = false; }, 200); // Sword
active for 200ms
}
});
window.addEventListener("keyup", function(e) {
keys[e.key] = false;
});

// Player movement and jumping


function movePlayer() {
// Left and right movement
if (keys["ArrowRight"]) {
player.speedX = player.moveSpeed;
player.sword.direction = 'right';
} else if (keys["ArrowLeft"]) {
player.speedX = -player.moveSpeed;
player.sword.direction = 'left';
} else {
player.speedX = 0;
}

// Jumping
if (keys["ArrowUp"] && !player.jumping) {
player.jumping = true;
player.speedY = -10;
}

player.speedY += gravity;
player.x += player.speedX;
player.y += player.speedY;

// Collision detection with platforms


platforms.forEach(platform => {
if (
player.x < platform.x + platform.width &&
player.x + player.width > platform.x &&
player.y + player.height < platform.y + platform.height &&
player.y + player.height + player.speedY >= platform.y
) {
player.jumping = false;
player.speedY = 0;
player.y = platform.y - player.height;
}
});

// Boundary conditions (prevent player from falling off)


if (player.y + player.height > canvas.height) {
player.jumping = false;
player.speedY = 0;
player.y = canvas.height - player.height;
}
}

// Draw the player and sword


function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawSword() {
if (player.sword.active) {
ctx.fillStyle = 'silver';
let swordX = player.x + player.width; // Default sword position
(right side)
if (player.sword.direction === 'left') {
swordX = player.x - player.sword.width; // Sword on the left
when facing left
}
ctx.fillRect(swordX, player.y + player.height / 2,
player.sword.width, player.sword.height);
}
}

// Draw the platforms


function drawPlatforms() {
platforms.forEach(platform => {
ctx.fillStyle = platform.color;
ctx.fillRect(platform.x, platform.y, platform.width,
platform.height);
});
}

// Draw the enemies


function drawEnemies() {
enemies.forEach(enemy => {
if (enemy.alive) {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}
});
}

// Move enemies
function moveEnemies() {
enemies.forEach(enemy => {
if (enemy.alive) {
enemy.x += enemy.speed;
if (enemy.x + enemy.width > 400 || enemy.x < 200) {
enemy.speed *= -1; // Reverse direction when hitting
platform edges
}
}
});
}

// Draw collectibles
function drawCollectibles() {
collectibles.forEach(collectible => {
if (!collectible.collected) {
ctx.fillStyle = collectible.color;
ctx.fillRect(collectible.x, collectible.y, collectible.width,
collectible.height);
}
});
}

// Check if the player collects a collectible


function checkCollectibles() {
collectibles.forEach(collectible => {
if (!collectible.collected &&
player.x < collectible.x + collectible.width &&
player.x + player.width > collectible.x &&
player.y < collectible.y + collectible.height &&
player.y + player.height > collectible.y
) {
collectible.collected = true; // Mark collectible as collected
player.score += 10; // Increase score
}
});
}

// Check if the player collides with enemies and loses health


function checkPlayerEnemyCollision() {
enemies.forEach(enemy => {
if (enemy.alive &&
player.x < enemy.x + enemy.width &&
player.x + player.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
player.health--;
}
});
}

// Detect collision between sword and enemy


function checkSwordHit() {
if (player.sword.active) {
let swordX = player.x + player.width;
if (player.sword.direction === 'left') {
swordX = player.x - player.sword.width;
}
enemies.forEach(enemy => {
if (enemy.alive &&
swordX < enemy.x + enemy.width &&
swordX + player.sword.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
enemy.alive = false; // Kill the enemy
}
});
}
}

// Draw health and score


function drawHUD() {
ctx.fillStyle = 'black';
ctx.font = "20px Arial";
ctx.fillText("Health: " + player.health, 10, 30);
ctx.fillText("Score: " + player.score, 10, 50);
}

// Main game loop


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

movePlayer();
moveEnemies();
drawPlatforms();
drawPlayer();
drawSword();
drawEnemies();
drawCollectibles();
drawHUD();

checkSwordHit();
checkPlayerEnemyCollision();
checkCollectibles();

requestAnimationFrame(gameLoop);
}

// Start the game


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

You might also like