Fighters Club Roguelike Game
About this app
A stylish 2D roguelike fighter club game. Run, fight, level up, and choose your upgrades!
Fighters Club Roguelike Game Health: 100 Score: 0 Restart Game
Related apps
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fighters Club Roguelike Game</title>
<meta name="description" content="A stylish 2D roguelike fighter club game. Run, fight, level up, and choose your upgrades!">
<meta name="keywords" content="game, roguelike, fighter, club, 2D, battle, ancient, weapons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
background: #1e1e1e;
color: #fff;
user-select: none;
}
canvas {
display: block;
background-color: #111;
margin: auto;
image-rendering: pixelated;
}
#game-info {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="game-info">
<p>Health: <span id="playerHealth">100</span></p>
<p>Score: <span id="playerScore">0</span></p>
<button id="restart">Restart Game</button>
</div>
<script>
(function() {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const tileSize = 32;
const player = {
x: 5,
y: 5,
health: 100,
score: 0,
attack: 10,
sprite: '😃'
};
const monsters = [];
const monsterTypes = ['😈', '👹', '👺', '🐉'];
const weaponTypes = ['🗡️', '⚔️', '🔪', '🛡️'];
const gameSize = { width: canvas.width / tileSize, height: canvas.height / tileSize };
let gameActive = true;
// Draw the player
function drawPlayer() {
ctx.font = tileSize + 'px Arial';
ctx.fillText(player.sprite, player.x * tileSize, (player.y + 1) * tileSize);
}
// Draw monsters
function drawMonsters() {
for (const monster of monsters) {
ctx.fillText(monster.sprite, monster.x * tileSize, (monster.y + 1) * tileSize);
}
}
// Game loop
function gameLoop() {
if (!gameActive) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawMonsters();
requestAnimationFrame(gameLoop);
}
// Initialize game
function initGame() {
player.x = Math.floor(gameSize.width / 2);
player.y = Math.floor(gameSize.height / 2);
player.health = 100;
player.score = 0;
updateGameInfo();
monsters.splice(0, monsters.length); // Clear monsters array
spawnMonsters();
gameActive = true;
requestAnimationFrame(gameLoop);
}
// Update game info
function updateGameInfo() {
document.getElementById('playerHealth').textContent = player.health;
document.getElementById('playerScore').textContent = player.score;
}
// Spawn monsters
function spawnMonsters() {
for (let i = 0; i < 5; i++) {
monsters.push({
x: Math.floor(Math.random() * gameSize.width),
y: Math.floor(Math.random() * gameSize.height),
health: 50,
sprite: monsterTypes[Math.floor(Math.random() * monsterTypes.length)]
});
}
}
// Handle player movement
document.addEventListener('keydown', function(event) {
if (!gameActive) return;
switch (event.key) {
case 'ArrowUp': player.y = Math.max(0, player.y - 1); break;
case 'ArrowDown': player.y = Math.min(gameSize.height - 1, player.y + 1); break;
case 'ArrowLeft': player.x = Math.max(0, player.x - 1); break;
case 'ArrowRight': player.x = Math.min(gameSize.width - 1, player.x + 1); break;
}
});
// Restart button
document.getElementById('restart').addEventListener('click', initGame);
// Start the game
initGame();
})();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!