<html>
<head>
<meta charset="UTF-8">
<title>Steampunk JRPG</title>
<style>
body {
background-color: #2e2e2e;
color: #d3b17d;
font-family: 'Verdana', sans-serif;
margin: 0;
padding: 0;
}
#game {
width: 800px;
margin: 0 auto;
padding: 20px;
}
#output {
border: 1px solid #d3b17d;
padding: 10px;
height: 400px;
overflow-y: scroll;
background-color: #1e1e1e;
}
#input {
margin-top: 10px;
}
button {
background-color: #d3b17d;
border: none;
padding: 10px;
margin: 5px;
cursor: pointer;
color: #2e2e2e;
}
button:hover {
background-color: #b39465;
}
</style>
</head>
<body>
<div id="game">
<h1>Steampunk Adventure</h1>
<div id="output"></div>
<div id="input"></div>
</div>
<script>
// Game variables
let player = {
name: 'Adventurer',
level: 1,
exp: 0,
expToLevel: 100,
hp: 100,
maxHp: 100,
creatures: [],
location: 'Town'
};
let creatures = [
{name: 'Steam Golem', hp: 50, attack: 10},
{name: 'Clockwork Bird', hp: 30, attack: 15},
{name: 'Gear Hound', hp: 40, attack: 12}
];
let enemies = [
{name: 'Rusty Automaton', hp: 30, attack: 5, exp: 20},
{name: 'Oil Slime', hp: 20, attack: 7, exp: 15},
{name: 'Bandit Mechanic', hp: 50, attack: 10, exp: 30}
];
let locations = ['Town', 'Forest', 'Abandoned Factory'];
let output = document.getElementById('output');
let input = document.getElementById('input');
function log(text) {
output.innerHTML += text + '<br>';
output.scrollTop = output.scrollHeight;
}
function startGame() {
log('Welcome to the Steampunk Adventure!');
showOptions();
}
function showOptions() {
input.innerHTML = '';
let exploreBtn = document.createElement('button');
exploreBtn.textContent = 'Explore';
exploreBtn.onclick = explore;
input.appendChild(exploreBtn);
let statusBtn = document.createElement('button');
statusBtn.textContent = 'Status';
statusBtn.onclick = showStatus;
input.appendChild(statusBtn);
let creaturesBtn = document.createElement('button');
creaturesBtn.textContent = 'Creatures';
creaturesBtn.onclick = showCreatures;
input.appendChild(creaturesBtn);
}
function explore() {
log('You venture into the ' + player.location + '...');
let encounter = Math.random();
if (encounter < 0.5) {
battle();
} else {
findCreature();
}
}
function battle() {
let enemy = enemies[Math.floor(Math.random() * enemies.length)];
log('An enemy ' + enemy.name + ' appears!');
fightEnemy(enemy);
}
function fightEnemy(enemy) {
input.innerHTML = '';
let attackBtn = document.createElement('button');
attackBtn.textContent = 'Attack';
attackBtn.onclick = function() {
let damage = Math.floor(Math.random() * 10) + 5;
enemy.hp -= damage;
log('You dealt ' + damage + ' damage to ' + enemy.name + '.');
if (enemy.hp <= 0) {
log('You defeated ' + enemy.name + '!');
gainExp(enemy.exp);
showOptions();
} else {
enemyAttack(enemy);
}
};
input.appendChild(attackBtn);
if (player.creatures.length > 0) {
let creatureBtn = document.createElement('button');
creatureBtn.textContent = 'Use Creature';
creatureBtn.onclick = function() {
useCreature(enemy);
};
input.appendChild(creatureBtn);
}
}
function enemyAttack(enemy) {
let damage = Math.floor(Math.random() * enemy.attack);
player.hp -= damage;
log(enemy.name + ' dealt ' + damage + ' damage to you.');
if (player.hp <= 0) {
log('You have been defeated...');
gameOver();
} else {
fightEnemy(enemy);
}
}
function useCreature(enemy) {
let creature = player.creatures[Math.floor(Math.random() * player.creatures.length)];
let damage = Math.floor(Math.random() * creature.attack) + 5;
enemy.hp -= damage;
log('Your ' + creature.name + ' dealt ' + damage + ' damage to ' + enemy.name + '.');
if (enemy.hp <= 0) {
log('You defeated ' + enemy.name + '!');
gainExp(enemy.exp);
showOptions();
} else {
enemyAttack(enemy);
}
}
function findCreature() {
let creature = creatures[Math.floor(Math.random() * creatures.length)];
log('You found a ' + creature.name + '!');
let captureBtn = document.createElement('button');
captureBtn.textContent = 'Capture';
captureBtn.onclick = function() {
player.creatures.push(creature);
log('You captured the ' + creature.name + '!');
showOptions();
};
input.innerHTML = '';
input.appendChild(captureBtn);
let leaveBtn = document.createElement('button');
leaveBtn.textContent = 'Leave';
leaveBtn.onclick = function() {
log('You decided to leave the ' + creature.name + ' alone.');
showOptions();
};
input.appendChild(leaveBtn);
}
function gainExp(exp) {
player.exp += exp;
log('You gained ' + exp + ' EXP.');
if (player.exp >= player.expToLevel) {
levelUp();
}
}
function levelUp() {
player.level++;
player.exp = player.exp - player.expToLevel;
player.expToLevel += 50;
player.maxHp += 20;
player.hp = player.maxHp;
log('You leveled up! You are now Level ' + player.level + '.');
}
function showStatus() {
log('--- Status ---');
log('Level: ' + player.level);
log('HP: ' + player.hp + '/' + player.maxHp);
log('EXP: ' + player.exp + '/' + player.expToLevel);
showOptions();
}
function showCreatures() {
if (player.creatures.length > 0) {
log('--- Your Creatures ---');
player.creatures.forEach(function(creature, index) {
log((index + 1) + '. ' + creature.name + ' (HP: ' + creature.hp + ', Attack: ' + creature.attack + ')');
});
} else {
log('You have not collected any creatures yet.');
}
showOptions();
}
function gameOver() {
input.innerHTML = '';
log('Game Over. You can restart the game.');
let restartBtn = document.createElement('button');
restartBtn.textContent = 'Restart';
restartBtn.onclick = function() {
location.reload();
};
input.appendChild(restartBtn);
}
startGame();
</script>
</body>
</html>
