如何使用这些信息在javascript和html中创建海龟路径？使用二维阵列
当海龟向下移动笔时，从用户中选择*，将阵列地板的相应元素设置为1s。当给出6命令（打印）时，只要数组中有1，就显示星号或您选择的其他字符。如果有零，则显示空白。编写一个脚本来实现这里讨论的海龟图形功能。编写几个海龟图形程序来绘制有趣的形状。添加其他命令以提高turtle图形语言的能力如何使用这些信息在javascript和html中创建海龟路径？使用二维阵列,javascript,html,css,Javascript,Html,Css,当海龟向下移动笔时，从用户中选择*，将阵列地板的相应元素设置为1s。当给出6命令（打印）时，只要数组中有1，就显示星号或您选择的其他字符。如果有零，则显示空白。编写一个脚本来实现这里讨论的海龟图形功能。编写几个海龟图形程序来绘制有趣的形状。添加其他命令以提高turtle图形语言的能力 (Turtle Graphics) The Logo language, which is popular among young computer users, made the concept of t
(Turtle Graphics) The Logo language, which is popular among young computer users, made the concept of turtle graphics famous. Imagine a mechanical turtle that walks around the room under the control of a JavaScript program. The turtle holds a pen in one of two positions, up or down. When the pen is down, the turtle traces out shapes as it moves; when the pen is up, the turtle moves about freely without writing anything. In this problem, youll simulate the operation of the turtle and create a computerized sketchpad as well.Use a 20-by-20 array floor thats initialized to zeros. Read commands from an array that contains them. Keep track of the current position of the turtle at all times and of whether the pen is currently up or down. Assume that the turtle always starts at position (0, 0) of the floor, with its pen up. Suppose that the turtle is somewhere near the center of the floor. The following program would draw and print a 12-by-12 square, then leave the pen in the up position:
2,5,12,3,5,12,3,5,12,3,5,12,1,6,9
Assume that the turtle always starts facing right at position 0,0 (upper left hand corner) of the floor with its pen up. The set of turtle commands your program must process are as follows:
Command Meaning
1 Pen up
2 Pen down = "*"
3 Turn right
4 Turn left
5,10 Move forward 10 spaces (or a number other than 10)
6 Print the 20-by-20 array
9 End of data (sentinel)
ex10_15
li{列表样式类型：无；}
var-cols=20；
var行=20；
var multiarray=[]//[[arraySize]，[arraySize]]；
var text=“”；
//var数组=[2,5,12,3,5,12,3,5,12,3,5,12,1,6,9]；
var-emptySpace=''；
var UsedSpace=“”；
var-right=0；
左向量=0；
函数insertArray（）{
var x=document.getElementById（“输入”）.value；
如果（x==1）{
空空间=“”；
document.getElementById（“输入”）.value=“”；
}
如果（x==2）{
UsedSpace+=“*”；
x=0；
右+=1；
左+=1；
document.getElementById（“输入”）.value=“”；
}
如果（x==3）{
右+=1；
document.getElementById（“输入”）.value=“”；
}
如果（x==4）{
左+=1；
document.getElementById（“输入”）.value=“”；
}
如果（x==5 | | x==10 | | x==12）{
//UsedSpace+=“*”；
如果（右==1）{
窗口警报（“第一”）；
document.getElementById（“输入”）.value=“”；
文本+=“”；
对于（变量i=0；i=0；j--）{
text+=“- ”+多数组[i][j]+“
”；
}
}
}
如果（右==4）{
窗口警报（“第四”）；
document.getElementById（“输入”）.value=“”；
对于（变量i=20；i>=0；i--）{
对于（变量j=0；j=0；j）{
text+=“- ”+多数组[i][j]+“
”；
}
}
text+=“
”；
}
}
如果（x==6）{
窗口警报（“20”）；
document.getElementById（“输入”）.value=“”；
对于（变量i=0；i
1：写起来
2:放下笔
3:右转
4:左转
5,10：向前移动10格
6：打印20 x 20阵列
9：数据结束（sentinel）
注意：输入移动命令（5）作为两个命令
<!DOCTYPE html>
<html>
<head>
<title>ex10_15</title>
<style>
li {list-style-type: none;}
</style>
</head>
<script>
var cols = 20;
var rows = 20;
var multiarray = [];//[[arraySize],[arraySize]];
var text ="";
//var array = [2,5,12,3,5,12,3,5,12,3,5,12,1,6,9];
var emptySpace ='';
var UsedSpace= "";
var right = 0;
var left = 0;
function insertArray(){
var x = document.getElementById("Input").value;
if(x==1){
emptySpace ='';
document.getElementById("Input").value = "";
}
if(x==2){
UsedSpace += "*";
x = 0;
right += 1;
left += 1;
document.getElementById("Input").value = "";
}
if(x==3){
right+=1;
document.getElementById("Input").value = "";
}
if(x==4){
left+=1;
document.getElementById("Input").value = "";
}
if(x==5 || x==10 || x==12){
//UsedSpace += "*";
if(right==1){
window.alert("First");
document.getElementById("Input").value = "";
text += "<ul>";
for(var i= 0; i <= 0; i++){
for(var j = 0; j <= cols ; j++){
text += "<li style=\"display:inline\">" +multiarray[i][j]+"</li>";
}
}
}
if(right==2){
window.alert("Second");
document.getElementById("Input").value = "";
for(var i = 0; i <= rows ; i++){
for(var j = 20; j <= cols ; j++){
text += "<li style=\"display:inline\">" +multiarray[i][j]+"</li>";
}
}
}
if(right==3){
window.alert("Third");
document.getElementById("Input").value = "";
for(var i=20; i = rows ; i){
for(var j = 20 ; j>=0 ; j--){
text += "<li style=\"display:inline\">" +multiarray[i][j]+"</li>";
}
}
}
if(right==4){
window.alert("Fourth");
document.getElementById("Input").value = "";
for(var i = 20 ; i >= 0 ; i--){
for(var j = 0 ; j = 0 ; j){
text += "<li style=\"display:inline\">" +multiarray[i][j]+"</li>";
}
}
text +="</ul>";
}
}
if(x==6){
window.alert("20");
document.getElementById("Input").value = "";
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
text += multiarray[i][j];
}
}
}
if(x==9){
document.getElementById("Input").value = "";
UsedSpace = "";
}
}
function printturtle(){
window.alert("Finish");
document.getElementById("track").innerHTML = text;
UsedSpace = "";
}
function resetturtletrack(){
text = "";
document.getElementById("track").innerText = "";
right = 0;
left = 0;
UsedSpace = "";
}
function start(){
var submit = document.getElementById("submit");
submit.addEventListener("click",insertArray,false);
var process = document.getElementById("command");
process.addEventListener("click",printturtle,false);
var reset = document.getElementById("reset");
reset.addEventListener("click",resetturtletrack,false);
}
window.addEventListener("load",start,false);
</script>
<body>
<h2>Turtle Graphics Commands</h2>
<ul id="menu">
<li>
1:Pen Up
</li>
<li>
2:Pen Down
</li>
<li>
3:Turn Right
</li>
<li>
4:Turn Left
</li>
<li>
5,10:Move foward 10 spaces
</li>
<li>
6:Print 20 by 20 array
</li>
<li>
9:End of data (sentinel)
</li>
<li>
Note: Enter the move command (5) as two commands
</li>
</ul>
<br>
<input type="text" id="Input"/>
<input type="button" id="submit"value="Submit Command">
<input type="button" id="command" value="Process Commands">
<input type="button" id="reset" value="Reset">
<br>
<div id="track"></div>
</body>
</html>