257 lines
7.0 KiB
HTML
257 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Virtual World</title>
|
|
<style>
|
|
/* Futuristic / fun styling */
|
|
|
|
/* A gentle gradient background with animation */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Trebuchet MS', sans-serif;
|
|
background: linear-gradient(120deg, #0ff, #f0f);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 10s ease infinite alternate;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Container for everything */
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
position: relative;
|
|
z-index: 1; /* so it stays above the gradient */
|
|
}
|
|
|
|
/* Info bar top-left */
|
|
#infoBar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 8px;
|
|
padding: 5px 10px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid #888;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
z-index: 10;
|
|
transition: box-shadow 0.3s;
|
|
width: 200px;
|
|
}
|
|
#infoBar:hover {
|
|
box-shadow: 0 0 10px rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* Stats bar top-right */
|
|
#statsBar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 8px;
|
|
padding: 5px 10px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid #888;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
z-index: 10;
|
|
transition: box-shadow 0.3s;
|
|
width: 250px;
|
|
}
|
|
#statsBar:hover {
|
|
box-shadow: 0 0 10px rgba(255,255,255,0.8);
|
|
}
|
|
|
|
#menu {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 8px 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.menu-button {
|
|
padding: 6px 12px;
|
|
background: #fff;
|
|
border: 2px solid #444;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: transform 0.25s ease, background-color 0.25s ease;
|
|
}
|
|
.menu-button:hover {
|
|
transform: scale(1.08);
|
|
background-color: #c8fffa;
|
|
}
|
|
|
|
#toggleLogsBtn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
canvas {
|
|
background: #ffffff;
|
|
border: 2px solid #444;
|
|
cursor: grab;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
canvas:active {
|
|
cursor: grabbing;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
#log {
|
|
width: 800px;
|
|
height: 120px;
|
|
margin-top: 10px;
|
|
border: 2px solid #444;
|
|
background: #f9f9f9;
|
|
padding: 5px;
|
|
font-size: 0.9rem;
|
|
overflow-y: auto;
|
|
border-radius: 6px;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
#log:hover {
|
|
box-shadow: 0 0 6px rgba(0,0,0,0.15);
|
|
}
|
|
.log-entry {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 850px) {
|
|
#log {
|
|
width: 95%;
|
|
height: 100px;
|
|
}
|
|
canvas {
|
|
width: 95% !important;
|
|
height: 400px !important;
|
|
}
|
|
}
|
|
|
|
/* Menu categories */
|
|
.menu-category {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 5px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.category-title {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Info Bar with money/citizen count -->
|
|
<div id="infoBar">
|
|
<p id="moneyDisplay">Money: $0</p>
|
|
<p id="citizenCount">Citizens: 0</p>
|
|
<p id="woodDisplay">Wood: 0</p>
|
|
<p id="foodDisplay">Food: 0</p>
|
|
<p id="medicineDisplay">Medicine: 0</p>
|
|
<p id="knowledgeDisplay">Knowledge: 0</p>
|
|
</div>
|
|
|
|
<!-- Stats Bar with building/profession counts -->
|
|
<div id="statsBar">
|
|
<p id="buildingCountsDisplay">Buildings: 🏠0 🏪0 🏥0 🏫0</p>
|
|
<p id="professionCountsDisplay">Citizens: 👷0 🌾0 💰0 💉0 📚0</p>
|
|
</div>
|
|
|
|
<div id="app">
|
|
<!-- Store Menu -->
|
|
<div id="menu">
|
|
<div class="menu-category">
|
|
<div class="category-title">Buildings</div>
|
|
<button class="menu-button" id="buyHouseBtn">Buy House ($300)</button>
|
|
<button class="menu-button" id="buyRoadBtn">Buy Road ($150)</button>
|
|
<button class="menu-button" id="buyMarketBtn">Buy Market ($400)</button>
|
|
<button class="menu-button" id="buyHospitalBtn">Buy Hospital ($500)</button>
|
|
<button class="menu-button" id="buySchoolBtn">Buy School ($450)</button>
|
|
<button class="menu-button" id="buySpawnerBtn">Buy Spawner ($500)</button>
|
|
</div>
|
|
|
|
<div class="menu-category">
|
|
<div class="category-title">Citizens</div>
|
|
<button class="menu-button" id="buyBuilderBtn">Buy Builder ($100)</button>
|
|
<button class="menu-button" id="buyFarmerBtn">Buy Farmer ($100)</button>
|
|
<button class="menu-button" id="buyMerchantBtn">Buy Merchant ($150)</button>
|
|
<button class="menu-button" id="buyDoctorBtn">Buy Doctor ($200)</button>
|
|
<button class="menu-button" id="buyTeacherBtn">Buy Teacher ($180)</button>
|
|
</div>
|
|
|
|
<div class="menu-category">
|
|
<div class="category-title">Resources</div>
|
|
<button class="menu-button" id="buyTreeBtn">Buy Tree ($50)</button>
|
|
</div>
|
|
|
|
<button class="menu-button" id="toggleLogsBtn">Hide Logs</button>
|
|
</div>
|
|
|
|
<canvas id="worldCanvas" width="800" height="600"></canvas>
|
|
<div id="log"></div>
|
|
</div>
|
|
|
|
<script src="game.js"></script>
|
|
<script src="entities.js"></script>
|
|
<script src="utils.js"></script>
|
|
<script src="ai.js"></script>
|
|
<script src="render.js"></script>
|
|
<script src="events.js"></script>
|
|
|
|
<script>
|
|
/**********************************************************************
|
|
* GLOBALS & REFERENCES
|
|
**********************************************************************/
|
|
const canvas = document.getElementById('worldCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const logContainer = document.getElementById('log');
|
|
const moneyDisplay = document.getElementById('moneyDisplay');
|
|
const citizenCountDisplay = document.getElementById('citizenCount');
|
|
const woodDisplay = document.getElementById('woodDisplay');
|
|
const foodDisplay = document.getElementById('foodDisplay');
|
|
const medicineDisplay = document.getElementById('medicineDisplay');
|
|
const knowledgeDisplay = document.getElementById('knowledgeDisplay');
|
|
const buildingCountsDisplay = document.getElementById('buildingCountsDisplay');
|
|
const professionCountsDisplay = document.getElementById('professionCountsDisplay');
|
|
|
|
// Pan & Zoom
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
let scale = 1.0;
|
|
let isDragging = false;
|
|
let lastMouseX = 0;
|
|
let lastMouseY = 0;
|
|
|
|
/**********************************************************************
|
|
* SETUP & START
|
|
**********************************************************************/
|
|
function setupGame() {
|
|
setupPanZoom();
|
|
setupBuyButtons();
|
|
setupCanvasClick();
|
|
initWorld();
|
|
updateMoneyDisplay();
|
|
}
|
|
|
|
// Start the game
|
|
setupGame();
|
|
</script>
|
|
</body>
|
|
</html>
|