Untitled

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

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