像素农场播种机-作物模拟器HTML+CSS+JavaScript

设计一个交互式像素农场游戏，玩家可以在网格土地上播种不同作物，观察作物的生长动画，并收割获得产量统计。

设计思路

创建像素风格农场界面，包含可种植土地网格
实现6种不同作物的生长周期动画（胡萝卜、番茄、小麦等）
添加选择种植工具和统计功能
收割时显示详细的产量数据
使用复古像素风格提升游戏体验

DOCTYPE html>
html lang="zh-CN">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>像素农场播种机title>
    link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
    style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Press Start 2P', cursive, sans-serif;
            background: #8fbc8f;
            color: #333;
            padding: 20px;
            background-image: radial-gradient(circle, #7cab7c 10%, #618961 90%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
        }
        
        .header {
            text-align: center;
            padding: 20px 0;
            width: 100%;
            max-width: 900px;
        }
        
        h1 {
            color: #4b6f4b;
            font-size: 2.5rem;
            text-shadow: 3px 3px 0 #dcedc8, 6px 6px 0 rgba(0,0,0,0.2);
            margin-bottom: 20px;
            letter-spacing: 2px;
        }
        
        .game-container {
            display: flex;
            width: 100%;
            max-width: 1000px;
            background: #a1887f;
            border: 8px solid #8d6e63;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        
        .farm-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-gap: 2px;
            padding: 15px;
            background: #8d6e63;
            flex: 1;
        }
        
        .plot {
            width: 60px;
            height: 60px;
            background: #d7ccc8;
            position: relative;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #bcaaa4;
        }
        
        .plot:hover {
            background: #efdcd5;
            transform: scale(0.95);
        }
        
        .plot .soil {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #a1887f;
            opacity: 0.3;
        }
        
        .toolbox {
            width: 220px;
            background: #8d6e63;
            padding: 15px;
            display: flex;
            flex-direction: column;
            border-left: 4px solid #6d4c41;
        }
        
        .toolbox h2 {
            color: #fff;
            font-size: 1.2rem;
            text-align: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #6d4c41;
        }
        
        .tool {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #d7ccc8;
            margin-bottom: 10px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
            border: 2px solid transparent;
        }
        
        .tool:hover, .tool.active {
            background: #efdcd5;
            border: 2px solid #fff;
        }
        
        .tool-icon {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            background: #a1887f;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .crop-display {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            justify-content: space-between;
        }
        
        .crop {
            width: 48px;
            height: 48px;
            margin: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #000;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .crop:hover {
            transform: scale(1.1);
        }
        
        .stats {
            background: #4b6f4b;
            padding: 15px;
            border-top: 4px solid #304d30;
            color: white;
            width: 100%;
            max-width: 900px;
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .stats h2 {
            text-align: center;
            margin-bottom: 10px;
            color: #dcedc8;
        }
        
        .crop-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            grid-gap: 10px;
        }
        
        .stat-item {
            background: #5a875a;
            padding: 8px;
            border-radius: 4px;
            text-align: center;
        }
        
        .harvest-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: #ffd700;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            z-index: 100;
            display: none;
            border: 2px solid #ffd700;
            text-align: center;
        }
        
        .money-display {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #f1c40f;
            color: #000;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 1.2rem;
            border: 3px solid #d35400;
        }
        
        .tooltip {
            position: absolute;
            background: rgba(0,0,0,0.85);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.7rem;
            pointer-events: none;
            z-index: 10;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            display: none;
        }
        
        /* 作物样式 */
        .crop-planted {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: grow 0.5s ease-out;
        }
        
        .crop-seed {
            width: 8px;
            height: 8px;
            background: #5d4037;
            border-radius: 50%;
        }
        
        .crop-sprout {
            width: 15px;
            height: 20px;
            background: #7cb342;
            position: relative;
        }
        
        .crop-growing {
            width: 30px;
            height: 40px;
            background: #43a047;
        }
        
        .crop-mature {
            width: 35px;
            height: 45px;
            position: relative;
        }
        
        /* 特定作物样式 */
        .carrot .crop-mature {
            background: #ff9800;
            width: 15px;
            height: 35px;
            border-radius: 0 0 8px 8px;
        }
        
        .carrot .crop-mature::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: #388e3c;
            border-radius: 5px;
        }
        
        .tomato .crop-mature {
            background: #e53935;
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
        
        .tomato .crop-mature::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 10px;
            width: 5px;
            height: 10px;
            background: #388e3c;
        }
        
        .wheat .crop-mature {
            background: #fdd835;
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }
        
        .wheat .crop-mature::before {
            content: "";
            position: absolute;
            top: -8px;
            left: 5px;
            width: 20px;
            height: 8px;
            background: #a1887f;
        }
        
        .pumpkin .crop-mature {
            background: #e65100;
            width: 30px;
            height: 25px;
            border-radius: 8px;
        }
        
        .pumpkin .crop-mature::before {
            content: "";
            position: absolute;
            top: -5px;
            left: 13px;
            width: 4px;
            height: 5px;
            background: #388e3c;
        }
        
        .corn .crop-mature {
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 30px solid #ffeb3b;
        }
        
        .corn .crop-mature::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 0;
            width: 30px;
            height: 10px;
            background: #795548;
        }
        
        .strawberry .crop-mature {
            background: #e91e63;
            width: 20px;
            height: 15px;
            border-radius: 50%;
        }
        
        .strawberry .crop-mature::before {
            content: "";
            position: absolute;
            top: -8px;
            left: 7px;
            width: 6px;
            height: 8px;
            background: #43a047;
        }
        
        /* 动画 */
        @keyframes grow {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse {
            animation: pulse 0.5s ease-in-out;
        }
    style>
head>
body>
    div class="header">
        h1>像素农场播种机h1>
        p>点击空地种植作物 | 收割成熟作物获得收益p>
    div>
    
    div class="money-display">💰: $span id="money">250span>div>
    
    div class="game-container">
        div class="farm-grid" id="farm">
            
        div>
        
        div class="toolbox">
            h2>种子选择h2>
            div class="tool active" data-tool="plant">
                div class="tool-icon">🌱div>
                div>播种工具div>
            div>
            div class="tool" data-tool="harvest">
                div class="tool-icon">🔪div>
                div>收割工具div>
            div>
            
            div class="crop-selector">
                h2>选择作物h2>
                div class="crop-display">
                    div class="crop carrot active" data-crop="carrot">🥕div>
                    div class="crop tomato" data-crop="tomato">🍅div>
                    div class="crop wheat" data-crop="wheat">🌾div>
                    div class="crop pumpkin" data-crop="pumpkin">🎃div>
                    div class="crop corn" data-crop="corn">🌽div>
                    div class="crop strawberry" data-crop="strawberry">🍓div>
                div>
            div>
        div>
    div>
    
    div class="stats">
        h2>农场统计数据h2>
        div class="crop-stats" id="stats">
            
        div>
    div>
    
    div class="harvest-message" id="harvestMessage">收获成功！ + $span>0span>div>

    script>
        // 农场数据
        const farmData = {
            plots: [],
            size: 100,
            currentTool: 'plant',
            currentCrop: 'carrot',
            money: 250,
            stats: {
                carrot: { planted: 0, harvested: 0, value: 10 },
                tomato: { planted: 0, harvested: 0, value: 20 },
                wheat: { planted: 0, harvested: 0, value: 15 },
                pumpkin: { planted: 0, harvested: 0, value: 30 },
                corn: { planted: 0, harvested: 0, value: 25 },
                strawberry: { planted: 0, harvested: 0, value: 40 }
            }
        };
        
        // 初始化农场
        function initFarm() {
            const farmGrid = document.getElementById('farm');
            farmGrid.innerHTML = '';
            
            for (let i = 0; i  farmData.size; i++) {
                const plot = document.createElement('div');
                plot.className = 'plot';
                plot.dataset.id = i;
                
                const soil = document.createElement('div');
                soil.className = 'soil';
                plot.appendChild(soil);
                
                plot.addEventListener('click', handlePlotClick);
                
                // 添加悬停提示
                const tooltip = document.createElement('div');
                tooltip.className = 'tooltip';
                tooltip.textContent = '点击种植';
                plot.appendChild(tooltip);
                
                plot.addEventListener('mouseenter', () => {
                    tooltip.style.display = 'block';
                });
                
                plot.addEventListener('mouseleave', () => {
                    tooltip.style.display = 'none';
                });
                
                farmGrid.appendChild(plot);
                
                // 初始化地块数据
                farmData.plots[i] = {
                    cropType: null,
                    growthStage: 0,
                    isPlanted: false
                };
            }
        }
        
        // 更新统计显示
        function updateStats() {
            const statsContainer = document.getElementById('stats');
            statsContainer.innerHTML = '';
            
            for (const crop in farmData.stats) {
                const stat = farmData.stats[crop];
                const statItem = document.createElement('div');
                statItem.className = 'stat-item';
                
                const cropName = {
                    carrot: '🥕 胡萝卜',
                    tomato: '🍅 番茄',
                    wheat: '🌾 小麦',
                    pumpkin: '🎃 南瓜',
                    corn: '🌽 玉米',
                    strawberry: '🍓 草莓'
                }[crop];
                
                statItem.innerHTML = `
                    

${cropName}

                    
已种: ${stat.planted}

                    
收获: ${stat.harvested}

                `;
                
                statsContainer.appendChild(statItem);
            }
        }
        
        // 地块点击处理
        function handlePlotClick(e) {
            const plot = e.currentTarget;
            const plotId = parseInt(plot.dataset.id);
            const plotData = farmData.plots[plotId];
            const tooltip = plot.querySelector('.tooltip');
            
            if (farmData.currentTool === 'plant') {
                // 种植逻辑
                if (farmData.money  5) {
                    showMessage('金钱不足!', '#ff5252');
                    return;
                }
                
                if (!plotData.isPlanted) {
                    // 扣除种植费用
                    farmData.money -= 5;
                    document.getElementById('money').textContent = farmData.money;
                    
                    // 更新地块数据
                    plotData.isPlanted = true;
                    plotData.cropType = farmData.currentCrop;
                    plotData.growthStage = 0;
                    plotData.harvested = false;
                    
                    // 更新统计数据
                    farmData.stats[farmData.currentCrop].planted++;
                    
                    // 更新UI
                    updatePlot(plot, plotData);
                    
                    // 更新提示文本
                    tooltip.textContent = getGrowthStageText(0, farmData.currentCrop);
                    
                    // 开始生长计时
                    startGrowth(plot, plotData);
                }
            } else if (farmData.currentTool === 'harvest') {
                // 收割逻辑
                if (plotData.isPlanted && plotData.growthStage === 3) {
                    // 添加收获收益
                    const cropValue = farmData.stats[plotData.cropType].value;
                    farmData.money += cropValue;
                    document.getElementById('money').textContent = farmData.money;
                    
                    // 更新地块数据
                    plotData.isPlanted = false;
                    
                    // 更新统计数据
                    farmData.stats[plotData.cropType].harvested++;
                    
                    // 显示收获消息
                    showMessage(`收获 ${getCropName(plotData.cropType)}! + $${cropValue}`, '#ffd700');
                    
                    // 更新UI
                    updatePlot(plot, plotData);
                    updateStats();
                } else if (plotData.isPlanted) {
                    showMessage(`还没成熟! (${getGrowthStageText(plotData.growthStage, plotData.cropType)})`, '#ff9800');
                }
            }
        }
        
        // 开始作物生长
        function startGrowth(plot, plotData) {
            const growthInterval = setInterval(() => {
                if (plotData.growthStage  3) {
                    plotData.growthStage++;
                    updatePlot(plot, plotData);
                    
                    // 更新提示文本
                    const tooltip = plot.querySelector('.tooltip');
                    tooltip.textContent = getGrowthStageText(plotData.growthStage, plotData.cropType);
                    
                    // 成熟时添加提示
                    if (plotData.growthStage === 3) {
                        plot.classList.add('pulse');
                    }
                } else {
                    clearInterval(growthInterval);
                }
            }, 2000); // 每2秒生长一个阶段
        }
        
        // 更新地块显示
        function updatePlot(plot, plotData) {
            // 移除之前的所有作物状态
            plot.querySelectorAll('.crop-planted').forEach(el => el.remove());
            
            if (plotData.isPlanted) {
                const crop = document.createElement('div');
                crop.className = `crop-planted ${plotData.cropType}`;
                
                if (plotData.growthStage === 0) {
                    const seed = document.createElement('div');
                    seed.className = 'crop-seed';
                    crop.appendChild(seed);
                } else if (plotData.growthStage === 1) {
                    const sprout = document.createElement('div');
                    sprout.className = 'crop-sprout';
                    crop.appendChild(sprout);
                } else if (plotData.growthStage === 2) {
                    const growing = document.createElement('div');
                    growing.className = 'crop-growing';
                    crop.appendChild(growing);
                } else if (plotData.growthStage === 3) {
                    const mature = document.createElement('div');
                    mature.className = 'crop-mature';
                    crop.appendChild(mature);
                }
                
                plot.appendChild(crop);
            }
        }
        
        // 工具选择
        document.querySelectorAll('.tool').forEach(tool => {
            tool.addEventListener('click', () => {
                document.querySelectorAll('.tool').forEach(t => t.classList.remove('active'));
                tool.classList.add('active');
                farmData.currentTool = tool.dataset.tool;
                
                // 更新所有地块的工具提示
                document.querySelectorAll('.plot .tooltip').forEach(tip => {
                    tip.textContent = farmData.currentTool === 'plant' ? '点击种植' : '点击收割';
                });
            });
        });
        
        // 作物选择
        document.querySelectorAll('.crop').forEach(crop => {
            crop.addEventListener('click', () => {
                document.querySelectorAll('.crop').forEach(c => c.classList.remove('active'));
                crop.classList.add('active');
                farmData.currentCrop = crop.dataset.crop;
            });
        });
        
        // 显示消息
        function showMessage(text, color) {
            const message = document.getElementById('harvestMessage');
            message.textContent = text;
            message.style.display = 'block';
            message.style.backgroundColor = color || '#ffd700';
            
            setTimeout(() => {
                message.style.display = 'none';
            }, 2000);
        }
        
        // 获取生长阶段文本
        function getGrowthStageText(stage, cropType) {
            const stages = [
                '种子期',
                '发芽期',
                '生长期',
                '成熟期'
            ];
            return `${getCropName(cropType)}: ${stages[stage]}`;
        }
        
        // 获取作物名称
        function getCropName(cropType) {
            return {
                carrot: '胡萝卜',
                tomato: '番茄',
                wheat: '小麦',
                pumpkin: '南瓜',
                corn: '玉米',
                strawberry: '草莓'
            }[cropType];
        }
        
        // 初始化
        window.onload = function() {
            initFarm();
            updateStats();
        };
    script>
body>
html>

游戏功能说明

​​农场布局​​:

10×10网格的100块土地
右侧的作物选择工具栏
底部的农场统计面板
顶部的资金显示

​​种植系统​​：

6种不同作物：胡萝卜、番茄、小麦、南瓜、玉米、草莓
每块土地点击种植
种植需要花费$5
每种作物有独特的生长动画

​​生长周期​​：

四个生长阶段：种子期→发芽期→生长期→成熟期
每块土地独立生长计时
成熟作物会有脉动动画提示

​​收割与统计​​：

切换到收割工具后可以收割成熟作物
每种作物有不同价值（10−40）
统计面板实时显示种植和收获数量
收获后会在屏幕顶部显示收益

用户体验​​：

悬停显示土地当前状态
操作时提供视觉反馈和提示信息
复古像素风格界面
响应式设计适应不同屏幕
这个像素农场游戏提供了简单的模拟体验，包含了完整的种植、生长和收获流程，并且有详尽的统计数据。游戏界面设计为复古像素风格，增强了趣味性。

文章来源于互联网:像素农场播种机-作物模拟器HTML+CSS+JavaScript

相关推荐: AI写作文本神器助您修炼出更具特色的写作技巧

在当代社会，信息洪流汹涌而至，写作已然成为人们日常生活中的重要环节。然而，对有些人而言，写作仍是艰巨且耗费时间的任务。值得庆幸的是，如今市面上出现了全新的AI撰稿神器，协助您轻松应对各类写作需求。 一、提高工作效率 在传统写作流程中，需要耗费漫长的时间与巨额的…