H5 小游戏：抓小鱼 - 简单易玩，考验你的手速！ - 常规

H5 小游戏：抓小鱼 - 简单易玩，考验你的手速！

这款小游戏玩法简单，你需要通过点击屏幕，控制渔网捕捉下落的小鱼。每捕捉到一条小鱼，得分加 1。游戏时间为 60 秒，时间结束后，游戏结束，显示玩家得分。

游戏界面：

游戏界面包括游戏标题、游戏时间、得分、渔网、小鱼等元素。

游戏流程：

进入游戏界面，显示游戏标题、游戏时间、得分、渔网等元素。
游戏时间开始倒计时，同时小鱼从屏幕顶部开始下落。
玩家通过点击屏幕，控制渔网的位置，捕捉下落的小鱼。
每捕捉到一条小鱼，得分加 1，同时屏幕上出现得分的提示。
游戏时间结束后，弹出游戏结束的提示框，显示玩家得分。
玩家可以选择重新开始游戏或退出游戏。

实现方法：

使用 HTML、CSS、JavaScript 实现游戏界面和游戏逻辑。
使用定时器实现游戏时间倒计时和小鱼下落。
使用事件监听器实现玩家点击屏幕控制渔网的位置。
使用变量记录玩家得分，并在屏幕上实时显示。
使用弹出框实现游戏结束提示框。
使用 if 语句判断玩家选择重新开始游戏或退出游戏。

代码示例：

以下是 HTML 和 JavaScript 的代码示例，实现了游戏界面和游戏逻辑的一部分。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>抓小鱼游戏</title>
    <style>
        #game-board {
            width: 320px;
            height: 480px;
            margin: 0 auto;
            border: 1px solid #000;
            position: relative;
        }
        #fish-net {
            width: 100px;
            height: 100px;
            background: url('fish-net.png');
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -50px;
        }
        .fish {
            width: 50px;
            height: 50px;
            background: url('fish.png');
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -25px;
        }
        #score {
            text-align: center;
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id='game-board'>
        <div id='fish-net'></div>
        <div id='score'>得分：0</div>
    </div>
    <script src='game.js'></script>
</body>
</html>

JavaScript 代码：

var score = 0;  // 玩家得分
var time = 60;  // 游戏时间，单位秒

// 创建小鱼
function createFish() {
    var fish = document.createElement('div');
    fish.className = 'fish';
    fish.style.top = '0';
    fish.style.left = Math.random() * 270 + 'px';
    document.getElementById('game-board').appendChild(fish);
    // 小鱼下落
    var timer = setInterval(function() {
        var top = parseInt(fish.style.top);
        if (top >= 430) {
            clearInterval(timer);
            document.getElementById('game-board').removeChild(fish);
        } else {
            fish.style.top = top + 10 + 'px';
        }
    }, 100);
}

// 控制渔网位置
document.addEventListener('touchstart', function(event) {
    var touchX = event.touches[0].clientX;
    var netX = touchX - 50;
    if (netX < 0) {
        netX = 0;
    } else if (netX > 220) {
        netX = 220;
    }
    document.getElementById('fish-net').style.left = netX + 'px';
});

// 捕捉小鱼
setInterval(function() {
    createFish();
}, 1000);
setInterval(function() {
    var netX = parseInt(document.getElementById('fish-net').style.left);
    var fishes = document.getElementsByClassName('fish');
    for (var i = 0; i < fishes.length; i++) {
        var fishX = parseInt(fishes[i].style.left);
        var fishY = parseInt(fishes[i].style.top);
        if (fishY >= 380 && fishX >= netX && fishX <= netX + 100) {
            document.getElementById('game-board').removeChild(fishes[i]);
            score++;
            document.getElementById('score').innerHTML = '得分：' + score;
        }
    }
}, 100);
// 游戏时间倒计时
var timer = setInterval(function() {
    time--;
    if (time == 0) {
        clearInterval(timer);
        alert('游戏结束，得分：' + score);
        var restart = confirm('是否重新开始游戏？');
        if (restart) {
            location.reload();
        } else {
            window.close();
        }
    }
}, 1000);

注意：

代码示例只包含游戏逻辑的一部分，完整的代码需要根据实际情况进行调整。
代码中使用的图片文件 'fish-net.png' 和 'fish.png' 需要根据实际情况进行替换。

希望这个简单的 H5 小游戏能够给大家带来乐趣！