<!--
-- Uploaded on : https://haxor.my.id/open/game_1.html
-- Official Web : https://prinsh.com
-- script-deface-generator.prinsh.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vago Esha Vago Game</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e3e3e3;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Character properties
const characters = {
esha: { x: 50, y: 500, width: 40, height: 60, color: "pink", speed: 2, isJumping: false },
sefat: { x: 300, y: 500, width: 40, height: 60, color: "cyan", speed: 2, isJumping: false }
};
// Obstacles array
const obstacles = [];
let obstacleTimer = 0;
// Game variables
let score = 0;
let isGameOver = false;
// Control events
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp") {
jumpCharacter(characters.esha);
} else if (event.key === "ArrowRight") {
moveCharacter(characters.esha, 50);
} else if (event.key === "ArrowLeft") {
moveCharacter(characters.esha, -50);
} else if (event.key === "w") {
jumpCharacter(characters.sefat);
} else if (event.key === "d") {
moveCharacter(characters.sefat, 50);
} else if (event.key === "a") {
moveCharacter(characters.sefat, -50);
}
});
function jumpCharacter(character) {
if (!character.isJumping) {
character.isJumping = true;
let jumpHeight = 0;
const jumpInterval = setInterval(() => {
if (jumpHeight < 100) {
character.y -= 5;
jumpHeight += 5;
} else {
clearInterval(jumpInterval);
fallCharacter(character);
}
}, 20);
}
}
function fallCharacter(character) {
let fallInterval = setInterval(() => {
if (character.y < 500) {
character.y += 5;
} else {
clearInterval(fallInterval);
character.isJumping = false;
}
}, 20);
}
function moveCharacter(character, distance) {
character.x += distance;
if (character.x < 0) {
character.x = 0; // Stay in bounds
} else if (character.x > canvas.width - character.width) {
character.x = canvas.width - character.width; // Stay in bounds
}
}
// Draw function
function drawCharacter(character) {
ctx.fillStyle = character.color;
ctx.fillRect(character.x, character.y, character.width, character.height);
}
// Obstacle creation
function createObstacle() {
obstacles.push({
x: Math.random() * (canvas.width - 40),
y: -40,
width: 40,
height: 40,
color: "red"
});
}
// Draw obstacles
function drawObstacles() {
obstacles.forEach((obstacle) => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
obstacle.y += characters.esha.speed; // Move down
});
}
// Collision detection
function detectCollision() {
obstacles.forEach((obstacle) => {
if (
(characters.esha.x < obstacle.x + obstacle.width &&
characters.esha.x + characters.esha.width > obstacle.x &&
characters.esha.y < obstacle.y + obstacle.height &&
characters.esha.y + characters.esha.height > obstacle.y) ||
(characters.sefat.x < obstacle.x + obstacle.width &&
characters.sefat.x + characters.sefat.width > obstacle.x &&
characters.sefat.y < obstacle.y + obstacle.height &&
characters.sefat.y + characters.sefat.height > obstacle.y)
) {
isGameOver = true;
}
});
}
// Game loop
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCharacter(characters.esha);
drawCharacter(characters.sefat);
drawObstacles();
detectCollision();
if (isGameOver) {
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Game Over!", 100, canvas.height / 2);
ctx.fillText("Score: " + score, 130, canvas.height / 2 + 40);
return;
}
score++;
if (obstacleTimer % 100 === 0) {
createObstacle();
}
obstacleTimer++;
requestAnimationFrame(gameLoop);
}
// Start the game
gameLoop();
</script>
</body>
</html>