|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Development and Game Programming Resource Management Game</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background-color: #f0f0f0; |
|
|
padding: 20px; |
|
|
color: #333; |
|
|
} |
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: space-between; |
|
|
} |
|
|
.resource, .actions, .events { |
|
|
margin-bottom: 20px; |
|
|
padding: 15px; |
|
|
background-color: #fff; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
flex-basis: calc(33% - 20px); |
|
|
} |
|
|
h1, h2 { |
|
|
color: #2c3e50; |
|
|
} |
|
|
button { |
|
|
margin: 5px; |
|
|
padding: 10px 15px; |
|
|
font-size: 16px; |
|
|
background-color: #3498db; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
button:hover { |
|
|
background-color: #2980b9; |
|
|
} |
|
|
canvas { |
|
|
border: 1px solid #ccc; |
|
|
margin-top: 20px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
#resource-list { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
} |
|
|
.resource-item { |
|
|
background-color: #ecf0f1; |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
text-align: center; |
|
|
flex-grow: 1; |
|
|
} |
|
|
#event-result { |
|
|
font-style: italic; |
|
|
color: #e74c3c; |
|
|
} |
|
|
#game-log { |
|
|
max-height: 150px; |
|
|
overflow-y: auto; |
|
|
background-color: #ecf0f1; |
|
|
padding: 10px; |
|
|
border-radius: 5px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>AI Development and Game Programming Resource Management Game</h1> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="resource" id="resources"> |
|
|
<h2>Current Resources</h2> |
|
|
<div id="resource-list"></div> |
|
|
</div> |
|
|
|
|
|
<div class="actions"> |
|
|
<h2>Actions</h2> |
|
|
<button onclick="performAction('Cook Chicken')">Cook Chicken</button> |
|
|
<button onclick="performAction('Make Salad')">Make Salad</button> |
|
|
<button onclick="performAction('Drink Water')">Drink Water</button> |
|
|
<button onclick="performAction('Monster Zero')">Drink Monster Zero</button> |
|
|
<button onclick="performAction('Code')">Code</button> |
|
|
<button onclick="performAction('Debug')">Debug</button> |
|
|
</div> |
|
|
|
|
|
<div class="events"> |
|
|
<h2>Random Events</h2> |
|
|
<button onclick="triggerRandomEvent()">Wait for Random Event</button> |
|
|
<p id="event-result"></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<canvas id="gameCanvas" width="800" height="400"></canvas> |
|
|
|
|
|
<div id="game-log"></div> |
|
|
|
|
|
<script> |
|
|
let gameState = { |
|
|
"Monster Zero": 1, |
|
|
"Water": 10, |
|
|
"Chicken": 3, |
|
|
"Salad": 5, |
|
|
"Air Fryer": 1, |
|
|
"Microwave": 1, |
|
|
"Culligan Machine": 1, |
|
|
"Energy": 100, |
|
|
"Code Quality": 0, |
|
|
"Bugs": 0 |
|
|
}; |
|
|
|
|
|
const RESOURCE_COSTS = { |
|
|
"Cook Chicken": {"Chicken": 1, "Energy": 10}, |
|
|
"Make Salad": {"Salad": 1, "Energy": 5}, |
|
|
"Drink Water": {"Water": 1}, |
|
|
"Monster Zero": {"Monster Zero": 1}, |
|
|
"Code": {"Energy": 15}, |
|
|
"Debug": {"Energy": 20} |
|
|
}; |
|
|
|
|
|
const RESOURCE_GAINS = { |
|
|
"Cook Chicken": {"Energy": 20}, |
|
|
"Make Salad": {"Energy": 15}, |
|
|
"Drink Water": {"Energy": 5}, |
|
|
"Monster Zero": {"Energy": 30}, |
|
|
"Code": {"Code Quality": 10, "Bugs": 5}, |
|
|
"Debug": {"Code Quality": 5, "Bugs": -10} |
|
|
}; |
|
|
|
|
|
function updateResources() { |
|
|
const resourceList = document.getElementById('resource-list'); |
|
|
resourceList.innerHTML = ''; |
|
|
for (let resource in gameState) { |
|
|
const resourceItem = document.createElement('div'); |
|
|
resourceItem.className = 'resource-item'; |
|
|
resourceItem.textContent = `${resource}: ${gameState[resource]}`; |
|
|
resourceList.appendChild(resourceItem); |
|
|
} |
|
|
} |
|
|
|
|
|
function performAction(action) { |
|
|
if (RESOURCE_COSTS.hasOwnProperty(action)) { |
|
|
for (let resource in RESOURCE_COSTS[action]) { |
|
|
if (gameState[resource] < RESOURCE_COSTS[action][resource]) { |
|
|
logEvent(`Not enough ${resource} to perform ${action}`); |
|
|
return; |
|
|
} |
|
|
} |
|
|
for (let resource in RESOURCE_COSTS[action]) { |
|
|
gameState[resource] -= RESOURCE_COSTS[action][resource]; |
|
|
} |
|
|
for (let resource in RESOURCE_GAINS[action]) { |
|
|
gameState[resource] += RESOURCE_GAINS[action][resource]; |
|
|
} |
|
|
logEvent(`Performed action: ${action}`); |
|
|
updateResources(); |
|
|
drawScene(); |
|
|
checkGameOver(); |
|
|
} |
|
|
} |
|
|
|
|
|
function triggerRandomEvent() { |
|
|
const events = [ |
|
|
"Found Water", "Lost Chicken", "Energy Boost", "Microwave Malfunction", |
|
|
"Coding Inspiration", "Bug Infestation", "Coffee Break", "Power Outage" |
|
|
]; |
|
|
const event = events[Math.floor(Math.random() * events.length)]; |
|
|
document.getElementById('event-result').textContent = `Event: ${event}`; |
|
|
switch (event) { |
|
|
case "Found Water": |
|
|
gameState["Water"] += 3; |
|
|
break; |
|
|
case "Lost Chicken": |
|
|
if (gameState["Chicken"] > 0) gameState["Chicken"] -= 1; |
|
|
break; |
|
|
case "Energy Boost": |
|
|
gameState["Energy"] += 20; |
|
|
break; |
|
|
case "Microwave Malfunction": |
|
|
if (gameState["Microwave"] > 0) gameState["Microwave"] -= 1; |
|
|
break; |
|
|
case "Coding Inspiration": |
|
|
gameState["Code Quality"] += 15; |
|
|
break; |
|
|
case "Bug Infestation": |
|
|
gameState["Bugs"] += 20; |
|
|
break; |
|
|
case "Coffee Break": |
|
|
gameState["Energy"] += 10; |
|
|
gameState["Water"] -= 1; |
|
|
break; |
|
|
case "Power Outage": |
|
|
gameState["Energy"] -= 10; |
|
|
gameState["Code Quality"] -= 5; |
|
|
break; |
|
|
} |
|
|
logEvent(`Random event occurred: ${event}`); |
|
|
updateResources(); |
|
|
drawScene(); |
|
|
checkGameOver(); |
|
|
} |
|
|
|
|
|
function checkGameOver() { |
|
|
if (gameState["Energy"] <= 0) { |
|
|
logEvent("Game Over! You ran out of energy."); |
|
|
} else if (gameState["Chicken"] === 0 && gameState["Salad"] === 0 && gameState["Water"] === 0) { |
|
|
logEvent("Game Over! You ran out of all food resources."); |
|
|
} else if (gameState["Bugs"] >= 100) { |
|
|
logEvent("Game Over! Your code has too many bugs."); |
|
|
} |
|
|
} |
|
|
|
|
|
function drawScene() { |
|
|
const canvas = document.getElementById('gameCanvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
const BAR_WIDTH = 40; |
|
|
const BAR_SPACING = 60; |
|
|
const MAX_BAR_HEIGHT = 300; |
|
|
|
|
|
let x = 50; |
|
|
for (let resource in gameState) { |
|
|
const value = gameState[resource]; |
|
|
const normalizedHeight = (value / 100) * MAX_BAR_HEIGHT; |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'rgba(100, 100, 250, 0.7)'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(x, canvas.height - normalizedHeight); |
|
|
ctx.lineTo(x + BAR_WIDTH, canvas.height - normalizedHeight); |
|
|
ctx.lineTo(x + BAR_WIDTH, canvas.height); |
|
|
ctx.lineTo(x, canvas.height); |
|
|
ctx.closePath(); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'rgba(150, 150, 255, 0.9)'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(x, canvas.height - normalizedHeight); |
|
|
ctx.lineTo(x + BAR_WIDTH, canvas.height - normalizedHeight); |
|
|
ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - normalizedHeight - 5); |
|
|
ctx.lineTo(x - 5, canvas.height - normalizedHeight - 5); |
|
|
ctx.closePath(); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'rgba(80, 80, 200, 0.8)'; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(x + BAR_WIDTH, canvas.height - normalizedHeight); |
|
|
ctx.lineTo(x + BAR_WIDTH, canvas.height); |
|
|
ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - 5); |
|
|
ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - normalizedHeight - 5); |
|
|
ctx.closePath(); |
|
|
ctx.fill(); |
|
|
|
|
|
|
|
|
ctx.strokeStyle = 'black'; |
|
|
ctx.lineWidth = 2; |
|
|
ctx.strokeRect(x, canvas.height - normalizedHeight, BAR_WIDTH, normalizedHeight); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'black'; |
|
|
ctx.font = '12px Arial'; |
|
|
ctx.textAlign = 'center'; |
|
|
ctx.fillText(resource, x + BAR_WIDTH / 2, canvas.height - normalizedHeight - 10); |
|
|
ctx.fillText(value, x + BAR_WIDTH / 2, canvas.height - normalizedHeight / 2); |
|
|
|
|
|
x += BAR_SPACING; |
|
|
} |
|
|
} |
|
|
|
|
|
function logEvent(message) { |
|
|
const gameLog = document.getElementById('game-log'); |
|
|
const logEntry = document.createElement('p'); |
|
|
logEntry.textContent = message; |
|
|
gameLog.insertBefore(logEntry, gameLog.firstChild); |
|
|
if (gameLog.children.length > 5) { |
|
|
gameLog.removeChild(gameLog.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
updateResources(); |
|
|
drawScene(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
