哥哥与弟弟的游戏故事

最新推荐文章于 2024-07-11 16:52:21 发布

极客云曦

最新推荐文章于 2024-07-11 16:52:21 发布

阅读量375

点赞数

分类专栏： H5游戏文章标签： html5

本文链接：https://blog.csdn.net/fgcgvhgvhj/article/details/118445343

版权

这个游戏是在我小弟游戏机上看见的,我当时问他你玩的什么呀？

小弟说: 这是一个青蛙再吃苍蝇的游戏。

我说: 然后我就问我小弟这个游戏怎么玩的呀！

小弟说:这个游戏是苍蝇飞起来的时候你就点他一下,就把他给吃掉了。

于是我就有了灵感。

以下就是我用 HTML CSS JS 写的写的一个青蛙吃苍蝇的小游戏，还可以切换场景，HTML负责布局,CSS负责写样式 JS负责写特效这里分三大模块,

第一模块：是标题开始按钮时间分数计数。

第二大模块：完成分数计数重新开始按钮。

第三大模块：设置白天时间晚上时间。

HTML部分

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>青蛙吃苍蝇小游戏</title>
  <link rel="styleSheet" href="css/style.css">
</head>

<body>
  <div class="environment">
    <div class="sky"></div>
    <div class="stars"></div>
    <div class="sun"></div>
    <div class="moon"></div>
    <div class="mountains">
      <div class="mountain">
        <div class="trees">
          <div class="tree"></div>
          <div class="tree tree--2"></div>
          <div class="tree tree--3"></div>
          <div class="tree tree--4"></div>
        </div>
      </div>
      <div class="mountain mountain--2"></div>
    </div>
    <div class="water"></div>
    <div class="lily lilly-1"></div>
  </div>
  <div class="player">

    <div class="legs">
      <div class="leg leg--left">
      </div>
      <div class="leg leg--right">
      </div>
    </div>

    <div class="body">
      <div class="crown"></div>
      <div class="belly"></div>
      <div class="arms">
        <div class="arm arm--left">
          <div class="hand">
            <div class="toe"></div>
            <div class="toe"></div>
            <div class="toe"></div>
          </div>
        </div>
        <div class="arm arm--right">
          <div class="hand">
            <div class="toe"></div>
            <div class="toe"></div>
            <div class="toe"></div>
          </div>
        </div>
      </div>
      <div class="mouth">
        <div class="top-lip"></div>
        <div class="bottom-lip"></div>
        <div class="tongue">
          <div class="tongue-inner">
            <div class="fly is-dead"></div>
          </div>
        </div>
      </div>
      <div class="eyes">
        <div class="eye eye--left">
          <div class="pupil"></div>
        </div>
        <div class="eye eye--right">
          <div class="pupil"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="screen menu">
    <h1>喂青蛙</h1>
    <a href="#" class="btn play" onClick="play()">
      <span class="text">开始</span>
      <br>
      <span>最好: <span class="js-best">0</span></span>
    </a>
    <a href="#" class="btn" onClick="settings()">设置</a>
  </div>

  <div class="screen game">
    <div class="hud">
      <div class="time">
        <span class="label">时间</span>
        <span class="value js-time">30</span>
      </div>

      <div class="score">
        <span class="label">分数</span>
        <span class="value js-score">0</span>
      </div>
    </div>

    <div class="flies">
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
      <div class="path">
        <div class="target">
          <div class="fly"></div>
        </div>
      </div>
    </div>


  </div>

  <div class="screen win">
    <h1>完成</h1>
    <div class="card">
      <h3 class="highscore js-highscore is-hidden">新高分！</h3>

      <div class="score">
        <span class="label">分数</span>
        <span class="value js-score">30</span>
      </div>

      <div class="best">
        <span class="label">最好</span>
        <span class="value js-best">0</span>
      </div>

    </div>
    <a href="#" class="btn" onClick="play()">再玩一次</a>
    <a href="#" class="btn btn--clear" onClick="menu()">返回菜单</a>
  </div>

  <div class="screen settings">
    <h1>设置</h1>

    <div class="card">
      <label class="checkbox">
        <input type="radio" name="theme" value="light" checked onClick="toggleTheme(this.value)">
        <span>白天时间</span>
      </label>
      <label class="checkbox">
        <input type="radio" name="theme" value="dark" onClick="toggleTheme(this.value)">
        <span>晚上时间</span>
      </label>
    </div>

    <a href="#" class="btn js-toggle-music" onClick="toggleMusic()">打开音乐</a>

    <a href="#" class="btn" onClick="menu()">返回</a>
  </div>

  <div class="screen scoreboard">
    <h1>记分牌</h1>
    <div class="card">
      <ol class="scoreboard-list js-scoreboard"></ol>
    </div>

    <a href="#" class="btn" onClick="menu()">返回</a>
  </div>

  <audio id="music" src="zzsc.mp3"></audio>
   <script src="js/prefixfree.min.js"></script>
  <script src="js/index.js"></script>
  <div style="text-align:center;">
  </div>
</body>

</html>

CSS源码

sytyle.css

      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be

最低0.47元/天解锁文章

极客云曦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
哥哥与弟弟的游戏故事

这个游戏是在我小弟游戏机上看见的,我当时问他你玩的什么呀？小弟说: 这是一个青蛙再吃苍蝇的游戏。我说: 然后我就问我小弟这个游戏怎么玩的呀！小弟说:这个游戏是苍蝇飞起来的时候你就点他一下,就把他给吃掉了。以下就是我用 HTML CSS JS 写的写的一个青蛙吃苍蝇的小游戏，还可以切换场景，HTML负责布局,CSS负责写样式 JS负责写特效这里分三大模块,第一模块：是标题开始按钮时间分数计数。第二大模块：完成分数计数重新开始按钮。第三大模块：设置白天时间 ...
复制链接

扫一扫