使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏

点击鼠标游戏是一个简单的小游戏，玩家需要在规定的时间内点击屏幕上不断出现和消失的小老鼠，以获取分数。使用 HTML、CSS 和 Vanilla Javascript 可以轻松设计和实现这样一个小游戏。

HTML 结构

首先，我们需要给游戏添加一个容器。在 HTML 文件中添加以下代码：

<div class="container">
  <h1>点击鼠标游戏</h1>
  <div class="score">得分：<span id="score">0</span></div>
  <div class="game"></div>
  <button class="start">开始游戏</button>
</div>

以上代码中，容器包含了游戏标题、得分、游戏区域和开始按钮。

CSS 样式

为了让游戏看起来更加美观，我们需要为容器添加一些样式。在 CSS 文件中添加以下代码：

.container {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin-top: 20px;
}

.score {
  font-size: 18px;
  margin-bottom: 20px;
}

.game {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 10px solid #333;
  position: relative;
}

.game .mouse {
  width: 50px;
  height: 50px;
  background: url("mouse.png") no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.start {
  font-size: 16px;
  padding: 10px 20px;
  background: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}

以上代码中，我们设置了容器的宽度、居中对齐等样式，并为游戏区域和开始按钮添加了样式。同时，我们也为小老鼠的样式添加了一些样式。

Javascript 功能

接下来，我们需要使用 Javascript 给游戏添加一些功能。在 Javascript 文件中添加以下代码：

var score = 0;
var time = 0;
var timer = null;
var playing = false;

var game = document.querySelector(".game");
var scoreBoard = document.querySelector("#score");
var startBtn = document.querySelector(".start");

startBtn.addEventListener("click", function() {
  if (!playing) {
    playing = true;
    score = 0;
    time = 30;
    startBtn.innerHTML = "重新开始";
    updateScore();
    updateTimer();
    timer = setInterval(function() {
      updateTimer();
    }, 1000)
    addMouse();
  } else {
    restart();
  }
});

function updateScore() {
  scoreBoard.innerHTML = score;
}

function updateTimer() {
  time--;
  if (time > 0) {
    document.title = "剩余时间：" + time + "秒";
  } else {
    clearInterval(timer);
    gameOver();
  }
}

function addMouse() {
  var mouse = document.createElement("div");
  mouse.className = "mouse";
  mouse.style.top = Math.random() * (game.offsetHeight - 50) + "px";
  mouse.style.left = Math.random() * (game.offsetWidth - 50) + "px";
  game.appendChild(mouse);
  mouse.addEventListener("click", function() {
    game.removeChild(mouse);
    score += 10;
    updateScore();
    addMouse();
  });
  setTimeout(function() {
    if (game.contains(mouse)) {
      game.removeChild(mouse);
      addMouse();
    }
  }, 3000);
}

function restart() {
  score = 0;
  time = 30;
  updateScore();
  updateTimer();
  game.innerHTML = "";
  addMouse();
}

function gameOver() {
  playing = false;
  startBtn.innerHTML = "开始游戏";
  alert("游戏结束，最终得分为：" + score);
}

以上代码实现了游戏的核心功能，包括开始游戏/重新开始、更新得分、更新剩余时间、添加小老鼠、重新开始游戏和游戏结束等功能。同时，我们也使用了定时器和事件监听器等功能。

总结

使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏非常容易，只需要简单的几行代码即可实现。通过这个小游戏的设计和实现，我们也可以更好地学习和掌握前端技术，为日后的工作和学习打下坚实的基础。