三分钟学会打地鼠小游戏

已于 2023-07-09 09:52:46 修改
阅读量439 收藏 3
点赞数 3
文章标签： html css3 javascript
于 2023-07-09 09:46:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56172044/article/details/131619645
版权

打地鼠

1.游戏介绍

操作条件：鼠标点击地鼠 打中地鼠分数就会加一

结束条件：在规定的时间内就会结束

2.代码分析

需求：

  1. 在屏幕中会有土堆的图片出现
  2. 随机让地鼠从土堆中闪现
  3. 点击地鼠就会让分数加加
  4. 到1分钟之后 游戏结束

实现效果图：

在这里插入图片描述

3.代码实现

代码最后实现的很简单 ，主要的就是土地鼠的出现，通过CSS3的过渡搭配随机数与定时器就能够实现土地鼠的运动，在规定的时间中结束，主要使用了延迟器。

3.1土地鼠的出现

需求：

​ 1.每一秒就会出现一个土地鼠（定时器）

​ 2.随机出现土地鼠（随机数）

 // 点击按钮 地鼠出现
    startBtn.addEventListener('click', function (e) {

      // 开启定时器
      if (flagTimer) {
        flagTimer = false
        interval = setInterval(function () {
          const index = getRandom(0, moleList.length - 1)
          const active = document.querySelector('.active')
          active && active.classList.remove('active')
          // console.log(active);
          moleList[index].classList.add('active')
        }, 800)
      }

主要是通过CSS3属性

/* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);
    }

3.2点击土地鼠加分

需求：

​ 1.每次点击土地鼠，能够让上面分数加加（给每个土地鼠添加一个点击函数）

 let num = 0
      for (let i = 0; i < moleList.length; i++) {
        moleList[i].addEventListener('click', function (e) {
          span.innerHTML = ++num
        })
      }
    })

3.3规定的时间结束游戏

需求：

​ 1.能够给游戏加一个结束条件 我的结束条件是根据时间长短判断


      // 五秒后后停止定时器
      setTimeout(function () {
        const active = document.querySelector('.active')
        active && active.classList.remove('active')
        span.innerHTML = 0
        alert('游戏结束')
        clearInterval(interval)
        flagTimer = true

      }, 1000 * 5)

总结：

  1. 先设置好土地鼠的CSS布局让它在屏幕中不显示，最后通过给土地鼠添加一个类让他能够重新出现在页面上
  2. 每次土地鼠的地方都是不固定的，这样就需要想到使用随机函数进行设置
  3. 土地鼠属性每秒都是在运动，所以需要添加一个定时器，这样的效果是让我们每秒都能看到不同的土壤中出现土地鼠
  4. 写的不是很好，主要也是技术有限，有些想要实现的功能 也没有实现，想在里面添加一个背景音乐,但是谷歌好像不支持，还有就是想在点击土地鼠的时候能够有声音 没有实现 希望大佬们指点一二
<video controls="" autoplay="" name="media"> <source src="音乐链接" type="audio/mpeg"</video>

附件：完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>02-打地鼠.html</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      list-style: none;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }

    li {
      width: 400px;
      height: 300px;

      border: 1px solid #000;

      position: relative;

      overflow: hidden;
    }

    img {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }

    /* 泥土 */
    .dirt {
      z-index: 100;

      background-image: linear-gradient(to bottom,
          transparent 50%,
          #fff 50%,
          #fff 100%);
    }

    /* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);
    }

    h1 {
      text-align: center;
    }

    button {
      width: 100px;
      height: 40px;
      border-radius: 20px;
      font-size: 18px;
      display: block;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <h1>打地鼠游戏 : <span>0</span></h1>
  <button>开始</button>
  <ul>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
  </ul>
  <script>

    const startBtn = document.querySelector('button') // 开始按钮
    const moleList = document.querySelectorAll('.mole') // 地鼠图片
    const span = document.querySelector('h1 span') // 文字
    let flagTimer = true
    let interval
    // 点击按钮 地鼠出现
    startBtn.addEventListener('click', function (e) {

      // 开启定时器
      if (flagTimer) {
        flagTimer = false
        interval = setInterval(function () {
          const index = getRandom(0, moleList.length - 1)
          const active = document.querySelector('.active')
          active && active.classList.remove('active')
          // console.log(active);
          moleList[index].classList.add('active')
        }, 800)
      }

      // 五秒后后停止定时器
      setTimeout(function () {
        const active = document.querySelector('.active')
        active && active.classList.remove('active')
        span.innerHTML = 0
        alert('游戏结束')
        clearInterval(interval)
        flagTimer = true

      }, 1000 * 5)



      // 点击土地鼠加分
      let num = 0
      for (let i = 0; i < moleList.length; i++) {
        moleList[i].addEventListener('click', function (e) {
          span.innerHTML = ++num
        })
      }
    })



    // 随机函数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>
</body>

</html>
小章鱼234
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯HTML制作打地鼠小游戏
白大锅的博客，毕设WangLoveBai_999
04-17 76
💕效果展示 💕html展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Catch me if you can~</title> <style> body{background: #45454d;cursor:url("img/hammer.ico"),auto; user-select: none} .holes{
web前端 打地鼠小游戏
Zy804129的博客
12-02 1785
<style> html,body{ height: 100%; } body{ margin: 0; overflow: hidden; background-image: url(image/bg.jpg); /* 用户不能选择内容 */ user-select...
JQuery+HTML+CSS实现简单打地鼠
最新发布
Bu_Wan的博客
08-25 193
【代码】JQuery+HTML+CSS实现简单打地鼠。
年会活动html酷炫抽奖功能-高端版
xcLeigh
01-26 3185
年会活动html酷炫抽奖功能-高端版，支持json数据，主题风格切换。 资源下载地址（https://download.csdn.net/download/weixin_43151418/14934322）
HTML打地鼠小游戏代码
逆天之路
07-08 7769
超简单实用的打地鼠代码，话不多说，直接看代码。 var win = this.getWindow(); var me = this; win.resetGame(); //变量初始化 win.gameOver = initData; win.initVar = function(){ win.score = 0; win.countDown = 30; win.arrayGopher = Arr...
简单的打地鼠小游戏
Francis8003的博客
12-07 294
简易的打地鼠小游戏初版
使用html和css实现简单的打地鼠游戏
qq_40433141的博客
12-26 2601
使用html和css实现简单的打地鼠游戏 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>打地鼠游戏...
一个C# 打地鼠的游戏
05-13
【C# 打地鼠游戏】是一个基于C#编程语言开发的简单但有趣的互动游戏。在这款游戏中，玩家需要快速点击出现的“地鼠”（通常以按钮的形式呈现），以尽可能多地击败它们。游戏的核心机制是结合了按钮控件和计时器...
3分钟学会一个Python小技巧
09-19
Python时间日期转换在开发中是非常高频的一个操作，你经常会遇到需要将字符串转换成 datetime 或者是反过来将 datetime 转换成字符串，今天小编给大家带来了一个Python小技巧，感兴趣的朋友一起看看吧
嘉嘉鼠标游戏(小学生学习鼠标操作)2.0绿色版
08-08
嘉嘉鼠标游戏是一款绿色免费的适合小学生学习鼠标操作的游戏。软件操作简单，有趣好玩，便于少儿熟练掌握鼠标的运用技巧。 嘉嘉鼠标游戏使用方法 游戏规则： 1、单击。在草地上不断出现许多米老鼠，用鼠标光标对准它...
java 课程设计 打地鼠 源代码 很人性化的窗口设计
06-26
这是一个基于Java语言的课程设计项目，名为“打地鼠”，其中包含了实现这个游戏的源代码。游戏界面设计得非常人性化，适合在窗口环境中运行。通过这个项目，我们可以学习和探讨多个Java编程和游戏开发相关的知识点：...
打地鼠小游戏
10-14
本资源是打地鼠小游戏的代码
html5网页版打地鼠小游戏源码下载
11-24
html5网页版打地鼠小游戏源码下载 csdn
HTML5打地鼠游戏源码
01-11
用HTML5做的打地鼠游戏，打开网页就可以看到画面，源码在压缩文件夹里。
html5打地鼠，简单的
03-21
html5打地鼠，简单的使用html5.代码简单易懂。
打地鼠--html+css+js开发的一个小游戏
01-20
用html+css+js综合开发的一个小游戏，其中有源码、图片等整个项目需要的东西，做的不好，请各位大侠指教！如果你也是初学，可以尝试做做啊!
HTML5版打地鼠前端JS源码
京回收
05-31 156
【代码】HTML5版打地鼠前端JS源码。
HTML5版打地鼠前端源码
京回收
05-31 274
【代码】HTML5版打地鼠前端源码。
打地鼠小游戏（HTML5+CSS+JS）
weixin_45822011的博客
03-17 6522
打地鼠小游戏（HTML5+CSS+JS） 文章目录打地鼠小游戏（HTML5+CSS+JS）预设有两个文件（htlm和css）加一个文件夹(放图片)设置基本界面（1）背景图（2）开始按钮（3）放置16个洞 老鼠随机出现设置倒计时功能打老鼠------计分设置最终效果图目前没有解决的问题 预设有两个文件（htlm和css）加一个文件夹(放图片) html文件就是编写这个游戏界面，css文件放置其表现的形式 专门建立一个文件夹，放置背景图，老鼠，洞的图片 下图为我所设置的基本内容： [外链图片转存失败,源站可能
编写程序，实现打地鼠游戏开发，设置时间为一分钟，时间结束自动更新
05-31
好的，我可以为您提供一份Python的打地鼠游戏代码，您可以在命令行或者IDE中运行。下面是代码： ``` import random import time # 游戏时间 game_time = 60 # 地鼠数量 mole_num = 10 # 地鼠出现的位置 mole_pos = ['(1,1)', '(1,2)', '(1,3)', '(2,1)', '(2,2)', '(2,3)', '(3,1)', '(3,2)', '(3,3)'] # 初始化地鼠列表 moles = [0] * 9 # 初始化得分 score = 0 # 游戏开始提示 print('游戏开始，您有', game_time, '秒的时间打地鼠！') # 游戏计时 start_time = time.time() while True: # 判断游戏时间是否结束 if time.time() - start_time > game_time: break # 生成地鼠 for i in range(mole_num): pos = random.choice(mole_pos) index = mole_pos.index(pos) if moles[index] == 0: moles[index] = 1 # 打印地鼠表格 print('-----------------') print('|', moles[0], moles[1], moles[2], '|') print('|', moles[3], moles[4], moles[5], '|') print('|', moles[6], moles[7], moles[8], '|') print('-----------------') # 获取用户输入 user_input = input('请输入要打的地鼠位置，例如(1,1)：') # 判断用户是否击中地鼠 if user_input in mole_pos: index = mole_pos.index(user_input) if moles[index] == 1: print('恭喜您，击中了地鼠！') score += 1 moles[index] = 0 else: print('很遗憾，没有击中地鼠！') # 游戏结束提示 print('游戏结束，您的得分是：', score) ``` 这份代码会随机生成10只地鼠，每只地鼠在地图中的位置都是随机的。玩家需要输入地鼠的位置，如果击中地鼠，则得分加1。当游戏时间结束后，会统计玩家的得分并输出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值