俄罗斯方块

这是用了好久才搞明白 完全自创的俄罗斯方块 

主要是画方块和地图 是和方块变形移动对数据的处理是分开的

也是最近刚刚学到这种思维方式 感觉很好  就是单纯的去控制变量 最后在去画方块之类的

这样写很容易去修改  最开始写了将近1000行  现在已经缩短了好多 还是有些没有改 但是我觉得还不错了

没有旋转的算法  完全评价数组去保存 还有几中方块没写 注释有点少 但是几乎函数名都是拼音很好解决的很简单的一个小游戏

<canvas id="myCanvas" width="1000" height="600" style="border:5px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。</canvas>
  <button type="button" οnclick="kaishi()">开始游戏</button> Score: <span id="score"> 0</span>
  <script>
    function kaishi() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      w = 0; m = 0;
      var n = 10;
      var a = 0;
      var score = 0;
      var tarr = new Array();//把画布定义为一个二维数组并且值为0；
      for (var k = 0; k < 23; k++) {
        tarr[k] = new Array();
        for (var j = 0; j < 13; j++) {
          tarr[k][j] = 0;
        }
      }
      var arr = new Array();//把储存方块放到一个二维数组并且值为0；
      for (var k = 0; k < 23; k++) {
        arr[k] = new Array();
        for (var j = 0; j < 13; j++) {
          arr[k][j] = 0;
        }
      }
      var color = ["#9400D3", "#0000FF", "#1E90FF", "#00BFFF", "#00FF00", "#FFBAFF", "#C7A3ED", "#C7A3ED"]
      for (z = 0; z < color.length; z++) {
        o = Math.round(Math.random() * 7);
        color[z] = color[o]
      }
      function look() {
        for (var k = n; k < n + 4; k++) {
          for (var j = a; j < a + 4; j++) {
            if (arr[k][j] == 1) {
              ctx.fillStyle = color[0];
              ctx.fillRect(k * 50, j * 50, 50, 50)
            }
            if (arr[k][j] == 2) {
              ctx.fillStyle = color[1];
              ctx.fillRect(k * 50, j * 50, 50, 50)
            }
            if (arr[k][j] == 3) {
              ctx.fillStyle = color[2];
              ctx.fillRect(k * 50, j * 50, 50, 50)
            }
            if (arr[k][j] == 4) {
              ctx.fillStyle = color[3];
              ctx.fillRect(k * 50, j * 50, 50, 50)
            }
          }
        }
      }
      function fuzhi() {
        for (i = n; i < n + 4; i++)
          for (j = a; j < a + 4; j++)
            if (arr[i][j] >= 1)
              tarr[i][j] = arr[i][j]
      }
      function kaishi() {//用一维数组保存一个4*4的网格
        var arr = new Array();//把画布定义为一个二维数组并且值为0；
        for (var k = n; k < n + 4; k++) {
          arr[k] = new Array();
          for (var j = a; j < a + 4; j++) {
            arr[k][j] = 0;
          }
        }
        up(q);
      }
      function xianshi()//画方块
      {
        for (i = 0; i < 21; i++) {
          for (t = 0; t < 13; t++) {
            if (tarr[i][t] == 1) {
              ctx.fillStyle = color[0];
              ctx.fillRect(i * 50, t * 50, 50, 50)
            }
            if (tarr[i][t] == 2) {
              ctx.fillStyle = color[1];
              ctx.fillRect(i * 50, t * 50, 50, 50)
            }
            if (tarr[i][t] == 3) {
              ctx.fillStyle = color[2];
              ctx.fillRect(i * 50, t * 50, 50, 50)
            }
            if (tarr[i][t] == 4) {
              ctx.fillStyle = color[3];
              ctx.fillRect(i * 50, t * 50, 50, 50)
            }
          }
        }
      }
      function delline() {
        var c = 0;
        for (var b = 0; b < 13; b++) {
          for (var z = 0; z < 21; z++) {
            if (tarr[z][b] >= 1) {
              c = c + 1;
              if (c == 20) {
                score = score + 10;
                for (var d = b; d > 0; d--) {
                  for (var e = 0; e < 21; e++) {
                    tarr[e][d] = tarr[e][d - 1];
                  }
                }

              }
            }
          }
          c = 0;
        }
      }
      function zhizao(q, b, c, d, e, f, g, h)//让方块出现
      {
        for (var k = n; k < n + 4; k++) {
          for (var j = a; j < a + 4; j++) {
            arr[k][j] = 0;
          }
        }
        arr[q][b] = 1; arr[c][d] = 2; arr[e][f] = 3; arr[g][h] = 4;
      }
      function up(l)//变形 每一个数字代表一个类型
      {
        clearCanvas();
        if (l == 0) {
          zhizao(n, a + 3, n + 1, a + 3, n + 2, a + 3, n + 3, a + 3)
        }
        else if (l == 1) {
          zhizao(n, a + 3, n, a + 2, n + 1, a + 2, n + 1, a + 3)
        }
        else if (l == 2) {
          zhizao(n, a + 2, n + 1, a + 2, n + 1, a + 3, n + 2, a + 3)
        }
        else if (l == 3) {
          zhizao(n + 1, a + 2, n + 1, a + 1, n, a + 2, n, a + 3)
        }
        else if (l == 4) {
          zhizao(n + 1, a + 2, n + 1, a + 3, n, a + 3, n + 2, a + 3)
        }
        else if (l == 5) {
          zhizao(n, a + 1, n, a + 2, n, a + 3, n + 1, a + 2)
        }
        else if (l == 6) {
          zhizao(n, a + 2, n + 1, a + 2, n + 2, a + 2, n + 1, a + 3)
        }
        else if (l == 7) {
          zhizao(n + 1, a + 1, n, a + 2, n + 1, a + 2, n + 1, a + 3)
        }
        else if (l == 8) {
          zhizao(n, a + 2, n, a + 3, n + 1, a + 3, n + 2, a + 3)
        }
        else if (l == 9) {
          zhizao(n, a + 1, n + 1, a + 1, n, a + 2, n, a + 3)
        }
        else if (l == 10) {
          zhizao(n, a + 2, n + 1, a + 2, n + 2, a + 2, n + 2, a + 3)
        }
        else if (l == 11) {
          zhizao(n + 1, a + 2, n + 1, a + 3, n + 1, a + 1, n, a + 3)
        }
        else if (l == 12) {
          zhizao(n + 2, a, n + 2, a + 1, n + 2, a + 2, n + 2, a + 3)
        }
      }
      function move(t)//左右下移动
      {
        clearCanvas()
        if (t == 1) {//左移动
          if (!op(t))
            --n;
          kaishi();
        }
        else if (t == 2) {
          if (!op(t))
            ++n;
          kaishi();
        }
        else {
          if (is()) {
            down();
          }
          else {
            a = a + 1
            kaishi();
          }
        }
      }
      function showkey() {
        key = event.keyCode;
        if (key == 37) move(1);
        if (key == 38) {
          if (q == 0) q = 12;
          else if (q == 1) q = 1;
          else if (q == 2) q = 3;
          else if (q == 3) q = q - 1;
          else if (q == 4) q = 5;
          else if (q == 5) q = 6;
          else if (q == 6) q = 7;
          else if (q == 7) q = 4;
          else if (q == 8) q = 9;
          else if (q == 9) q = 10;
          else if (q == 10) q = 11;
          else if (q == 11) q = 8;
          else if (q == 12) q = 1;
          up(q);
        }//旋转
        if (key == 39) move(2);
        if (key == 40) move(3);
      }
      document.onkeydown = showkey;
      function clearCanvas() {
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        c.height = c.height;
      }
      function is() {
        for (i = n; i < n + 4; i++) {
          if ((a >= 8) || (tarr[i][a + 4] >= 1 && arr[i][a + 3] >= 1) || (tarr[i][a + 3] >= 1 && arr[i][a + 2] >= 1))
            return true;
        }
      }
      function op(t) {
        if (t == 1) {
          for (i = n; i < n + 4; i++) {
            for (t = a; t < a + 4; t++)
              if ((n == 0 && arr[n][t] >= 1) || (tarr[i - 1][t] >= 1 && arr[n][t] >= 1))
                return true;
          }
        }
        else if (t == 2) {
          for (i = n; i < n + 4; i++) {
            for (t = a; t < a + 4; t++) {
              if ((tarr[i + 1][t] >= 1 && arr[i][t] >= 1) || (arr[18][t] >= 1 && arr[19][t] >= 1) || (n > 19))
                return true;
            }
          }
        }
      }
      function start() {
        a = 0; n = 10;
        l = Math.round(Math.random() * 11);
        up(l); q = l;
        look();
        setInterval(look, 0);
        setInterval(xianshi, 0);
        if (w == 1) {
          clearInterval(run);
          run = setInterval(down, 1000)
        }
      }
      function down()//下降
      {
        clearCanvas()
        if (is()) {
          clearInterval(run);
          fuzhi();
          kaishi();
          delline()
          updateScore()
          over();
          if (m == 0) {
            w = 1;
            start();
          }
          else {
            clearCanvas()
            for (var k = 0; k < 21; k++) {
              for (var j = 0; j < 13; j++) {
                tarr[k][j] = 0;
                arr[k][j] = 0;
              }
            }
            m = 0;
            score = 0;
          }
        }
        else {
          a = a + 1;
          kaishi();
        }
      }
      start();
      if (w == 0)
        var run = setInterval(down, 1000)//下落x
      function over() {
        for (var b = 0; b < 21; b++) {
          if (tarr[b][1] >= 1) {
            alert("GAME OVER");
            m = 1;
          }
        }
      }
      function updateScore() {
        document.getElementById("score").innerText = " " + score;
      }
    }
  </script>
</body>

</html>