Merge branch 'master' into gh-pages

timmyLan · Jan 23, 2017 · 2b769d6 · 2b769d6
2 parents cf28803 + 3fa3bd5
commit 2b769d6
Show file tree

Hide file tree

Showing 9 changed files with 444 additions and 0 deletions.
diff --git a/first-step/index.css b/first-step/index.css
@@ -0,0 +1,12 @@
+body{
+    margin:0;
+    padding: 0;
+}
+
+.activityModel {
+    border: 1px;
+    width: 19px;
+    height: 19px;
+    background: linear-gradient(70deg, indianred, white);
+    position: absolute;
+}
diff --git a/first-step/index.html b/first-step/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>first-step</title>
+    <link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+<script src="./index.js"></script>
+</body>
+</html>
diff --git a/first-step/index.js b/first-step/index.js
@@ -0,0 +1,55 @@
+/**
+ * Created by llan on 2017/1/23.
+ */
+'use strict';
+
+class Block {
+    /**
+     * 键盘事件
+     * 上下左右分别控制方块对应移动20px
+     */
+    move() {
+        document.onkeydown = (e)=> {
+            e.preventDefault();
+            let activeModel = document.querySelector('.activityModel'),
+                left = parseInt(activeModel.style.left) ? parseInt(activeModel.style.left) : 0,
+                top = parseInt(activeModel.style.top) ? parseInt(activeModel.style.top) : 0;
+            const key = e.keyCode;
+            switch (key) {
+                //left
+                case 37:
+                    activeModel.style.left = `${left - 20}px`;
+                    break;
+                //up
+                case 38:
+                    activeModel.style.top = `${top - 20}px`;
+                    break;
+                //right
+                case 39:
+                    activeModel.style.left = `${left + 20}px`;
+                    break;
+                //down
+                case 40:
+                    activeModel.style.top = `${top + 20}px`;
+                    break;
+            }
+        }
+    }
+
+    /**
+     * 初始化方块
+     */
+    init() {
+        let activeModel = document.createElement('div');
+        activeModel.className = 'activityModel';
+        document.body.appendChild(activeModel);
+    }
+}
+/**
+ * 浏览器加载初始化
+ */
+window.onload = ()=> {
+    let block = new Block;
+    block.init();
+    block.move();
+};
diff --git a/second-step/index.css b/second-step/index.css
@@ -0,0 +1,21 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.activityModel {
+    border: 1px;
+    width: 19px;
+    height: 19px;
+    background: linear-gradient(70deg, indianred, white);
+    position: absolute;
+}
+
+.site {
+    position: absolute;
+    left: 200px;
+    top: 200px;
+    width: 200px;
+    height: 360px;
+    background-color: black;
+}
diff --git a/second-step/index.html b/second-step/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>second-step</title>
+    <link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+<div class="site"></div>
+<script src="./index.js"></script>
+</body>
+</html>
diff --git a/second-step/index.js b/second-step/index.js
@@ -0,0 +1,124 @@
+/**
+ * Created by llan on 2017/1/23.
+ */
+'use strict';
+
+class Block {
+    constructor(siteSize) {
+        this.siteSize = siteSize;
+    }
+
+    /**
+     * 判断是否可以移动
+     * @returns {{canMoveRight: boolean, canMoveLeft: boolean, canMoveTop: boolean, canMoveDown: boolean}}
+     */
+    canMove() {
+        let activeModel = document.querySelector('.activityModel'),
+            top = parseInt(activeModel.style.top),
+            left = parseInt(activeModel.style.left),
+            canMoveRight = true,
+            canMoveTop = true,
+            canMoveDown = true,
+            canMoveLeft = true;
+        if (left + 20 >= this.siteSize.left + this.siteSize.width) {
+            canMoveRight = false;
+        }
+        if (left - 20 < this.siteSize.left) {
+            canMoveLeft = false;
+        }
+        if (top - 20 < this.siteSize.top) {
+            canMoveTop = false;
+        }
+        if (top + 20 >= this.siteSize.top + this.siteSize.height) {
+            canMoveDown = false;
+        }
+        return {
+            canMoveRight: canMoveRight,
+            canMoveLeft: canMoveLeft,
+            canMoveTop: canMoveTop,
+            canMoveDown: canMoveDown
+        }
+    }
+
+    /**
+     * 键盘事件
+     * 上下左右分别控制方块对应移动20px
+     */
+    move() {
+        document.onkeydown = (e)=> {
+            e.preventDefault();
+            let activeModel = document.querySelector('.activityModel'),
+                left = parseInt(activeModel.style.left) ? parseInt(activeModel.style.left) : 0,
+                top = parseInt(activeModel.style.top) ? parseInt(activeModel.style.top) : 0;
+            const key = e.keyCode;
+            const {canMoveRight, canMoveLeft, canMoveTop, canMoveDown} = this.canMove();
+            switch (key) {
+                //left
+                case 37:
+                    if (canMoveLeft) {
+                        activeModel.style.left = `${left - 20}px`;
+                    } else {
+                        console.log('can not move left');
+                    }
+                    break;
+                //up
+                case 38:
+                    if (canMoveTop) {
+                        activeModel.style.top = `${top - 20}px`;
+                    } else {
+                        console.log('can not move top');
+                    }
+                    break;
+                //right
+                case 39:
+                    if (canMoveRight) {
+                        activeModel.style.left = `${left + 20}px`;
+                    } else {
+                        console.log('can not move right');
+                    }
+                    break;
+                //down
+                case 40:
+                    if (canMoveDown) {
+                        activeModel.style.top = `${top + 20}px`;
+                    } else {
+                        console.log('can not move down');
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+    /**
+     * 初始化方块
+     */
+    init() {
+        let activeModel = document.createElement('div');
+        activeModel.className = 'activityModel';
+        //控制方块出现在画布顶端中间
+        activeModel.style.top = `${this.siteSize.top}px`;
+        activeModel.style.left = `${this.siteSize.left + this.siteSize.width / 2}px`;
+        //添加方块
+        document.body.appendChild(activeModel);
+    }
+}
+/**
+ * 浏览器加载初始化
+ */
+window.onload = ()=> {
+    //获取画布大小&位置
+    let site = document.querySelector('.site');
+    let {width, height, left, top} = window.getComputedStyle(site);
+    let siteSize = {
+        width: parseInt(width),
+        height: parseInt(height),
+        left: parseInt(left),
+        top: parseInt(top),
+    };
+    //新建Block
+    let block = new Block(siteSize);
+    block.init();
+    block.move();
+};
diff --git a/third-step/index.css b/third-step/index.css
@@ -0,0 +1,21 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.activityModel {
+    border: 1px;
+    width: 19px;
+    height: 19px;
+    background: linear-gradient(70deg, indianred, white);
+    position: absolute;
+}
+
+.site {
+    position: absolute;
+    left: 200px;
+    top: 200px;
+    width: 200px;
+    height: 360px;
+    background-color: black;
+}
diff --git a/third-step/index.html b/third-step/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>third-step</title>
+    <link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+<div class="site"></div>
+<script src="./index.js"></script>
+</body>
+</html>