finish a block

timmyLan · Jan 12, 2017 · c8a2643 · c8a2643
commit c8a2643
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,51 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+.idea
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
@@ -0,0 +1,12 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.activityModel {
+    border: 1px;
+    width: 19px;
+    height: 19px;
+    background: red;
+    position: absolute;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,137 @@
+/**
+ * Created by llan on 2017/1/11.
+ */
+const block = function (params = {
+    arr: [[1, 0], [1, 0], [1, 1]],
+    curLeft: 0,
+    curTop: 0,
+    BLOCK_SIZE: 20
+}) {
+    //方块矩阵
+    let arr = params.arr,
+        curLeft = params.curLeft,
+        curTop = params.curTop;
+    //方块大小
+    const BLOCK_SIZE = params.BLOCK_SIZE;
+    /**
+     * 画当前方块
+     * @param i
+     * @param j
+     */
+    const draw = function (i, j) {
+        let left = j * BLOCK_SIZE;
+        let top = i * BLOCK_SIZE;
+        let model = document.createElement('div');
+        model.className = 'activityModel';
+        model.style.left = `${left}px`;
+        model.style.top = `${top}px`;
+        document.body.appendChild(model);
+    };
+    /**
+     * 顺时针旋转矩阵
+     * @param arr 需要旋转的矩阵
+     * @returns {{newArr: Array, lefts: Array, tops: Array}}
+     */
+    const clockwise = function (arr) {
+        let newArr = [];
+        for (let i = 0; i < arr[0].length; i++) {
+            let temArr = [];
+            for (let j = arr.length - 1; j >= 0; j--) {
+                temArr.push(arr[j][i]);
+            }
+            newArr.push(temArr);
+        }
+        let lefts = [],
+            tops = [];
+        checkArrWith1(newArr, function (i, j) {
+            lefts.push(j * BLOCK_SIZE);
+            tops.push(i * BLOCK_SIZE);
+        });
+        return {
+            newArr: newArr,
+            lefts: lefts,
+            tops: tops
+        };
+    };
+    /**
+     * 判断数组中值为1的下标
+     * @param arr 需要判断的数组
+     * @param callback 需要执行的回调函数
+     */
+    const checkArrWith1 = function (arr, callback) {
+        for (let i = 0; i <= arr.length - 1; i++) {
+            for (let j = 0; j <= arr[0].length - 1; j++) {
+                if (arr[i][j] === 1) {
+                    callback(i + curTop, j + curLeft);
+                }
+            }
+        }
+    };
+    //画出当前方块
+    checkArrWith1(arr, draw);
+    //记录当前方块
+    let activityModels = document.getElementsByClassName('activityModel');
+    /**
+     * 键盘事件
+     * @param e
+     */
+    document.onkeydown = function (e) {
+        const key = e.keyCode;
+        switch (key) {
+            //space
+            case 32:
+                let {newArr, lefts, tops}= clockwise(arr);
+                //记录转变后的矩阵
+                arr = newArr;
+                for (let i in lefts) {
+                    // activityModels[i].style.left = `calc(${lefts[i]}px + ${curLeft}px)`;
+                    // activityModels[i].style.top = `calc(${tops[i]}px + ${curTop}px)`;
+                    activityModels[i].style.left = `${lefts[i]}px`;
+                    activityModels[i].style.top = `${tops[i]}px`;
+                }
+                break;
+            //left
+            case 37:
+                for (let v of activityModels) {
+                    v.style.left = `calc(${v.style.left } - ${BLOCK_SIZE}px)`;
+                }
+                curLeft--;
+                break;
+            //top
+            case 38:
+                for (let v of activityModels) {
+                    v.style.top = `calc(${v.style.top } - ${BLOCK_SIZE}px)`;
+                }
+                curTop--;
+                break;
+            //right
+            case 39:
+                for (let v of activityModels) {
+                    v.style.left = `calc(${v.style.left } + ${BLOCK_SIZE}px)`;
+                }
+                curLeft++;
+                break;
+            //down
+            case 40:
+                for (let v of activityModels) {
+                    v.style.top = `calc(${v.style.top } + ${BLOCK_SIZE}px)`;
+                }
+                curTop++;
+                break;
+            default:
+                break;
+        }
+    };
+};
+
+(function init() {
+    const params = {
+        arr: [[1, 0], [1, 0], [1, 1]],
+        curLeft: 2,
+        curTop: 3,
+        BLOCK_SIZE: 20
+    };
+    block(params);
+})();
+
+