百度前端学院之听指令的小方块(二)
前言
这是承接之前的第二个任务。
正文
任务描述 对于正方形的移动增加相应动画,包括移动和旋转 每个指令的执行时间是1s(可以自己调整) 增加新的指令如下: TRA LEF:向屏幕的左侧移动一格,方向不变 TRA TOP:向屏幕的上面移动一格,方向不变 TRA RIG:向屏幕的右侧移动一格,方向不变 TRA BOT:向屏幕的下面移动一格,方向不变 MOV LEF:方向转向屏幕左侧,并向屏幕的左侧移动一格 MOV TOP:方向转向屏幕上面,向屏幕的上面移动一格 MOV RIG:方向转向屏幕右侧,向屏幕的右侧移动一格 MOV BOT:方向转向屏幕下面,向屏幕的下面移动一格
可以看到指令变了,但是变化不是很大。可以直接根据之前的进行修改调整。
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');
}
}
结尾
后续的几个任务的确挺有挑战的-0-,米有时间就不继续写了。