像素策略游戏：资源战争
下面是一个完整的像素风格策略小游戏，包含资源收集、基地建设、单位生产和战斗系统。
<!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位像素游戏风格
-
丰富的策略元素：
- 资源管理（金币、木材、石头、能量）
- 基地建设（农场、木材厂、兵营等）
- 单位训练（士兵、弓箭手、骑士等）
- 战斗系统（攻击敌人获取资源）
-
游戏功能：
- 动态生成的地图（草地、森林、山脉、水域、金矿）
- 资源收集系统
- 建造和建造队列
- 战斗模拟系统
- 事件日志记录
- 能量管理系统
-
用户界面：
- 资源状态栏
- 交互式地图
- 行动按钮面板
- 单位信息面板
- 建造队列面板
- 事件日志面板
- 详细游戏指南
游戏指南
- 使用资源（金、木材、石头）建造设施和训练单位
- 点击"收集资源"按钮收集你所在位置的资源
- 建造农场增加食物产量，兵营训练士兵
- 训练不同单位组成军队，攻击敌方基地
- 保持能量充足以执行更多操作
- 最终目标：摧毁敌方基地取得胜利！
这个游戏包含了策略游戏的核心元素，您可以直接复制代码到HTML文件中运行，无需任何外部依赖。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
