这是js代码:
(function(){
var $=function(id){return document.getElementById(id);}
//添加浏览器兼容事件
function addEvent(el,type,handler){
if(el.addEventListener){
el.addEventListener(type,handler,false);
}else if(el.attachEvent){
el.attachEvent("on"+type,handler);
}else{
el["on"+type]=handler;
}
}
//构造函数+原型
var SheetBlock=function(btn,block,txt,sheet){
this.btn=$("btn");
this.block=$("block");
this.txt=$("txt");
this.sheet=$("sheet");
this.num=$("num");
this.divs=0;
this.tdone=$("sheet").childNodes.item(1).childNodes.item(2).childNodes.item(3);
this.commandAll=[];
var self=this;
this.dir=0;//除以4余数为-3,1的时候向右,余数为-2,2的时候向下, 余数为3 ,-1的时候向左,余数为0向上
//块的位置初始化
this.block.style.left=this.tdone.offsetLeft+this.sheet.offsetLeft+"px";
this.block.style.top=this.tdone.offsetTop+this.sheet.offsetTop+"px";
addEvent(this.btn,"click",function(){
//调用字符串处理函数
var str=self.txt.value.trim();
var commandArr=str.split(/\n/);
for(var i=0;i<commandArr.length;i++){
//console.log(commandArr[i]);//弹出数组["TUN RIG", "GO"]
self.judge(commandArr[i]);//但只执行了一个TUN RIG ,不执行GO,这是为什么?????
}
});
//处理输入域
addEvent(this.txt,"keyup",function(e){
e=e||window.event;
if(e.keyCode==13){
//调用左侧数目函数
self.createNum();
}
});
}
SheetBlock.prototype={
createNum:function(){
this.divs++;
var div=document.createElement("div");
div.innerHTML=this.divs;
div.setAttribute("class","normal");
this.num.appendChild(div);
},
judge:function(value){
console.log(value);
if(value=="GO"){
switch(this.dir%4){
case -3:
case 1:
this.RIG();
break;
case 0:
this.TOP();
break;
case -2:
case 2:
this.BOT();
break;
case 3:
case -1:
this.LEF();
break;
}
}else if(value=="TUN LEF"){
this.dir--;
this.block.style.transform="rotate("+this.dir*90+"deg)";
}else if(value=="TUN RIG"){
this.dir++;
this.block.style.transform="rotate("+this.dir*90+"deg)";
}else if(value=="TUN BAC"){
this.dir=this.dir+2;
this.block.style.transform="rotate("+this.dir*90+"deg)";
}else if(value=="TRA LEF"){
this.LEF();
}else if(value=="TRA TOP"){
this.TOP();
}else if(value=="TRA RIG"){
this.RIG();
}else if(value=="TRA BOT"){
this.BOT();
}else if(value=="MOV LEF"){
this.block.style.transform = "rotate(-90deg)";
this.LEF();
this.dir=7;
}else if(value=="MOV TOP"){
this.block.style.transform = "rotate(0deg)";
this.TOP();
this.dir=4;
}else if(value=="MOV RIG"){
this.block.style.transform = "rotate(90deg)";
this.RIG();
this.dir=5;
}else if(value=="MOV BOT"){
this.block.style.transform = "rotate(180deg)";
this.BOT();
this.dir=6;
}else{
alert("请输入正确指令");
}
return this.dir;
},
RIG:function(){
if(this.block.offsetLeft<857){
this.block.style.left=this.block.offsetLeft+42+"px";
}
},
TOP:function(){
if(this.block.offsetTop>59){
this.block.style.top=this.block.offsetTop-42+"px";
}
},
LEF:function(){
if(this.block.offsetLeft>480){
this.block.style.left=this.block.offsetLeft-42+"px";
}
},
BOT:function(){
if(this.block.offsetTop<400){
this.block.style.top=this.block.offsetTop+42+"px";
}
},
}
var sheet=new SheetBlock();
})();
这是html代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>task33</title>
<link rel="stylesheet" href="task.css" type="text/css">
</head>
<body>
<table id="sheet" cellpadding="0" cellspacing="0" border="0" width=“440px”>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="block">
<div id="block_front"></div>
<div id="block_back"></div>
</div>
<div id="inp">
<button id="btn">执行</button>
<button>Refresh</button>
<br/>
<div id="inputbox">
<div id="num">
</div>
<textarea rows="15" cols="49" id="txt" >
</textarea>
</div>
</div>
<script src="task.js" type="text/javascript"></script>
</body>
</html>
大写的王
相关分类