HTML5简单网页游戏代码哪里能下载？-网页设计-锦华智联科技

您可以直接将每个游戏的代码复制到三个文件（.html, .css, .js）中，然后用浏览器打开 .html 文件即可运行。

（图片来源网络，侵删）

猜数字游戏

这是一个经典的逻辑游戏,玩家需要猜测一个1到100之间的随机数。

文件结构

guess-number-game/
├── index.html
├── style.css
└── script.js

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">猜数字游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>猜数字游戏</h1>
        <p>我想了一个1到100之间的数字，你能猜到吗？</p>
        <div class="input-group">
            <input type="number" id="guessInput" placeholder="输入你的猜测" min="1" max="100">
            <button id="guessButton">猜！</button>
        </div>
        <div id="message"></div>
        <div id="attempts">尝试次数: 0</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

`style.css`

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
}
.container {
    text-align: center;
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
    color: #333;
}
.input-group {
    margin: 1.5rem 0;
}
#guessInput {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
}
#guessButton {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}
#guessButton:hover {
    background-color: #0056b3;
}
#message {
    margin-top: 1rem;
    font-size: 18px;
    font-weight: bold;
    min-height: 25px; /* 防止布局跳动 */
}
#attempts {
    margin-top: 1rem;
    color: #666;
}

`script.js`

document.addEventListener('DOMContentLoaded', () => {
    const guessInput = document.getElementById('guessInput');
    const guessButton = document.getElementById('guessButton');
    const message = document.getElementById('message');
    const attemptsDisplay = document.getElementById('attempts');
    // 生成1到100的随机数
    const randomNumber = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;
    guessButton.addEventListener('click', checkGuess);
    guessInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            checkGuess();
        }
    });
    function checkGuess() {
        const userGuess = parseInt(guessInput.value);
        if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
            message.textContent = '请输入一个1到100之间的有效数字！';
            message.style.color = 'red';
            return;
        }
        attempts++;
        attemptsDisplay.textContent = `尝试次数: ${attempts}`;
        if (userGuess === randomNumber) {
            message.textContent = `🎉 恭喜你！猜对了！数字就是 ${randomNumber}，你用了 ${attempts} 次尝试，`;
            message.style.color = 'green';
            guessInput.disabled = true;
            guessButton.disabled = true;
        } else if (userGuess < randomNumber) {
            message.textContent = '太小了，再大一点！';
            message.style.color = 'orange';
        } else {
            message.textContent = '太大了，再小一点！';
            message.style.color = 'orange';
        }
        guessInput.value = '';
        guessInput.focus();
    }
});

打地鼠游戏

一个反应速度类游戏，地鼠会随机从洞里冒出来,玩家需要快速点击它们。

文件结构

whack-a-mole/
├── index.html
├── style.css
└── script.js

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">打地鼠游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>打地鼠</h1>
        <div class="score-board">
            <span>得分: <strong id="score">0</strong></span>
            <span>时间: <strong id="time-left">30</strong>秒</span>
        </div>
        <div class="game-board">
            <!-- 9个地鼠洞 -->
            <div class="hole" data-index="0"><div class="mole"></div></div>
            <div class="hole" data-index="1"><div class="mole"></div></div>
            <div class="hole" data-index="2"><div class="mole"></div></div>
            <div class="hole" data-index="3"><div class="mole"></div></div>
            <div class="hole" data-index="4"><div class="mole"></div></div>
            <div class="hole" data-index="5"><div class="mole"></div></div>
            <div class="hole" data-index="6"><div class="mole"></div></div>
            <div class="hole" data-index="7"><div class="mole"></div></div>
            <div class="hole" data-index="8"><div class="mole"></div></div>
        </div>
        <button id="start-button">开始游戏</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

`style.css`

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #87CEEB; /* 天空蓝 */
}
.game-container {
    text-align: center;
    background-color: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 2rem 0;
}
.hole {
    width: 120px;
    height: 120px;
    background-color: #8B4513; /* 棕色土地 */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.mole {
    width: 80%;
    height: 80%;
    background-color: #654321; /* 深棕色地鼠 */
    border-radius: 50%;
    position: absolute;
    top: 100%; /* 初始位置在洞下方 */
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.3s ease-in-out;
}
.mole.up {
    top: 10%; /* 地鼠冒头 */
}
.score-board {
    display: flex;
    justify-content: space-around;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
#start-button {
    padding: 12px 30px;
    font-size: 18px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}
#start-button:hover {
    background-color: #218838;
}

`script.js`

document.addEventListener('DOMContentLoaded', () => {
    const holes = document.querySelectorAll('.hole');
    const moles = document.querySelectorAll('.mole');
    const scoreBoard = document.getElementById('score');
    const timeLeft = document.getElementById('time-left');
    const startButton = document.getElementById('start-button');
    let score = 0;
    let timeUp = false;
    let countdown;
    startButton.addEventListener('click', startGame);
    function startGame() {
        score = 0;
        scoreBoard.textContent = score;
        timeLeft.textContent = 30;
        timeUp = false;
        startButton.disabled = true;
        // 倒计时
        countdown = setTimeout(() => {
            timeUp = true;
            startButton.disabled = false;
            startButton.textContent = '重新开始';
            // 游戏结束时，确保所有地鼠都藏起来
            moles.forEach(mole => mole.classList.remove('up'));
        }, 30000);
        // 开始随机显示地鼠
        peep();
    }
    function peep() {
        if (timeUp) return;
        const randomHole = Math.floor(Math.random() * holes.length);
        const hole = holes[randomHole];
        const mole = hole.querySelector('.mole');
        // 显示地鼠
        mole.classList.add('up');
        // 随机时间后隐藏地鼠
        setTimeout(() => {
            mole.classList.remove('up');
            peep(); // 递归调用，让下一个地鼠随机出现
        }, Math.random() * 1000 + 500); // 0.5到1.5秒
    }
    // 打地鼠事件
    moles.forEach(mole => {
        mole.addEventListener('click', () => {
            if (!mole.classList.contains('up')) return; // 如果地鼠没冒头，点击无效
            score++;
            scoreBoard.textContent = score;
            mole.classList.remove('up'); // 打中后立即隐藏
        });
    });
});

如何下载和使用这些代码

创建文件夹：在你的电脑上为每个游戏创建一个单独的文件夹，guess-number-game 和 whack-a-mole。
创建文件：在每个文件夹内，创建三个文件，分别命名为 index.html、style.css 和 script.js。
复制粘贴：将上面对应游戏的代码分别复制到对应的文件中。
运行游戏：用浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件即可开始游戏。

进阶学习建议

这些游戏是学习HTML5游戏开发的绝佳起点，如果你想继续深入,可以考虑：

Canvas API：对于更复杂的图形和动画（如2D平台跳跃游戏、简单的射击游戏），<canvas> 元素是更强大的工具。
游戏引擎：对于制作大型、复杂的游戏，使用专业的游戏引擎（如 Phaser.js, Babylon.js, Three.js）可以大大提高开发效率，它们封装了很多底层的逻辑,让你能更专注于游戏本身。
音效和图片：为游戏添加背景音乐、音效和精美的图片,能让游戏体验更加丰富。

希望这些代码对你有帮助！祝你编码愉快！

（图片来源网络，侵删）