听指令的小方块（一）

如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
- GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
- TUN LEF：向左转（逆时针旋转90度）
- TUN RIG：向右转（顺时针旋转90度）
- TUN BAC：向右转（旋转180度）
移动不能超出格子空间

demo: codepen.io/llldmiao/fu…

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>听指令的小方块（一）</title><style>.container{width:600px;margin:0 auto;}</style>
</head>
<body onload="draw()"><div class="container"><canvas width="500px" height="500px" id="canvas"></canvas><div><select id="order"><option value="go">GO</option><option value="TUN_LEF" selected>TUN LEF</option><option value="TUN_RIG">TUN RIG</option><option value="TUN_BAC">TUN BAC</option></select><button id="doit">执行</button></div></div><script>var x=0;//小方块行号，取值0~9var y=0;//小方块列号，取值0~9var direction=0;//小方块方向，function draw(){var can=document.getElementById("canvas");if(can.getContext){var ctx=can.getContext("2d");ctx.clearRect(0,0,500,500);/*必须，因为每次执行order都会执行一次draw()函数，如果不清除，原有的内容（包括小方格）还会继续存在，继续往下执行就会重复，小方格最明显，边框之类的多执行几次就能看出来变粗了*///画外边框//左边和上边看起来比右边和下边宽,但没找到原因ctx.lineWidth=1;ctx.strokeStyle='#000';ctx.strokeRect(50,50,450,450);//画坐标点ctx.font='16px Times New Roman';ctx.textAlign='center';for(var i=1;i<11;i++){ctx.strokeText(i,i*45+25,25);ctx.strokeText(i,25,i*45+30);}//画行线ctx.strokeStyle='#c2c2c2';for(var i=1;i<10;i++){ctx.moveTo(50,i*45+50);ctx.lineTo(500,i*45+50);ctx.moveTo(i*45+50,50);ctx.lineTo(i*45+50,500);}ctx.stroke();//小方块ctx.beginPath();ctx.fillStyle='rgb(255,0,0)';ctx.fillRect(x*45+50,y*45+50,45,45);ctx.fillStyle='rgb(0,0,255)';//蓝色部分的四种朝向switch(direction){case 0://朝上ctx.fillRect(x*45+50,y*45+50,45,10);break;case 1://朝右ctx.fillRect(x*45+85,y*45+50,10,45);break;case 2://朝下ctx.fillRect(x*45+50,y*45+85,45,10);break;case 3://朝左ctx.fillRect(x*45+50,y*45+50,10,45);break;}ctx.fill();}}//小方块移动（前进）function go(){switch(direction){case 0:if(y>0){y--;}break;case 1:if(x<9){x++;}break;case 2:if(y<9){y++;}break;case 3:if(x>0){x--;}break;default:break;}draw();}//对button添加事件监听var doit=document.getElementById('doit');doit.addEventListener('click',function(){var sel=document.getElementById('order');var opt=sel.options[sel.selectedIndex].value;//根据指令，小方块将转向或移动switch(opt){case 'go':go();break;case 'TUN_LEF':direction=(direction-1+4)%4;draw();break;case 'TUN_RIG':direction=(direction+1)%4;draw();break;case 'TUN_BAC':direction=(direction+2)%4;draw();break;default:break;}})</script>
</body>
</html>
复制代码

听指令的小方块（一）相关推荐

原生js实现小方块拖拽
需求:实现点击一个小方块按下拖拽的功能. 实现: <!DOCTYPE html> <html lang="en"> <head><met ...
使用 icon 字体图标出现小方块问题
今天在弄一个vue 项目的时候,碰到了引入icon 出现错误,现在总结一下问题: 主要碰到两个错误 1:路径错误,报错找不到modules, 2:路径错误,但是没有报错,只是显示小方块(也就是没有显示 ...
红色小方块单击爆炸式展开的菜单代码
代码简介:不知道能给它起个什么名字,就叫做"爆炸式菜单"吧,因为它的效果很像是爆炸开了,鼠标点击后会以一个五角星为基准单元依次展开,可以有多次,像链式表一样. 代码内容: < ...
解决sublime3的标签页乱码（小方块）
在使用sublime3打开一个中文名的文件时,有可能显示的是小方块.这种情况很有可能在你新买的电脑上发生,这是因为现在的电脑的DPI比较高,即使你安装了ConvertToUTF8也还是不会正确显示文件 ...
js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
java 方块_哈工大java实验移动小方块
/*java第二次实验 * 移动小方块 */ import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import ...
IOS基础之愤怒的小方块
IOS基础之愤怒的小方块 // // ViewController.m // 18-愤怒的小方块 // // Created by 鲁军 on 2021/4/17. //#import "V ...
[html] 字体图标加载出来成了小方块，是什么原因呢？如何解决？
[html] 字体图标加载出来成了小方块,是什么原因呢?如何解决? css样式没有引用吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
python怎么给画布填上颜色_python numpy matplotlib画小方块填充背景色和添加不同色彩的文字...
需要根据不同的数值生成不同色彩的小方块,并标明数值,考虑到各种色彩的方块,如果采用文字采用黑色或者白色总是避免不了和背景色重复,所以把数值转化成rgb(0x11,0xf0,0x3b)类似的值,然后文字 ...

听指令的小方块（一）

听指令的小方块（一）相关推荐

最新文章

热门文章