Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@JPtheDash
JPtheDash authored Feb 6, 2025
1 parent 1b16165 commit 150b70d
Showing 1 changed file with 102 additions and 114 deletions.
216 changes: 102 additions & 114 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kulhad Raja</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.game-box {
position: relative;
width: 300px;
height: 500px;
border: 2px solid #333;
background-color: #fff;
overflow: hidden;
text-align: center;
}
.logo {
font-size: 24px;
font-weight: bold;
margin: 10px 0;
color: #333;
}
.kulhad {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 120px;
background-color: #8B4513;
border-radius: 0 0 50px 50px;
overflow: hidden;
}
.tea-fill {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
background-color: #A0522D;
transition: height 0.2s;
}
.drop {
position: absolute;
top: -20px;
width: 10px;
height: 20px;
background-color: #A0522D;
border-radius: 50%;
animation: fall 2s linear infinite;
}
.score, .timer {
margin: 10px 0;
font-size: 18px;
color: #333;
}
@keyframes fall {
to {
transform: translateY(500px);
}
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kulhad Raja - The Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4e8c1;
color: #5a3e36;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
margin-top: 20px;
font-size: 2.5rem;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.game-area {
width: 80%;
max-width: 600px;
background-color: #d7b89c;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.score-display {
font-size: 1.5rem;
margin-bottom: 20px;
}
.actions {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #8b5e3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #6b4a32;
}
.story-area {
margin-top: 20px;
font-size: 1.2rem;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="game-box">
<div class="logo">Kulhad Raja</div>
<div class="score">Score: 0</div>
<div class="timer">Time: 10</div>
<div class="kulhad">
<div class="tea-fill"></div>
</div>
<h1>Kulhad Raja</h1>
<div class="game-container">
<div class="game-area">
<div class="score-display">
Score: <span id="score">0</span>
</div>
<div class="actions">
<button id="action1">Collect Kulhads</button>
<button id="action2">Build Kingdom</button>
<button id="action3">Trade Resources</button>
</div>
<div class="story-area" id="story">
Welcome to the kingdom of Kulhad Raja! Start by collecting kulhads and building your empire.
</div>
</div>
</div>

<script>
const gameBox = document.querySelector('.game-box');
const teaFill = document.querySelector('.tea-fill');
const scoreDisplay = document.querySelector('.score');
const timerDisplay = document.querySelector('.timer');
let score = 0;
let timeLeft = 10;
let gameInterval;
let timerInterval;
<script>
// Basic JavaScript for interactivity
let score = 0;
const scoreDisplay = document.getElementById('score');
const storyArea = document.getElementById('story');

function createDrop() {
const drop = document.createElement('div');
drop.classList.add('drop');
drop.style.left = Math.random() * 280 + 'px';
gameBox.appendChild(drop);
document.getElementById('action1').addEventListener('click', () => {
score += 10;
scoreDisplay.textContent = score;
storyArea.textContent = "You collected 10 kulhads! Your kingdom grows stronger.";
});

drop.addEventListener('animationend', () => {
drop.remove();
});
document.getElementById('action2').addEventListener('click', () => {
if (score >= 20) {
score -= 20;
scoreDisplay.textContent = score;
storyArea.textContent = "You built a new structure in your kingdom! The people are happy.";
} else {
storyArea.textContent = "Not enough kulhads to build. Collect more!";
}
});

drop.addEventListener('click', () => {
score++;
scoreDisplay.textContent = `Score: ${score}`;
teaFill.style.height = `${Math.min(score * 10, 100)}%`;
drop.remove();
});
}

function startGame() {
gameInterval = setInterval(createDrop, 500);
timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = `Time: ${timeLeft}`;
if (timeLeft <= 0) {
clearInterval(gameInterval);
clearInterval(timerInterval);
alert(`Game Over! Your score is ${score}`);
}
}, 1000);
}

startGame();
</script>
document.getElementById('action3').addEventListener('click', () => {
if (score >= 15) {
score -= 15;
scoreDisplay.textContent = score;
storyArea.textContent = "You traded resources and gained valuable items for your kingdom!";
} else {
storyArea.textContent = "Not enough kulhads to trade. Collect more!";
}
});
</script>
</body>
</html>

0 comments on commit 150b70d

Please sign in to comment.