IFE-2016-SP_task33_square_follow_directives

by baishusama January 11, 2017

HTML

<div class="panel">
  <div id="board">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div...

CSS

body {
  margin: 0;
}

.panel {
  padding: 1px;
}

#board {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  /*border: 2px solid;*/
  padding: 39px;
  width: 402px;
  height: 402px;
}

.grid {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  width: 40px;
  height: 40px;
}


/* [!!note] 注意 nth-child 里的 n 必须写在最前，否则不会生效 */

.grid:nth-child(-n + 10) {
  position: relative;
  border-top-color: #000;
  border-top-width: 2px;
  height: 41px;
}


/* 添加数字 */

.grid:nth-child(-n + 10):before {
  position: absolute;
  top: -24px;
  left: 8px;
  display: block;
  /*content: '1';*/
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.grid:nth-child(1):before {
  content: '1';
}

.grid:nth-child(2):before {
  content: '2';
}

.grid:nth-child(3):before {
  content: '3';
}

.grid:nth-child(4):before {
  content: '4';
}

.grid:nth-child(5):before {
  content: '5';
}

.grid:nth-child(6):before {
  content: '6';
}

.grid:nth-child(7):before {
  content: '7';
}

.grid:nth-child(8):before {
  content: '8';
}

.grid:nth-child(9):before {
  content: '9';
}

.grid:nth-child(10):before {
  content: '10';
}

.grid:nth-child(10n + 1) {
  position: relative;
  border-left-color: #000;
  border-left-width: 2px;
  width: 41px;
}

.grid:nth-child(10n + 1):after {
  position: absolute;
  top: 8px;
  left: -24px;
  display: block;
  /*content: '1';*/
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.grid:nth-child(1):after {
  content: '1';
}

.grid:nth-child(11):after {
  content: '2';
}

.grid:nth-child(21):after {
  content: '3';
}

.grid:nth-child(31):after {
  content: '4';
}

.grid:nth-child(41):after {
  content: '5';
}

.grid:nth-child(51):after {
  content: '6';
}

.grid:nth-child(61):after {
  content: '7';
}

.grid:nth-child(71):after {
  content: '8';
}

.grid:nth-child(81):after {
  content: '9';
}

.grid:nth-child(91):after {
 ...

JavaScript

// 解决 IE 和非 IE 浏览器在事件绑定方面的兼容性
function addEventHandler(elem, event, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(event, handler, false);
    } else if (elem.attachEvent) {
        elem.attachEvent("on" + event, handler);
    } else {
        elem["on" + event] = handler;
    }
}

// 以下关于 css 前缀的处理方法借鉴自 jQuery ：jquery-3.1.0.js
function getProperName(cssPropertyName) {
    var name = cssPropertyName;
    var cssPrefixes = ["Webkit", "Moz", "ms"];
    var emptyStyle = document.createElement("div").style;
    if (name in emptyStyle) {
        return name;
    }

    var capName = name[0].toUpperCase + name.slice(1);
    var i = cssPrefixes.length;
    while (i--) {
        name = cssPrefixes[i] + capName;
        if (name in emptyStyle) {
            return name;
        }
    }
}

function generateInlineStyle(degree) {
    var deg = degree || 0;
    return 'rotate(' + deg + 'deg)';
}

// DOM
var squareDOM = document.getElementById("square");
var boardDOM = document.getElementById("board");
var dirInputDOM = document.getElementById("directives");
var dirInputBtnDOM = dirInputDOM.nextElementSibling;

// 小方块
var square = (function() {
    var sqPos = [5, 5];
    var sqDir = 0;
    // var DIRECTION = ["faceNorth", "faceEast", "faceSouth", "faceWest"];
    var PROPERTY = getProperName("transform");
    console.log("当前浏览器支持的是 " + PROPERTY);

    var directionMod4 = function() {
        /* sqDir % 4 === 0,1,2,3 */
        // 为了解决当 sqDir 为负数时，sqDir % 4 的值不在 0,1,2,3 之间的问题

        /* 法1. 能否借助 Math 的某未知方法？？？ */
        //     Q: Math 有没有方法能取模只返回正数？
        //     A: JS 当下不存在这样的函数。
        //     Q: 能否通过比如说 Math.abs 实现（特别是还要能避免使用 if）？
        //     A: 至少用 Math.abs 只会帮倒忙。。

        /* 法2. 本想借助 substr 方法支持末尾计数法和一个静态字符串来实现。。。 */
        //     A: 但是当被模数的绝对值大于模数时，存在问题。比如 >4 的时候会反回 NaN 。
        //        实质上，String 的末尾计数法（substr/slice）的计算方式并不能很好地和真正的取模运算相映射 Orz
        // var DIRECTION = ["faceNorth", "faceEast", "faceSouth", "faceWest"];
        //...

IFE-2016-SP_task33_square_follow_directives

HTML

CSS

JavaScript

Please Whitelist JSFiddle in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console