Register
> 博客>

html打地鼠代码

新速特源码 1年前 31 0

以下是一个简单的HTML打地鼠游戏代码：

<!DOCTYPE html>
<html>
<head>
    <title>打地鼠游戏</title>
    <style>
        body {
            background-color: #f2f2f2;
        }
        #game-board {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
        }
        #mole {
            width: 50px;
            height: 50px;
            background-color: brown;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
    <h1>打地鼠游戏</h1>
    <p>点击地鼠得分，时间到了游戏结束。</p>
    <div id="game-board">
        <div id="mole"></div>
    </div>
    <p>得分：<span id="score">0</span></p>
    <p>时间：<span id="time">30</span>秒</p>
    <button id="start-btn">开始游戏</button>

    <script>
        var score = 0;
        var time = 30;
        var moleInterval;

        function startGame() {
            document.getElementById('start-btn').disabled = true;
            moleInterval = setInterval(showMole, 1000);
            setTimeout(endGame, time * 1000);
        }

        function showMole() {
            var mole = document.getElementById('mole');
            var boardWidth = document.getElementById('game-board').offsetWidth;
            var boardHeight = document.getElementById('game-board').offsetHeight;
            var randomX = Math.floor(Math.random() * (boardWidth - mole.offsetWidth));
            var randomY = Math.floor(Math.random() * (boardHeight - mole.offsetHeight));
            mole.style.top = randomY + 'px';
            mole.style.left = randomX + 'px';
            mole.style.display = 'block';
            mole.onclick = function() {
                score++;
                document.getElementById('score').innerHTML = score;
                mole.style.display = 'none';
            }
            setTimeout(function() {
                mole.style.display = 'none';
            }, 800);
        }

        function endGame() {
            clearInterval(moleInterval);
            document.getElementById('start-btn').disabled = false;
            alert('游戏结束，得分：' + score);
            score = 0;
            time = 30;
            document.getElementById('score').innerHTML = score;
            document.getElementById('time').innerHTML = time;
        }

        document.getElementById('start-btn').onclick = startGame;
    </script>
</body>
</html>

这个游戏使用了HTML、CSS和JavaScript来实现。游戏板块使用了一个<div>元素，地鼠使用了另一个<div>元素，并使用了CSS来设置它们的样式。JavaScript代码用于控制游戏逻辑，包括开始游戏、显示地鼠、得分、时间等。

这个游戏的实现思路如下：

在HTML中创建一个游戏板块<div>元素和一个地鼠<div>元素，并使用CSS设置它们的样式。

使用JavaScript控制游戏逻辑，包括开始游戏、显示地鼠、得分、时间等。

点击地鼠可以得分，时间到了游戏结束。

具体实现步骤如下：

在HTML中创建游戏板块和地鼠元素，并使用CSS设置它们的样式。

<div id="game-board">
  <div id="mole"></div>
</div>

<style>
  #game-board {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
  }
  #mole {
    width: 50px;
    height: 50px;
    background-color: brown;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
</style>

使用JavaScript控制游戏逻辑。

首先，定义一个变量score来记录得分，一个变量time来记录剩余时间，一个变量moleInterval来记录地鼠出现的定时器。

var score = 0;
var time = 30;
var moleInterval;

然后，定义一个startGame函数来开始游戏。在函数中，禁用开始按钮，使用setInterval函数每隔一秒钟调用showMole函数显示地鼠，使用setTimeout函数在游戏时间结束后调用endGame函数结束游戏。

function startGame() {
  document.getElementById('start-btn').disabled = true;
  moleInterval = setInterval(showMole, 1000);
  setTimeout(endGame, time * 1000);
}

接着，定义一个showMole函数来显示地鼠。在函数中，获取游戏板块的宽度和高度，随机生成地鼠的位置，设置地鼠的位置和显示，为地鼠添加点击事件，点击地鼠可以得分，使用setTimeout函数在一定时间后隐藏地鼠。

function showMole() {
  var mole = document.getElementById('mole');
  var boardWidth = document.getElementById('game-board').offsetWidth;
  var boardHeight = document.getElementById('game-board').offsetHeight;
  var randomX = Math.floor(Math.random() * (boardWidth - mole.offsetWidth));
  var randomY = Math.floor(Math.random() * (boardHeight - mole.offsetHeight));
  mole.style.top = randomY + 'px';
  mole.style.left = randomX + 'px';
  mole.style.display = 'block';
  mole.onclick = function() {
    score++;
    document.getElementById('score').innerHTML = score;
    mole.style.display = 'none';
  }
  setTimeout(function() {
    mole.style.display = 'none';
  }, 800);
}

最后，定义一个endGame函数来结束游戏。在函数中，清除地鼠出现的定时器，启用开始按钮，弹出得分提示框，重置得分和时间。

function endGame() {
  clearInterval(moleInterval);
  document.getElementById('start-btn').disabled = false;
  alert('游戏结束，得分：' + score);
  score = 0;
  time = 30;
  document.getElementById('score').innerHTML = score;
  document.getElementById('time').innerHTML = time;
}

在HTML中添加开始按钮、得分和时间显示，并为开始按钮添加点击事件。

<p>得分：<span id="score">0</span></p>
<p>时间：<span id="time">30</span>秒</p>
<button id="start-btn">开始游戏</button>

<script>
  document.getElementById('start-btn').onclick = startGame;
</script>

完整代码如下：

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报