From c8a2643841fb17bf0e200ef4406b67a95da62ee5 Mon Sep 17 00:00:00 2001 From: llan Date: Thu, 12 Jan 2017 14:11:06 +0800 Subject: [PATCH] finish a block --- .gitignore | 51 ++++++++++++++++++++ README.md | 0 index.css | 12 +++++ index.html | 14 ++++++ index.js | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 214 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a2e7340 --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/index.css b/index.css new file mode 100644 index 0000000..a35f474 --- /dev/null +++ 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 new file mode 100644 index 0000000..a82b633 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..6632373 --- /dev/null +++ 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); +})(); + +