您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 游戏特效 >

    HTML5游戏:生命游戏+代码

    时间:2014-04-21 08:32 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • HTML5生命游戏:每个格子是一个细胞。当一个格子周围有3个细胞生,该细胞为生。周围有2个细胞生,该细胞生死不变。其他情况,细胞死。作者By D'T PH 7.0。忙累了玩一玩,放松一下吧。
    • <!DOCTYPE html>
      <html>
      <meta charset="UTF-8">
      <title>HTML5生命游戏</title>
      <style>
      canvas {
          background: #eeeeee;
          border: 1px solid #c3c3c3;
      }
      button {
          background: #aaaaaa;
      }
      </style>
      </head>
      <body>
      <canvas id="myCanvas" width="500" height="500" onclick="mouseClick(event)"></canvas>
      </canvas>
      <button onclick="start()">start</button>
      <script type="text/javascript">
      var xOffset = 20;
      var yOffset = 20;
      var gridSize = 40;
      var size = 10;
      var board = new Array(
              [1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
              [1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
              [0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
              [0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
              [0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d");
      cxt.fillStyle = "#FF0000";
      paint();
      <!-- 主绘制函数 -->
      function paint() {
          cxt.fillStyle = "#eeeeee";
          cxt.fillRect(0, 0, 500, 500);
          cxt.fillStyle = "#00ff00";
          for (var i = 0; i <= size; i++) {
              cxt.moveTo(xOffset, yOffset + i * gridSize);
              cxt.lineTo(xOffset + gridSize * size, yOffset + i * gridSize);
          }
          for (var i = 0; i <= size; i++) {
              cxt.moveTo(xOffset + i * gridSize, yOffset);
              cxt.lineTo(xOffset + i * gridSize, yOffset + gridSize * size);
          }
          cxt.stroke();
          for (var x = 0; x < board.length; x++) {
              for (var y = 0; y < board[x].length; y++) {
                  //alert(x+" "+y+" "+board[x][y]);
                  if (board[x][y] == 1) {
                      cxt.fillRect(xOffset + x * gridSize, yOffset + y * gridSize, gridSize - 1, gridSize - 1);
                  }
              }
          }
      }
      <!--我是上帝!鼠标点击,反转细胞存活情况 -->
      function mouseClick(event) {
          var x = parseInt((event.layerX - xOffset) / gridSize);
          var y = parseInt((event.layerY - yOffset) / gridSize);
          board[x][y] = !board[x][y];
          paint();
      }
      <!--生死判定 -->
      function reverse() {
          var copy = board;
          for (var i = 0; i < board.length; i++) {
              for (var j = 0; j < board[i].length; j++) {
                  var count = aroundCount(i, j);
                  if (count == 3) {
                      copy[i][j] = 1;
                  } else if (count == 2) {
                  } else {
                      copy[i][j] = 0;
                  }
              }
          }
          board = copy;
      }
      <!--不算该细胞,周围八个格子细胞存活数 -->
      function aroundCount(x, y) {
          var count = 0;
          for (var i = x - 1; i <= x + 1; i++) {
              for (var j = y - 1; j <= y + 1; j++) {
                  if (i < 0 || i >= board.length || j < 0 || j >= board.length) {
                      continue;
                  }
                  if (board[i][j]) {
                      count++;
                  }
              }
          }
          if (board[x][y]) {
              count--;
          }
          return count;
      }
      <!--start -->
      function start() {
          setTimeout(function () {
              reverse();
              paint();
              setTimeout(arguments.callee, 1000);
          }, 1000);
      }
      </script>
      </body>
      </html>
    HTML5游戏:生命游戏+代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/youxitexiao/7123.html
    标签:网站源码