name: "Landscape",
kind: "Hack",
style: "background-color: #2ab40f",
+ preferences: [
+ {name: "direction", label: "Direction of Travel", kind: "ListSelector", items: [
+ {caption: "right", value: -1},
+ {caption: "left", value: 1}
+ ]},
+ {name: "speed", label: "Speed", kind: "Slider", minimum: 0.1, maximum: 10, snap: 0.1}
+ ],
+ direction: -1,
+ speed: 1.0,
components: [
{name: "clouds", style: "height: 200px; background-image: url(hacks/Landscape/clouds.png)"},
{name: "mountains", style: "height: 200px; background-image: url(hacks/Landscape/mountains.png)"},
this.timer = null;
},
draw: function() {
- this.n--;
- if (this.n == -1600)
- this.n = 0;
+ this.n += this.direction * this.speed;
+ if (this.n <= -1600)
+ this.n += 1600;
+ else if (this.n >= 1600)
+ this.n -= 1600;
this.$.clouds.applyStyle("background-position", (this.n * 1.5) + "px top");
this.$.mountains.applyStyle("background-position", (this.n * 2.5) + "px top");