21xrx.com
2024-12-23 00:17:29 Monday
登录
文章检索 我的文章 写文章
用JavaScript制作一个简单的小游戏，附带代码案例
2023-06-14 13:29:31 深夜i     --     --
JavaScript 小游戏 代码案例

文章：

JavaScript是一种广泛使用的编程语言，它可以在网络上创建交互性体验，其中包括游戏。在本文中，我们将使用JavaScript制作一个简单的小游戏，并附带代码案例供您参考。

该小游戏被称为“打地鼠游戏”，玩法很简单：用户点击地图上随机出现的地鼠，每次点击增加分数，游戏时间为60秒。我们将在HTML和JavaScript之间创建一个交互性体验，从而创建游戏。

首先，我们需要一个HTML网页，其中包括游戏界面和JavaScript代码。以下是HTML代码：



  


     
 打地鼠游戏


     
 


  


  


    


打地鼠游戏


    


得分：0


    


剩余时间：60秒


    



  

在文件夹中创建一个名为“game.js”的新文件，并将以下JavaScript代码复制到其中：



var score = 0; // 计分器


var time = 60; // 倒计时


var timer; // 定时器


function startGame() {


  document.getElementById("score").innerHTML = score;


  document.getElementById("time").innerHTML = time;


  timer = setInterval(function() {


    time--;


    document.getElementById("time").innerHTML = time;


    if (time <= 0) {


      clearInterval(timer);


      endGame();


    }


  }, 1000);


  createMole();


}


function createMole() {


  var map = document.getElementById("map");


  var mole = document.createElement("div");


  mole.className = "mole";


  mole.style.top = Math.random() * (map.offsetHeight - 50) + "px";


  mole.style.left = Math.random() * (map.offsetWidth - 50) + "px";


  map.appendChild(mole);


  mole.onclick = function() {


    map.removeChild(mole);


    score++;


    document.getElementById("score").innerHTML = score;


    createMole();


  }


}


function endGame() {


  alert("游戏结束，您的得分是：" + score);


  document.getElementById("map").innerHTML = "";


  score = 0;


  time = 60;


}

在此代码中，我们定义了一些变量和函数，包括计分器，倒计时，定时器和三个函数：startGame，createMole和endGame。startGame函数启动游戏，创建猴子，并初始化计分器和倒计时。createMole函数创建新的地鼠元素，并在用户单击时更新分数。endGame函数结束游戏，清除地鼠并重新设置变量。

接下来，我们需要对游戏进行样式设置。以下是CSS代码：



body


  text-align: center;


  font-size: 20px;


  font-family: Arial


h1


  font-size: 30px;


  margin-top: 20px;


h2


  margin-top: 10px;


#map


  width: 500px;


  height: 500px;


  margin: 20px auto;


  border: 1px solid black;


  position: relative;


.mole {


  width: 50px;


  height: 50px;


  position: absolute;


  background-image: url(mole.png);


  background-size: cover;


  cursor: pointer;


}

在CSS中，我们对body、h1、h2、#map和.mole进行了一些基本样式设置。#map是游戏地图的容器，.mole是地鼠元素。

现在，我们已经创建了HTML、JavaScript和CSS代码，我们的游戏就准备好了。要运行它，请在您的浏览器中打开HTML文件，单击“开始游戏”按钮，并尝试在60秒内尽可能地打地鼠。完成后，您将看到您的得分。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复