当前位置：首页 > news >正文

像素策略游戏：资源战争

news 2025/10/23 16:45:13

像素策略游戏：资源战争

在这里插入图片描述

下面是一个完整的像素风格策略小游戏，包含资源收集、基地建设、单位生产和战斗系统。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>像素策略：资源战争</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Press Start 2P', 'Courier New', monospace;}body {background: linear-gradient(135deg, #1a1f2d, #0d1117);color: #e0e0ff;min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 20px;overflow-x: hidden;}.game-container {display: flex;flex-direction: column;max-width: 1000px;width: 100%;background: rgba(10, 15, 30, 0.8);border-radius: 12px;box-shadow: 0 0 20px rgba(0, 100, 255, 0.4);border: 2px solid #4a6fcb;overflow: hidden;margin-bottom: 20px;}header {background: linear-gradient(90deg, #2a3f8f, #1a2a6c);padding: 15px;text-align: center;border-bottom: 4px solid #4a6fcb;}h1 {font-size: 28px;color: #f0f8ff;text-shadow: 0 0 10px rgba(100, 180, 255, 0.8);margin-bottom: 5px;letter-spacing: 2px;}.subtitle {font-size: 14px;color: #a0d0ff;margin-bottom: 10px;}.stats-bar {display: flex;justify-content: space-between;background: rgba(20, 30, 60, 0.9);padding: 10px 20px;border-bottom: 2px solid #4a6fcb;}.resource {display: flex;align-items: center;font-size: 16px;}.resource-icon {width: 24px;height: 24px;margin-right: 8px;background: #555;border: 1px solid #aaa;}.game-area {display: flex;min-height: 500px;}.main-content {display: flex;flex: 1;padding: 15px;}.game-map {flex: 3;display: grid;grid-template-columns: repeat(20, 24px);grid-template-rows: repeat(20, 24px);gap: 1px;background: #0a1429;padding: 10px;border: 2px solid #3a5ca9;border-radius: 4px;box-shadow: inset 0 0 15px rgba(0, 40, 100, 0.7);}.tile {width: 24px;height: 24px;background: #1e2a4a;border: 1px solid rgba(70, 100, 170, 0.3);transition: all 0.1s ease;position: relative;}.tile:hover {transform: scale(1.1);z-index: 10;box-shadow: 0 0 8px rgba(100, 180, 255, 0.6);}.water {background: #2a5a8c;}.grass {background: #3a7a4a;}.forest {background: #2a5a3a;}.mountain {background: #8a7a6a;}.gold {background: #d4af37;}.base {background: #8a2be2;position: relative;}.base::after {content: "🏰";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 16px;}.unit {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 18px;z-index: 5;text-shadow: 1px 1px 2px black;}.side-panel {flex: 1;background: rgba(15, 25, 50, 0.8);margin-left: 15px;padding: 15px;border: 2px solid #4a6fcb;border-radius: 4px;display: flex;flex-direction: column;min-width: 250px;}.panel-section {margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #3a5ca9;}.panel-title {font-size: 18px;color: #70c0ff;margin-bottom: 15px;padding-bottom: 5px;border-bottom: 2px solid #3a5ca9;}.actions {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}.btn {background: linear-gradient(180deg, #4a6fcb, #2a4a9a);color: white;border: none;padding: 12px;border-radius: 6px;font-size: 14px;cursor: pointer;transition: all 0.2s;box-shadow: 0 4px 0 #1a2a6c;text-align: center;}.btn:hover {background: linear-gradient(180deg, #5a8feb, #3a5aca);transform: translateY(-2px);box-shadow: 0 6px 0 #1a2a6c;}.btn:active {transform: translateY(2px);box-shadow: 0 2px 0 #1a2a6c;}.btn:disabled {background: #555;transform: none;box-shadow: 0 2px 0 #333;cursor: not-allowed;}.unit-list {display: flex;flex-direction: column;gap: 8px;}.unit-item {display: flex;align-items: center;padding: 8px;background: rgba(30, 50, 90, 0.6);border-radius: 4px;border: 1px solid #4a6fcb;}.unit-icon {margin-right: 10px;font-size: 20px;}.unit-info {flex: 1;}.unit-name {font-size: 14px;margin-bottom: 3px;}.unit-stats {font-size: 11px;color: #a0d0ff;}.build-queue {background: rgba(10, 20, 40, 0.7);padding: 10px;border-radius: 4px;min-height: 80px;border: 1px solid #3a5ca9;}.queue-item {display: inline-block;padding: 6px 10px;background: rgba(70, 100, 170, 0.5);border-radius: 4px;margin: 3px;font-size: 12px;}.events-log {flex: 1;background: rgba(10, 20, 40, 0.7);padding: 10px;border-radius: 4px;overflow-y: auto;max-height: 120px;border: 1px solid #3a5ca9;font-size: 12px;}.event {padding: 5px 0;border-bottom: 1px dashed #3a5ca9;}.instructions {background: rgba(15, 25, 50, 0.8);padding: 20px;border-radius: 8px;max-width: 1000px;width: 100%;border: 2px solid #4a6fcb;margin-bottom: 20px;}.instructions h2 {color: #70c0ff;margin-bottom: 15px;font-size: 20px;}.instructions ul {padding-left: 20px;margin-bottom: 15px;}.instructions li {margin-bottom: 8px;font-size: 14px;line-height: 1.5;}.highlight {color: #ffcc00;font-weight: bold;}.game-over {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 100;}.game-over h2 {font-size: 48px;color: #ff3333;text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);margin-bottom: 30px;}.restart-btn {background: linear-gradient(180deg, #ff5555, #cc0000);padding: 15px 40px;font-size: 20px;border: none;border-radius: 8px;cursor: pointer;box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);}footer {margin-top: auto;padding: 15px;font-size: 12px;color: #6080b0;text-align: center;}@media (max-width: 768px) {.game-area {flex-direction: column;}.side-panel {margin-left: 0;margin-top: 15px;}.game-map {grid-template-columns: repeat(20, 16px);grid-template-rows: repeat(20, 16px);}.tile {width: 16px;height: 16px;}}</style>
</head>
<body><div class="game-container"><header><h1>像素策略：资源战争</h1><div class="subtitle">收集资源 • 建造基地 • 组建军队 • 征服敌人</div></header><div class="stats-bar"><div class="resource"><div class="resource-icon" style="background: #d4af37;"></div><span id="gold">100</span></div><div class="resource"><div class="resource-icon" style="background: #3a7a4a;"></div><span id="wood">50</span></div><div class="resource"><div class="resource-icon" style="background: #8a7a6a;"></div><span id="stone">30</span></div><div class="resource"><div class="resource-icon" style="background: #ff5555;"></div><span id="energy">100/100</span></div></div><div class="game-area"><div class="main-content"><div class="game-map" id="gameMap"><!-- 地图由JS动态生成 --></div><div class="side-panel"><div class="panel-section"><div class="panel-title">行动</div><div class="actions"><button class="btn" id="collectBtn">收集资源</button><button class="btn" id="buildBtn">建造设施</button><button class="btn" id="attackBtn">攻击敌人</button><button class="btn" id="healBtn">恢复能量</button></div></div><div class="panel-section"><div class="panel-title">单位</div><div class="unit-list"><div class="unit-item"><div class="unit-icon">⚔️</div><div class="unit-info"><div class="unit-name">士兵</div><div class="unit-stats">攻击: 5 | 防御: 3 | 消耗: 20金</div></div><button class="btn" style="padding: 5px 10px;">训练</button></div><div class="unit-item"><div class="unit-icon">🏹</div><div class="unit-info"><div class="unit-name">弓箭手</div><div class="unit-stats">攻击: 4 | 防御: 2 | 消耗: 15金 10木</div></div><button class="btn" style="padding: 5px 10px;">训练</button></div><div class="unit-item"><div class="unit-icon">🛡️</div><div class="unit-info"><div class="unit-name">骑士</div><div class="unit-stats">攻击: 7 | 防御: 5 | 消耗: 40金 20石</div></div><button class="btn" style="padding: 5px 10px;">训练</button></div></div></div><div class="panel-section"><div class="panel-title">建造队列</div><div class="build-queue" id="buildQueue"><div class="queue-item">兵营 (3s)</div><div class="queue-item">农场 (5s)</div></div></div><div class="panel-section" style="flex: 1;"><div class="panel-title">事件日志</div><div class="events-log" id="eventLog"><div class="event">[系统] 游戏开始！收集资源建立你的基地。</div><div class="event">[发现] 在(5,7)找到金矿！</div><div class="event">[建造] 木材厂建造完成。</div><div class="event">[战斗] 士兵击败了敌方侦察兵！</div><div class="event">[警告] 基地北面发现敌人部队！</div></div></div></div></div></div></div><div class="instructions"><h2>游戏指南</h2><ul><li>使用资源<span class="highlight">（金、木材、石头）</span>建造设施和训练单位</li><li>点击<span class="highlight">"收集资源"</span>按钮收集你所在位置的资源</li><li>建造<span class="highlight">农场</span>增加食物产量，<span class="highlight">兵营</span>训练士兵</li><li>训练不同单位组成军队，攻击敌方基地</li><li>保持<span class="highlight">能量</span>充足以执行更多操作</li><li>最终目标：<span class="highlight">摧毁敌方基地</span>取得胜利！</li></ul></div><footer>Pixel Strategy: Resource War | 使用HTML5、CSS3和JavaScript构建 | 为浏览器游戏设计</footer><script>// 游戏状态const gameState = {gold: 100,wood: 50,stone: 30,energy: 100,maxEnergy: 100,selectedTile: null,units: [],buildings: [],events: []};// 地图配置const MAP_SIZE = 20;const TILE_TYPES = [{ type: 'grass', class: 'grass', probability: 0.5 },{ type: 'forest', class: 'forest', probability: 0.2 },{ type: 'mountain', class: 'mountain', probability: 0.15 },{ type: 'water', class: 'water', probability: 0.1 },{ type: 'gold', class: 'gold', probability: 0.05 }];// 单位类型const UNIT_TYPES = {worker: { name: '工人', icon: '👷', cost: { gold: 10 }, attack: 1, defense: 1 },soldier: { name: '士兵', icon: '⚔️', cost: { gold: 20 }, attack: 5, defense: 3 },archer: { name: '弓箭手', icon: '🏹', cost: { gold: 15, wood: 10 }, attack: 4, defense: 2 },knight: { name: '骑士', icon: '🛡️', cost: { gold: 40, stone: 20 }, attack: 7, defense: 5 }};// 初始化游戏function initGame() {generateMap();placeBase();updateResources();// 添加事件监听器document.getElementById('collectBtn').addEventListener('click', collectResources);document.getElementById('buildBtn').addEventListener('click', buildStructure);document.getElementById('attackBtn').addEventListener('click', attackEnemy);document.getElementById('healBtn').addEventListener('click', healEnergy);// 初始事件addEvent("游戏开始！收集资源建立你的基地。");addEvent("在(5,7)找到金矿！");addEvent("木材厂建造完成。");addEvent("士兵击败了敌方侦察兵！");addEvent("警告：基地北面发现敌人部队！");}// 生成地图function generateMap() {const mapElement = document.getElementById('gameMap');mapElement.innerHTML = '';for (let y = 0; y < MAP_SIZE; y++) {for (let x = 0; x < MAP_SIZE; x++) {const tile = document.createElement('div');tile.className = 'tile';tile.dataset.x = x;tile.dataset.y = y;// 随机分配地形const rand = Math.random();let cumulativeProb = 0;let tileType = 'grass';for (const type of TILE_TYPES) {cumulativeProb += type.probability;if (rand < cumulativeProb) {tileType = type.type;tile.classList.add(type.class);break;}}// 特殊位置 - 玩家基地if (x === 2 && y === 2) {tile.classList.add('base');}// 特殊位置 - 敌方基地if (x === 17 && y === 17) {tile.classList.add('base');tile.style.background = '#c22';}tile.addEventListener('click', () => selectTile(x, y));mapElement.appendChild(tile);}}}// 放置基地function placeBase() {const playerBase = document.querySelector(`.tile[data-x="2"][data-y="2"]`);playerBase.classList.add('base');const enemyBase = document.querySelector(`.tile[data-x="17"][data-y="17"]`);enemyBase.classList.add('base');enemyBase.style.background = '#c22';}// 选择地块function selectTile(x, y) {// 清除之前的选择const prevSelected = document.querySelector('.tile.selected');if (prevSelected) prevSelected.classList.remove('selected');// 设置新选择const tile = document.querySelector(`.tile[data-x="${x}"][data-y="${y}]`);tile.classList.add('selected');gameState.selectedTile = { x, y };console.log(`选中地块: (${x}, ${y})`);}// 收集资源function collectResources() {if (gameState.energy < 10) {addEvent("能量不足，无法收集资源！");return;}if (!gameState.selectedTile) {addEvent("请先选择一个地块！");return;}const tile = document.querySelector(`.tile[data-x="${gameState.selectedTile.x}"][data-y="${gameState.selectedTile.y}]`);if (tile.classList.contains('forest')) {gameState.wood += 10;addEvent(`从森林收集了10木材`);} else if (tile.classList.contains('mountain')) {gameState.stone += 5;addEvent(`从矿山收集了5石头`);}else if (tile.classList.contains('gold')) {gameState.gold += 15;addEvent(`从金矿收集了15金币`);}else {addEvent(`该地块没有资源可收集`);return;}gameState.energy -= 10;updateResources();// 添加动画效果tile.style.transform = 'scale(1.2)';setTimeout(() => {tile.style.transform = 'scale(1)';}, 300);}// 建造建筑function buildStructure() {if (gameState.energy < 20) {addEvent("能量不足，无法建造！");return;}if (!gameState.selectedTile) {addEvent("请先选择一个地块！");return;}const tile = document.querySelector(`.tile[data-x="${gameState.selectedTile.x}"][data-y="${gameState.selectedTile.y}]`);if (tile.classList.contains('base')) {addEvent("不能在基地上建造其他建筑！");return;}if (tile.classList.contains('water') || tile.classList.contains('mountain')) {addEvent("该地形不适合建造！");return;}// 随机建造一种建筑const buildings = ['农场', '木材厂', '兵营', '箭塔'];const building = buildings[Math.floor(Math.random() * buildings.length)];const cost = Math.floor(Math.random() * 30) + 20;if (gameState.gold < cost) {addEvent(`金币不足，无法建造${building} (需要${cost}金)`);return;}gameState.gold -= cost;gameState.energy -= 20;addEvent(`建造了${building}，消耗${cost}金币`);updateResources();// 添加建造效果tile.innerHTML = `<div class="unit">🏠</div>`;tile.style.backgroundColor = '#5a4';}// 攻击敌人function attackEnemy() {if (gameState.energy < 15) {addEvent("能量不足，无法攻击！");return;}// 随机战斗结果const outcomes = ["击退了敌人的进攻！","你的部队遭遇伏击，损失惨重！","成功突袭敌方资源点！","双方势均力敌，战斗陷入僵局。","大获全胜！缴获敌方物资。"];const outcome = outcomes[Math.floor(Math.random() * outcomes.length)];const goldGain = Math.floor(Math.random() * 30);const loss = Math.floor(Math.random() * 20);gameState.gold += goldGain;gameState.wood -= loss;gameState.stone -= loss;gameState.energy -= 15;if (gameState.wood < 0) gameState.wood = 0;if (gameState.stone < 0) gameState.stone = 0;addEvent(`战斗结果: ${outcome} ${goldGain > 0 ? '获得' + goldGain + '金币' : ''} ${loss > 0 ? '损失' + loss + '资源' : ''}`);updateResources();}// 恢复能量function healEnergy() {const cost = 10;if (gameState.gold < cost) {addEvent(`金币不足，无法恢复能量 (需要${cost}金)`);return;}gameState.gold -= cost;gameState.energy = gameState.maxEnergy;addEvent(`恢复了全部能量，消耗${cost}金币`);updateResources();}// 添加事件function addEvent(message) {const eventLog = document.getElementById('eventLog');const eventElement = document.createElement('div');eventElement.className = 'event';eventElement.textContent = `[${getGameTime()}] ${message}`;eventLog.prepend(eventElement);// 限制日志数量if (eventLog.children.length > 15) {eventLog.removeChild(eventLog.lastChild);}}// 获取游戏时间function getGameTime() {const minutes = Math.floor(gameState.energy / 10);return `${minutes.toString().padStart(2, '0')}:00`;}// 更新资源显示function updateResources() {document.getElementById('gold').textContent = gameState.gold;document.getElementById('wood').textContent = gameState.wood;document.getElementById('stone').textContent = gameState.stone;document.getElementById('energy').textContent = `${gameState.energy}/${gameState.maxEnergy}`;}// 初始化游戏window.onload = initGame;</script>
</body>
</html>

游戏特点

像素风格界面：采用经典的16位像素游戏风格
丰富的策略元素：
- 资源管理（金币、木材、石头、能量）
- 基地建设（农场、木材厂、兵营等）
- 单位训练（士兵、弓箭手、骑士等）
- 战斗系统（攻击敌人获取资源）
游戏功能：
- 动态生成的地图（草地、森林、山脉、水域、金矿）
- 资源收集系统
- 建造和建造队列
- 战斗模拟系统
- 事件日志记录
- 能量管理系统
用户界面：
- 资源状态栏
- 交互式地图
- 行动按钮面板
- 单位信息面板
- 建造队列面板
- 事件日志面板
- 详细游戏指南