利用HTML5实现青蛙吃蚊子微信游戏代码



12 46 16



特效描述:利用HTML5实现 青蛙吃蚊子 微信游戏代码,利用HTML5实现青蛙吃蚊子微信游戏代码

代码结构

1. 引入JS

<script src="js/prefixfree.min.js"></script>
<script  src="js/index.js"></script>

2. HTML代码

<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 其他游戏 其他h5游戏 其他h5源码游戏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到