21xrx.com
2024-11-08 21:12:59 Friday
登录
文章检索 我的文章 写文章
用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']}}
()
回复
回复