利用HTML5實現青蛙吃蚊子微信游戲代碼



47 187 63



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 经销商和生产商谁更赚钱 辽宁十一选五连线走势图 足彩赔率与盘口分析技巧 宝彩网3d走势图 重庆时时彩走势图 118彩票游戏 新疆35选7第2018046期 急速赛车手在线看 大乐透微信合买怎样操作. 钱龙捕鱼如何下载 2019上证指数最高点 福彩3d开奖结果 五体球到底是个什么球 不同银行的可以赚钱吗 南通棋牌公众号 辽宁体彩11选5专家推存