<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solo Survivor: Rogue Adventure</title>
<style>
body { text-align: center; background-color: black; color: white; font-
family: Arial, sans-serif; }
canvas { background-color: #222; display: block; margin: auto; border: 2px
solid white; }
#characterSelect { margin-bottom: 20px; }
#weaponSelect { margin-top: 20px; color: white; font-size: 20px; }
</style>
</head>
<body>
<h1>Solo Survivor: Rogue Adventure</h1>
<p>Move: Arrow Keys | Attack: Spacebar</p>
<div id="characterSelect">
<label>Select Character: </label>
<select id="characterChoice">
<option value="male">Male Warrior</option>
<option value="female">Female Rogue</option>
</select>
<button onclick="startGame()">Start Game</button>
</div>
<div id="weaponSelect" style="display: none;">
<h2>Select Weapon</h2>
<button onclick="selectWeapon('sword')">Short Range Weapon (Sword)</button>
<button onclick="selectWeapon('crossbow')">Long Range Weapon
(Crossbow)</button>
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 500;
let player = null;
let enemies = [];
let killCount = 0;
let weapon = null;
let weaponUpgrades = 0;
let tornadoes = []; // Array to store tornadoes
let tornadoCooldown = 0; // Cooldown timer for tornado (10 seconds)
function startGame() {
document.getElementById("characterSelect").style.display = "none";
document.getElementById("weaponSelect").style.display = "block";
const choice = document.getElementById("characterChoice").value;
player = {
x: canvas.width / 2,
y: canvas.height / 2,
width: 40,
height: 40,
color: choice === "male" ? "blue" : "pink",
health: 1000,
direction: { x: 0, y: 0 },
update: function () {
this.x += this.direction.x * 5;
this.y += this.direction.y * 5;
this.x = Math.max(0, Math.min(canvas.width - this.width,
this.x));
this.y = Math.max(0, Math.min(canvas.height - this.height,
this.y));
},
draw: function () {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
}
function selectWeapon(choice) {
weapon = {
type: choice,
damage: choice === "sword" ? 20 : 1, // 1 damage per arrow for
crossbow
upgrades: 0,
attack: function () {
if (this.type === "sword") {
// Sword melee attack logic (creates a tornado only in
ultimate form)
if (this.upgrades >= 5 && tornadoCooldown <= 0) {
// Sword in ultimate form (God Killer) creates a
tornado
ctx.fillStyle = "red"; // God Killer sword color
createTornado(); // Create tornado when sword is used
in ultimate form
} else {
ctx.fillStyle = "gray"; // Regular sword color
}
ctx.fillRect(player.x, player.y - 30, 40, 20); // Melee
attack range
} else if (this.type === "crossbow") {
// Crossbow logic (one shot per click before ultimate form)
if (this.upgrades < 5) {
ctx.fillStyle = "white"; // Regular crossbow shot
ctx.beginPath();
ctx.moveTo(player.x + player.width / 2, player.y);
ctx.lineTo(player.x + player.width / 2 + 50, player.y -
50); // Arrow shot
ctx.stroke();
} else {
// Ultimate crossbow (Stormpiercer) logic
ctx.fillStyle = "lightblue";
setInterval(() => {
ctx.beginPath();
ctx.moveTo(player.x + player.width / 2, player.y);
ctx.lineTo(player.x + player.width / 2 + 50,
player.y - 50); // Arrow shot
ctx.stroke();
}, 250); // Fires every 250ms (4 arrows per second)
}
}
},
upgrade: function () {
this.upgrades++;
this.damage += 2;
if (this.upgrades === 5) {
if (this.type === "sword") {
this.type = "God Killer";
} else if (this.type === "crossbow") {
this.type = "Stormpiercer";
}
}
}
};
document.getElementById("weaponSelect").style.display = "none";
setInterval(spawnEnemy, 2000);
gameLoop();
}
// Function to create tornadoes only when the sword is in its ultimate form
function createTornado() {
tornadoes.push({
x: player.x + player.width / 2,
y: player.y - 50,
duration: 4000, // Tornado lasts for 4 seconds
damage: 4, // Tornado damage
moveDirection: player.direction, // Move in the direction of the
sword attack
update: function () {
this.x += this.moveDirection.x * 3; // Move tornado in attack
direction
this.y += this.moveDirection.y * 3;
this.duration -= 100; // Reduce duration over time
},
draw: function () {
ctx.fillStyle = "cyan";
ctx.beginPath();
ctx.arc(this.x, this.y, 30, 0, Math.PI * 2);
ctx.fill();
}
});
tornadoCooldown = 10000; // Set the tornado cooldown to 10 seconds
(10000 ms)
}
// Check if tornado hits any enemy
function checkTornadoHits() {
tornadoes.forEach(tornado => {
enemies.forEach(enemy => {
let dx = enemy.x - tornado.x;
let dy = enemy.y - tornado.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 30) {
enemy.health -= tornado.damage; // Damage the enemy if in
tornado's range
}
});
});
}
function spawnEnemy() {
const types = ["ork", "ghost"];
const type = types[Math.floor(Math.random() * types.length)];
const side = Math.random() > 0.5 ? "left" : "right";
let enemy = {
x: side === "left" ? 0 : canvas.width - 20,
y: Math.random() * canvas.height,
width: 30,
height: 30,
color: type === "ork" ? "green" : "white",
type: type,
health: 10, // Enemy health
update: function () {
let dx = player.x - this.x;
let dy = player.y - this.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 1) {
this.x += (dx / distance) * 2;
this.y += (dy / distance) * 2;
}
},
draw: function () {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
enemies.push(enemy);
}
function attack() {
weapon.attack();
enemies = enemies.filter(enemy => {
let dx = enemy.x - player.x;
let dy = enemy.y - player.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 30) {
killCount++;
return false;
}
return true;
});
}
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowUp") player.direction.y = -1;
if (e.key === "ArrowDown") player.direction.y = 1;
if (e.key === "ArrowLeft") player.direction.x = -1;
if (e.key === "ArrowRight") player.direction.x = 1;
if (e.key === " ") attack();
});
document.addEventListener("keyup", (e) => {
if (e.key === "ArrowUp" || e.key === "ArrowDown") player.direction.y =
0;
if (e.key === "ArrowLeft" || e.key === "ArrowRight") player.direction.x
= 0;
});
// Game loop
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update and draw player
player.update();
player.draw();
// Update and draw tornadoes (if any)
tornadoes.forEach(tornado => {
tornado.update();
tornado.draw();
});
// Update and draw enemies
enemies.forEach(enemy => {
enemy.update();
enemy.draw();
});
// Check if tornado hits any enemy
checkTornadoHits();
// Draw health bar
ctx.fillStyle = "white";
ctx.fillText("Health: " + Math.round(player.health), 10, 20);
// Check for game over
if (player.health <= 0) {
alert("Game Over! Refresh to restart.");
window.location.reload(); // Reload game to restart
return;
}
// Handle tornado cooldown
if (tornadoCooldown > 0) {
tornadoCooldown -= 100; // Decrease cooldown over time
}
requestAnimationFrame(gameLoop);
}
// Start the game
setInterval(spawnEnemy, 2000);
gameLoop();
</script>
</body>
</html>
