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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
// Mini Logo engine
// Based on Liogo compiler from Lionel Laské
// http://liogo.sourceforge.net
enyo.kind({
name: "Liogo",
published: { canvas: undefined, image: undefined },
// Create component
create: function() {
this.inherited(arguments);
this.commands = [];
this.initheading = 90;
this.canvasChanged();
},
// Canvas property changed
canvasChanged: function(old) {
this.initx = this.canvas.attributes.width / 2;
this.inity = this.canvas.attributes.height / 2;
this.width = this.canvas.attributes.width;
this.height = this.canvas.attributes.height;
},
// Draw canvas an its content
draw: function() {
// Clear all
this.ctx = this.canvas.node.getContext('2d');
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.canvas.width = this.ctx.canvas.width;
this.ctx.strokeStyle = "blue";
this.ctx.lineWidth = 2;
// Set init pos
this.x = this.initx;
this.y = this.inity;
this.heading = this.initheading;
this.ctx.moveTo(this.x, this.y);
// Draw each command
var i = 0;
var len = this.commands.length;
for (i = 0 ; i < len ; i++) {
var action = this.commands[i];
switch(action.command)
{
case 'f':
this._do_forward(action.arg);
break;
case 'r':
this._do_right(action.arg);
break;
case 'l':
this._do_left(action.arg);
break;
}
this.ctx.moveTo(this.x, this.y);
}
// Draw turtle
this.ctx.translate(this.x, this.y);
this.ctx.rotate((90-this.heading) * (Math.PI / 180));
this.ctx.translate(-11,-14);
this.ctx.drawImage(this.image, 0, 0);
},
// Clear all content
clear: function() {
this.commands = [];
this.x = this.initx;
this.y = this.inity;
this.heading = 90;
},
// Forward turtle to the value
forward: function(value) {
this.commands.push({command: 'f', arg: value});
},
// Turn left turtle to the angle value
left: function(value) {
this.commands.push({command: 'l', arg: value});
},
// Turn right turtle to the angle value
right: function(value) {
this.commands.push({command: 'r', arg: value});
},
// Process forward command, forward turtle using value and current heading
_do_forward: function(value) {
var radians = this.heading * (Math.PI/180);
this.x = this.x + value * Math.cos(radians);
this.y = this.y - value * Math.sin(radians);
this.ctx.lineTo(this.x, this.y);
this.ctx.stroke();
},
// Process left command, just change heading
_do_left: function(value) {
this.heading += value;
if (this.heading > 360)
this.heading -= 360;
},
// Process right command, just change heading
_do_right: function(value) {
this.heading -= value;
if (this.heading < 0)
this.heading += 360;
}
});
|
