IFE-2016-SP-task33 Square Following Directives I

Posted on | Edited on

My Solution

My solution to task33 is available on jsfiddle:

Circular Indexing - Modulus vs Remainder

(In Javascript) The % operator is not mod, even though that’s how everyone reads it. It’s actually remainder. But we need mod…

JavaScript’s numeric operators are +, -, *, / and % — which is the remainder operator (which is not the same as modulo.)

Solution 1

1
2
3
4
5
6
// This solution is from the first link quoted above.
// Note the use of Math.floor ! It also takes 'The mod operator returns a float' into consideration, which I'm not quite sure...(???)
function mod(num, mod){
  var remain = num % mod;
  return Math.floor(remain > 0 ? remain : remain + mod);
}

"The modulus operator in JavaScript is also different from the one in other programming languages. It operates not only on integers but also on floating point numbers. You should be aware that the modulus operator occasionally returns inaccurate results. " as said, but I’m not sure when % operates only on integers will it occasionally returns inaccurate results ???

Solution 2

1
2
// My Solution
(num % mod + mod) % mod

Dealing with CSS Property with Prefixes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Inspired by 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;
    }
  }
}

// var PROPERTY = getProperName("transform");

Compared with others’

任务得分第三的团队的 solution

  • 😶 Some differences compared with my solution
    • 🎀 Much shorter HTML and CSS; JS bears much more responsibilities.
      • Each cell in the board only has border-right and border-bottom CSS styles and even less when appears on the rightmost or downmost added with class by JS.
      • In the task’s case, making cells box-sizing: border-box; is not a good try 😦. In other word, it’s better remain cells default box-sizing: content-box; .
      • Leftmost cells are added with clear: both; to change line instead of fixing the size of their parent div, which takes extra calculation.
      • All cells in the board are generated by JS instead of HTML , which is much more flexible when you want a board of different size.
    • 🌟 Random position generated when document loaded initially makes the game more interesting.
    • 😕 Using two variable ( turn and rotate ) having something in common instead of one to record direction as well as degrees should the square rotate. If the direction valiable is able to be negative, then it can figures out the degree valiable if only times 90.
  • 🔖 document.createElement vs document.createDocumentFragment

任务得分前三的其他团队的 solution

  • 😶 Using table tag for layout of the board.

任务得分第四的团队的 solution

  • 🎀 outline together with background: #fff; instead of border

  • 🔖 水平垂直居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .content {
      position: absolute;/* 相对于视窗 */
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 300px;
      width: 300px;
    }

  • 🔖 去掉 inline-block 元素间间隙

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .row-ol {
      height: 30px;
      width: 300px;
      line-height: 30px;
      letter-spacing: -0.5em;/* inline-block 元素的父元素设置 letter-spacing 为负 */
    }
    .row-ol li {
      display: inline-block;/* inline-block 元素 */
      width: 30px;
      text-align: center;
      letter-spacing: 0;/* inline-block 元素设置 letter-spacing 为零 */
    }

  • 🔖 counter-increment - 用来自动生成 ::before 或 ::after 的 content

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 写法一：该团队原本的写法 */
    .column-ol li {
      counter-increment: lineIndex;
    }
    .column-ol li::before {
      content: counter(lineIndex);
    }

    /* 写法二：MDN 例子里的写法 */
    .column-ol {
      counter-reset: lineIndex;
    }
    .column-ol li::before {
      counter-increment: lineIndex;
      content: counter(lineIndex);
    }

    Using CSS counters @MDN

  • 🌟 彩蛋 - “方向键盘乱搓可开启灵车飘逸模式OvO”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 键盘控制方向
    document.onkeydown = function(event){
      var e = event || window.event;
      switch(e.keyCode){
        case 37:
          return command.exportLeft();
          break;
        case 38:
          return command.exportGo();
          break;
        case 39:
          return command.exportRight();
          break;
        case 40:
          return command.exportBack();
          break;
      }
    }