用javascript和jquery部分知识实现的打地鼠小游戏_html打地鼠小游戏源码-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaowuwjw/article/details/122247523

用javascript和jquery部分知识实现的打地鼠小游戏
游戏名称：打欧文
（因为出现被击打对象是欧文图片，哈哈哈哈哈哈）
实现步骤
1.搭建html模块
2.书写样式布局
3.用js实现逻辑，完成小游戏

游戏玩法介绍
1.点击开始游戏按钮，弹出难度选择建议窗口
2.点击一级难度和二级难度（难度根据欧文图片出现速度而定）
3.用ball（即鼠标指针设置以一个篮球样式）击打出现的欧文，成功击中分数加一
4.点击结束游戏按钮即可结束游戏，弹出本次游戏获得分数

游戏核心布局：css中的grid布局
游戏各个界面展示：
整体界面展示
点击开始游戏的效果结束游戏展示分数

下面分别是各部分代码展示：

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="three.js"></script>
    <script src="jquery.min.js"></script>
 <link rel="stylesheet" href="style.css">

  </head>
  <body>
      <button id='level_1'>一级难度</button>
    <button id="level_2">二级难度</button>
    <button id="btn_start">开始游戏</button>
    <p>得分:<span id="score">0</span></p>
    <button id="btn_over">结束游戏</button>
    <div><img src="img/0202.png" alt=""  class="img_left"></div>
    <div><img src="img/0202.png" alt=""  class="img_right"></div>
    <div><img src="img/test2.gif" alt=""  class="img_gif1"></div>
    <div><img src="img/test.gif" alt=""  class="img_gif2"></div>


    <div class="main">
      <div class="main_grid">
        <img class="ground" src="img/01.png" alt="" />
        <img class=