add vue tetris

timmyLan · Dec 21, 2017 · a27c654 · a27c654
1 parent af0be0a
commit a27c654
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -102,7 +102,7 @@
 * [github地址][30]  
 * [本教程示例][31]  
 * [本教程出处][32]
-
+* [vue版本的俄罗斯方块][33]
   [1]: http://ohumzw01d.bkt.clouddn.com/%E4%BF%84%E7%BD%97%E6%96%AF%E6%96%B9%E5%9D%97.png
   [2]: https://github.com/timmyLan/tetris/blob/master/first-step/index.css
   [3]: https://github.com/timmyLan/tetris/blob/master/first-step/index.js
@@ -135,3 +135,4 @@
   [30]: https://github.com/timmyLan/tetris
   [31]: https://timmylan.github.io/tetris/
   [32]: https://segmentfault.com/a/1190000008181905
+  [33]: https://github.com/timmyLan/tetris-vue
diff --git a/canvas-tetris/index.html b/canvas-tetris/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<canvas id="canvas" width="300" height="300"></canvas>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/canvas-tetris/index.js b/canvas-tetris/index.js
@@ -0,0 +1,50 @@
+/**
+ * Created by llan on 2017/2/14.
+ */
+window.onload = ()=> {
+    let canvas = document.querySelector('#canvas'),
+        ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, 300, 300);
+    ctx.fillRect(0, 0, 300, 300);
+    ctx.fillStyle = 'rgba(255,255,255,0.8)';
+    let arr = [[1, 0], [1, 0], [1, 1]];
+    const draw = (arr, remove = false) => {
+        ctx.fillStyle = remove ? 'rgb(0,0,0)' : 'rgba(255,255,255,0.8)';
+        for (let i = 0; i < arr.length; i++) {
+            for (let j = 0; j < arr[0].length; j++) {
+                if (arr[i][j] === 1) {
+                    ctx.fillRect(j * 20, i * 20, 20, 20);
+                }
+            }
+        }
+    };
+    draw(arr);
+    document.onkeydown = (e)=> {
+        let key = e.keyCode;
+        switch (key) {
+            //left
+            case 37:
+                draw(arr, true);
+                ctx.translate(-20, 0);
+                draw(arr);
+                console.log('left');
+                break;
+            //right
+            case 39:
+                draw(arr, true);
+                ctx.translate(20, 0);
+                draw(arr);
+                console.log('right');
+                break;
+            //up
+            case 38:
+                draw(arr,true);
+                ctx.rotate(Math.PI/2);
+                draw(arr);
+                console.log('up');
+                break;
+            default:
+                break;
+        }
+    }
+};