时间戳

首页 > 解决方案 > 如何使用这些信息在 javascript 和 html 中创建海龟路径？使用二维数组

javascript - 如何使用这些信息在 javascript 和 html 中创建海龟路径？使用二维数组

问题描述

    (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)

SELECT * FROM Users 随着海龟的笔向下移动，将数组 floor 的适当元素设置为 1s。当给出 6 命令（打印）时，在数组中有 1 的地方显示一个星号或您选择的其他字符。哪里有零，就显示一个空白。编写一个脚本来实现这里讨论的海龟图形功能。编写几个海龟图形程序来绘制有趣的形状。添加其他命令以增强海龟图形语言的功能。 

<!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>

标签： javascripthtmlcss

解决方案

推荐阅读