IFE-2016-SP_task35_square_follow_directives_multi

by baishusama

HTML

<div class="panel">
	<div id="board">
		<!-- div.grid*100 -->
		<!-- <div id="square"></div> -->
	</div>
	<div class="controller">
		<div class="btnWrapper">
			<input type="button" value="Run" class="run" />
			<input type="button" value="Refresh" class="refresh" />
		</div>
		<div class="dirWrapper">
			<label for="directives">
				<ol id="lineNum">
					<li></li>
				</ol>
				<textarea name="directives" id="directives" cols="30" rows="10"></textarea>
			</label>
			<!-- <input type="text" id="directives" /> -->
		</div>
	</div>
</div>
<sidebar id="cheatSheet">
	<h4>Directive Cheat Sheet</h4>
	<ul>
		<li>GO - 前进</li>
		<li>TUN LEF - 向左转</li>
		<li>TUN RIG - 向右转</li>
		<li>TUN BAC - 向后转</li>
		<li>TRA TOP - 向上转并前进</li>
		<li>TRA RIG - 向右转并前进</li>
		<li>TRA BOT - 向下转并前进</li>
		<li>TRA LEF - 向左转并前进</li>
		<li>MOV TOP - 向上移动</li>
		<li>MOV RIG - 向右移动</li>
		<li>MOV BOT - 向下移动</li>
		<li>MOV LEF - 向左移动</li>
	</ul>
	<p>其中，GO 命令、TRA 命令和 MOV 命令可以添加一个数字做为参数，用来制定移动的步数。</p>
</sidebar>

CSS

@charset "UTF-8";
/* debug 'Invalid US-ASCII character' */
body {
  margin: 0; }

.panel {
  counter-reset: rowIndex; }

/*--------------------
    区域 & 小方块
--------------------*/
#board {
  position: relative;
  margin: 100px auto 20px;
  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;
  /* [!!note] 注意 nth-child 里的 n 必须写在最前，否则不会生效 */
  /* 添加数字 */ }
  .grid.clearfix {
    clear: both; }
  .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;
    font-family: Helvetica; }
  .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;
    font-family: Helvetica; }
  .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 {
   ...

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)';
}

// 用于偷懒的 $ 方法
function $(selector) {
    var elem = null;
    if (selector.indexOf('#') === 0) {
        elem = document.getElementById(selector.slice(1));
    } else if (selector.indexOf('.') === 0) {
        elem = document.getElementsByClassName(selector.slice(1));
    }
    return elem;
}

// 用于添加类名
function addClassName(elem, clsname) {
    var names = elem.className.split(/\s/);
    var index = names.indexOf(clsname);
    if (index === -1) {
        names.push(clsname);
        elem.className = names.join(' ');
        return true;
    }
    return false;
}
// 用于删除类名
function removeClassName(elem, clsname) {
    var names = elem.className.split(/\s/);
    var index = names.indexOf(clsname);
    if (index !== -1) {
        names.splice(index, 1);
        elem.className = names.join(' ');
        return true;
    }
    return false;
}

// DOM
// var squareDOM = document.getElementById("square");
var boardDOM = $("#board");
var directivesDOM = $("#directives");
var runBtnDOM = $(".run")[0];
var refreshBtnDOM = $(".refresh")[0];

// 区域
var board =...