百度前端学院之听指令的小方块（二）

js:
	    window.onload = function() {
	        createBoxContainer(); //创建面板
	        // 获取HTLM元素
	        square.draw(); //初始化，置于0，0

	        document.getElementById("run").onclick = function() {
	            var operate = document.getElementById("command").value; //获取输入框的值
	            switch (operate.toUpperCase()) {
                    case 'TRA LEF':
                        square.move('left');
                        break;
                    case 'TRA TOP':
                         square.move('up');
                        break;
                    case 'TRA RIG':
                        square.move('right');
                        break;
                    case 'TRA BOT':
 												square.move('down');
                        break;
                    case 'MOV LEF':
						            square.changeFace('left');
						            square.move('left');
                        break;
                    case 'MOV TOP':
						            square.changeFace('up');
						            square.move('up');
                        break;
                    case 'MOV RIG':
						            square.changeFace('right');
						            square.move('right');
                        break;
                    case 'MOV BOT':
						            square.changeFace('down');
						            square.move('down');
                        break;
                }
	        }
	        //向屏幕的X侧移动一格，方向不变
	        document.getElementById("traleft").onclick = function() {
	            square.move('left');
	        }
	        document.getElementById("traup").onclick = function() {
	            square.move('up');
	        }
	        document.getElementById("traright").onclick = function() {
	            square.move('right');
	        }
	        document.getElementById("tradown").onclick = function() {
	            square.move('down');
	        }

	        //方向转向屏幕x侧，并向屏幕的x侧移动一格
	        document.getElementById("moveleft").onclick = function() {
	            square.changeFace('left');
	            square.move('left');
	        }
	        document.getElementById("moveup").onclick = function() {
	            square.changeFace('up');
	            square.move('up');
	        }
	        document.getElementById("moveright").onclick = function() {
	            square.changeFace('right');
	            square.move('right');
	        }
	        document.getElementById("movedown").onclick = function() {
	            square.changeFace('down');
	            square.move('down');
	        }

	    }

	    function createBoxContainer() {
	        var bg = document.getElementById("boxContent");
	        var tr = [];
	        for (var i = 0; i < 11; i++) {
	            tr[i] = document.createElement("tr"); // 创建11行tr
	            bg.appendChild(tr[i]);
	            var td = [];
	            for (var j = 0; j < 11; j++) {
	                td[j] = document.createElement("td"); // 创建11列td
	                if (i === 0 && j > 0) {
	                    td[j].innerHTML = j; // 标注列数
	                }
	                if (i > 0 && j === 0) {
	                    td[j].innerHTML = i; // 标注行数
	                }
	                tr[i].appendChild(td[j]);
	            }
	        }
	    }

	    var square = {
	        config: {
	            posx: 0, //定义方块的x坐标
	            posy: 0, //定义方块的y坐标
	            face: 'up' //蓝色条朝向，
	        },
	        move:function(postion){
	            var that = this;
	            if (postion == 'up' && that.config.posy > 0) {
	                that.config.posy--; // square上移
	            } else if (postion == 'right' && that.config.posx < 9) {
	                that.config.posx++; // square右移
	            } else if (postion == 'down' && that.config.posy < 9) {
	                that.config.posy++; // square下移
	            } else if (postion == 'left' && that.config.posx > 0) {
	                that.config.posx--; // square左移
	            } else {
	                return false;
	            }
	            that.draw();
	        },
	        changeFace: function(face) {
	            var that = this;
	            var postion = {
	                [0]: [
	                    'up'
	                ],
	                [1]: [
	                    'right'
	                ],
	                [2]: [
	                    'down'
	                ],
	                [3]: [
	                    'left'
	                ],
	            };
	            var faceRotate = {
	                ["up"]: [
	                    0
	                ],
	                ["down"]: [
	                    2
	                ],
	                ["left"]: [
	                    3
	                ],
	                ["right"]: [
	                    1
	                ],
	            };


	            var square = document.getElementById("square");
	            var r = faceRotate[face];
	            that.config.face = postion[r];
	            console.log(r);
	            square.style.transform = square.style.webkitTransform = square.style.msTransform = "rotate(" + (r * 90) + "deg)";
	        },

	        draw: function() {
	            var that = this;
	            var square = document.getElementById("square");
	            square.style.top = that.config.posy * 50 + 50 + "px";
	            square.style.left = that.config.posx * 50 + 50 + "px";

	            console.log(that.config.posx + 'x');
	            console.log(that.config.posy + 'y');
	        }
	    }