最近一直在做百度前端技术学院的任务,其中有一个听指令的小方块的任务,实现起来比较有趣,今年的这部分有(一)和(二)两部分,然而只是指令的不同,于是我就放在一个代码中了。
任务要求:
- 实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框
- 在输入框中允许输入如下指令,按下按钮后,使得正方形做相应动作
- GO:向蓝色边所面向的方向前进一格(一格等同于正方形的边长)
- TUN LEF:向左转(逆时针旋转90度)
- TUN RIG:向右转(顺时针旋转90度)
- TUN BAC:向右转(旋转180度)
- 移动不能超出格子空间
- 对于正方形的移动增加相应动画,包括移动和旋转
- 每个指令的执行时间是1s(可以自己调整)
- 增加新的指令如下:
- TRA LEF:向屏幕的左侧移动一格,方向不变
- TRA TOP:向屏幕的上面移动一格,方向不变
- TRA RIG:向屏幕的右侧移动一格,方向不变
- TRA BOT:向屏幕的下面移动一格,方向不变
- MOV LEF:方向转向屏幕左侧,并向屏幕的左侧移动一格
- MOV TOP:方向转向屏幕上面,向屏幕的上面移动一格
- MOV RIG:方向转向屏幕右侧,向屏幕的右侧移动一格
- MOV BOT:方向转向屏幕下面,向屏幕的下面移动一格
设计思路:
- 先利用canvas分别画出棋盘和小方块
- 设置一个角度变量监视小方块蓝色边框转向的位置,通过改变小方块的style属性从而实现小方块的旋转
- 设置top、left变量,通过改变小方块的位置实现小方块在棋盘中的移动
代码实现:
<!DOCTYPE html>
<html>
<head>
<title>yaoyaoTask4</title>
<meta charset="utf-8">
<style type="text/css">
#block{
position: absolute;
top: 8px;
left: 8px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="block" width="30" height="30"></canvas>
<br>
<input type="text" id="order">
<input type="button" id="dod" value="执行">
<script type="text/javascript">
var canvas =document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//canvas画棋盘
function backgroundimg (){
ctx.fillStyle="#ccc";
ctx.fillRect = (0,0,canvas.width,canvas.height);
var grid_cols =10;
var grid_rows=10;
var cell_height=canvas.height/grid_rows;
var cell_width=canvas.width/grid_cols;
ctx.lineWidth=1;
ctx.strokeStyle="silver";
ctx.beginPath();
for(var col=0;col<=grid_cols;col++){
var x=col*cell_width;
ctx.moveTo(x,0);
ctx.lineTo(x,canvas.height);
}
for(var row=0;row<=grid_rows;row++){
var y=row*cell_height;
ctx.moveTo(0,y);
ctx.lineTo(canvas.width,y);
}
ctx.stroke();
}
//canvas画小方块
function bloc(){
var block=document.getElementById("block");
var blo=block.getContext("2d");
blo.fillStyle="red";
blo.fillRect(0,0,block.width,block.height);
blo.fillStyle="blue";
blo.fillRect(0,0,block.width,block.height/4);
}
var order=document.getElementById("order");
var dod=document.getElementById("dod");
var current=0;
var to=8;
var lef=8;
window.addEventListener("load",function(){
backgroundimg();
bloc();
var block=document.getElementById("block");
function moveUp(){
to-=30;
if(to>=8&&to<=278){
block.style.top=to + "px";
}else{
to+=30;
alert("已到棋盘边界!");
}
}
function moveDown(){
to+=30;
if(to>= 8 && to<=278){
block.style.top=to+"px";
}else{
to-=30;
alert("已到棋盘边界!");
}
}
function moveLeft(){
lef-=30;
if(lef>=8&&lef<=278){
block.style.left=lef+"px";
}else{
lef+=30;
alert("已到棋盘边界!");
}
}
function moveRight(){
lef+=30;
if(lef>=8&&lef<=278){
block.style.left=lef+"px";
}else{
lef-=30;
alert("已到棋盘边界!");
}
}
function turn(ang){
current=(current+ang)%360;
block.style.transform='rotate('+ current +'deg)';
}
function rotat(){
block.style.transform='rotate('+ current +'deg)';
}
dod.addEventListener("click",function(){
switch(order.value) {
case "TUN LEF": turn(270); break;
case "TUN RIG":turn(90); break;
case "TUN BAC": turn(180); break;
case "GO":
switch(current%360) {
case 0: moveUp(); break;
case 90: moveRight(); break;
case 180: moveDown(); break;
case 270: moveLeft(); break;};break;
case "TRA LEF": moveLeft(); break;
case "TRA RIG": moveRight(); break;
case "TRA TOP": moveUp(); break;
case "TRA BOT": moveDown(); break;
case "MOV LEF": current=270; rotat(); moveLeft();
break;
case "MOV RIG": current=90; rotat(); moveRight();
break;
case "MOV TOP": current=0; rotat(); moveUp();
break;
case "MOV BOT": current=180; rotat(); moveDown();
break;
default: alert("指令输入错误!");
}
//order.value="";
// order.focus();
},false);
},false);
</script>
</body>
</html>
github: https://github.com/kxinera/baiduIFE/blob/master/yaoyaoTasks/yaoyaoTask5.html