IFE-2016-SP_task34_square_follow_directives_v2

by baishusama

HTML

<div class="panel">
	<div id="board">
		<!-- div.grid*100 -->
		<!-- <div id="square"></div> -->
	</div>
	<div class="controller">
		<input type="text" id="directives" placeholder="请输入指令.." />
		<input type="button" value="执行" />
	</div>
</div>

CSS

body {
	margin: 0;
}

.panel {
	counter-reset: rowIndex;
}

#board {
	position: relative;
	margin: 50px auto;
	border: 2px solid;
	width: 398px;
	height: 398px;
	counter-reset: colIndex;
}

.grid {
	position: relative;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	width: 40px;
	height: 40px;
  background-color: mistyrose;
}

.grid.clearfix {
	clear: both;
}
/* [!!note] 注意 nth-child 里的 n 必须写在最前，否则不会生效 */
/* 添加数字 */

.grid:nth-child(-n + 10):before {
	position: absolute;
	top: -24px;
	left: 8px;
	display: block;
	/* counter-reset by #board */
	counter-increment: colIndex;
	content: counter(colIndex);
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
}

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

.grid.downmost {
	border-bottom: none;
	height: 38px;
}

.grid.rightmost {
	border-right: none;
	width: 38px;
}

#square {
	position: absolute;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-top: 8px solid salmon;
	width: 40px;
	height: 40px;
	background-color: lightpink;
	transition: all .5s;
}

#square:before,
#square:after {
	position: absolute;
	top: -6px;
	display: block;
	content: '\a0';
	border-radius: 5px / 15px;
	width: 10px;
	height: 30px;
	background-color: salmon;
}

#square:before {
	left: 6px;
	transform: rotate(5deg);
}

#square:after {
	right: 6px;
	transform: rotate(-5deg);
}

.controller {
	overflow: hidden;
	margin: 0 auto;
	width: 420px;
}

.controller input {
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0;
	border-radius: 0;
	padding: 0;
}

.controller input[type="text"]...

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 board = (function() {
    var ROW = 10;
    var COLUMN = 10;
    var bd = [];

    var generateBoard = function() {
        var cell = null;
        for (var i = 0; i < ROW; i++) {
            var rowTmp = [];
            for (var j = 0; j < COLUMN; j++) {
                cell = document.createElement("div");
                cell.className = "grid";
                if (j === 0) {
                    cell.className += " clearfix";
                } else if (j === 9) {
                    cell.className += " rightmost";
                }
                if (i === 9) {
                    cell.className += " downmost";
                }
                boardDOM.appendChild(cell);
                rowTmp.push(0);
            }
            bd.push(rowTmp);
        }
    };
    return {
        generateBoard: function() {
           ...