-
Notifications
You must be signed in to change notification settings - Fork 77
/
turtle.html
78 lines (75 loc) · 2.3 KB
/
turtle.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>Javascript Turtle</title>
<link type="text/css" rel="stylesheet" href="turtle.css" />
<meta name="color-scheme" content="light dark" />
</head>
<body>
<div id="wrap">
<h1>Javascript Turtle Graphics</h1>
<div id="leftcolumn">
<h4>Language API Reference</h4>
<code>
forward(distance) <br/>
right(angle) <br/>
left(angle) <br/>
goto(x,y) <br/>
clear() <br/>
penup() <br/>
pendown() <br/>
reset() <br/>
angle(angle) <br/>
degToRad(angle) <br/>
radToDeg(angle) <br/>
width(width) <br/>
shape(shape) <br/>
colour(r,g,b,a) <br/>
color(r,g,b,a) <br/>
write(msg) <br/>
n = random(low,high) <br/>
hideTurtle() <br/>
showTurtle() <br/>
redrawOnMove(bool) <br/>
draw() <br/>
repeat(n, action) <br/>
wrap(bool) <br/>
animate(action,ms) <br/>
range(start, end, step=1) <br/>
</code>
</div> <!-- leftcolumn -->
<div id="midcolumn">
<h4>Canvas</h4>
<canvas id="turtlecanvas" width="300" height="300"></canvas>
<canvas id="imagecanvas" width="300" height="300" style="display:none"></canvas>
<h4>Command</h4>
<input type="text" id="command" placeholder="use arrow keys to navigate history" autocapitalize="off"/>
<br/>
<button id="runButton">Run</button>
<button id="resetButton">Reset</button>
</div> <!-- midcolumn -->
<div id="rightcolumn">
<h4>Definitions</h4>
<textarea id="definitions" rows="30">
// Define helper functions here.
// For example:
function square(side) {
repeat(4, function () {
forward(side);
right(90);
});
}
function demo() {
hideTurtle();
colour(0,0,255,1);
for(s = 100; s > 0; s -= 10) {
square(s);
right(36);
}
}
</textarea>
</div> <!-- rightcolumn -->
</div> <!-- wrap-->
<script type="text/javascript" src="turtle.js"></script>
</body>
</html>