HTML5 Canvas贪吃蛇特效代码下载


HTML5 Canvas贪吃蛇特效代码下载
HTML5 Canvas贪吃蛇特效代码下载以及Canvas贪吃蛇等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/rectangle.js"></script>
<script type="text/javascript" src="js/index.js"></script>

2. HTML代码

  <div class="pannel">
    <div class="pannel-header">
        <h1>贪吃蛇</h1>  
        <strong>分数:<span class="score-board">0</span></strong>
      </h2>
    </div>
      <div class="pannel-content">
        <canvas id="canvas"></canvas>
      </div>
      <div class="pannel-footer">
        <div class="btn-group">
          <input type="button" value="←(左箭头/A)" onClick="game.switchDirection('left')" />
          <input type="button" value="→(右箭头/D)" onClick="game.switchDirection('right')" />
          <input type="button" value="↑(上箭头/W)" onClick="game.switchDirection('up')" />
          <input type="button" value="↓(下箭头/S)" onClick="game.switchDirection('down')" />
        </div>
        <div class="btn-group">
          <input type="button" value="开始/暂停(空格)" onClick="game.toggleState();">
          <input type="button" value="重开一局(N)" onClick="game.restart(canvas);">
        </div>
      </div>
  </div>
  <script type="text/javascript">
    game.start();
    function onFocus() {return this.blur();}
    Array.from(document.querySelectorAll('input[type="button"],button')).forEach(e=>{
      e.onfocus = onFocus;
    });
  </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章