5 <script type="text/javascript"> |
5 <script type="text/javascript"> |
6 var sky, clouds, horizont, water, land, border; |
6 var sky, clouds, horizont, water, land, border; |
7 var skyColor, waterTopColor, waterBottomColor; |
7 var skyColor, waterTopColor, waterBottomColor; |
8 var elements = 7; |
8 var elements = 7; |
9 var landArray; |
9 var landArray; |
10 |
10 |
11 function landFunction(x){ |
11 function landFunction(x){ |
12 return 384 - 192 * Math.sin(x * Math.PI/512); |
12 return 384 - 192 * Math.sin(x * Math.PI/512); |
13 } |
13 } |
14 |
14 |
15 function tryToDraw(){ |
15 function tryToDraw(){ |
16 if (--elements <= 0) { |
16 if (--elements <= 0) { |
17 draw(); |
17 draw(); |
18 } |
18 } |
19 } |
19 } |
20 |
20 |
21 function load(){ |
21 function load(){ |
22 var canvas = document.getElementById('preview'); |
22 var canvas = document.getElementById('preview'); |
23 if (canvas.getContext){ |
23 if (canvas.getContext){ |
24 var ctx = canvas.getContext('2d'); |
24 var ctx = canvas.getContext('2d'); |
25 |
25 |
26 ctx.fillStyle = '#0b294b'; |
26 ctx.fillStyle = '#0b294b'; |
27 ctx.fillRect(0, 0, 512, 384); |
27 ctx.fillRect(0, 0, 512, 384); |
28 |
28 |
29 ctx.font = "40pt Arial"; |
29 ctx.font = "40pt Arial"; |
30 ctx.fillStyle = '#2b7bd5'; |
30 ctx.fillStyle = '#2b7bd5'; |
31 ctx.fillText('Loading Images...', 32, 212); |
31 ctx.fillText('Loading Images...', 32, 212); |
32 } |
32 } |
33 |
33 |
34 sky = new Image(); |
34 sky = new Image(); |
35 sky.onload = tryToDraw; |
35 sky.onload = tryToDraw; |
36 sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png'; |
36 sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png'; |
37 |
37 |
38 clouds = new Image(); |
38 clouds = new Image(); |
39 clouds.onload = tryToDraw; |
39 clouds.onload = tryToDraw; |
40 clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png'; |
40 clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png'; |
41 |
41 |
42 horizont = new Image(); |
42 horizont = new Image(); |
43 horizont.onload = tryToDraw; |
43 horizont.onload = tryToDraw; |
44 horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png'; |
44 horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png'; |
45 |
45 |
46 land = new Image(); |
46 land = new Image(); |
47 land.onload = tryToDraw; |
47 land.onload = tryToDraw; |
48 land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png'; |
48 land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png'; |
49 |
49 |
50 border = new Image(); |
50 border = new Image(); |
51 border.onload = tryToDraw; |
51 border.onload = tryToDraw; |
52 border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png'; |
52 border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png'; |
53 |
53 |
54 water = new Image(); |
54 water = new Image(); |
55 water.onload = tryToDraw; |
55 water.onload = tryToDraw; |
56 water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png'; |
56 water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png'; |
57 |
57 |
58 landArray = new Array(512); |
58 landArray = new Array(512); |
59 for (var x = 0; x < landArray.length; x++) |
59 for (var x = 0; x < landArray.length; x++) |
60 landArray[x] = landFunction(x); |
60 landArray[x] = landFunction(x); |
61 |
61 |
62 skyColor = '#131252'; |
62 skyColor = '#131252'; |
63 document.getElementById('skyColor').value = skyColor; |
63 document.getElementById('skyColor').value = skyColor; |
64 |
64 |
65 waterTopColor = '#555C9D'; |
65 waterTopColor = '#555C9D'; |
66 document.getElementById('waterTopColor').value = waterTopColor; |
66 document.getElementById('waterTopColor').value = waterTopColor; |
67 |
67 |
68 waterBottomColor = '#343C7D'; |
68 waterBottomColor = '#343C7D'; |
69 document.getElementById('waterBottomColor').value = waterBottomColor; |
69 document.getElementById('waterBottomColor').value = waterBottomColor; |
70 |
70 |
71 tryToDraw(); |
71 tryToDraw(); |
72 } |
72 } |
73 |
73 |
74 function draw(){ |
74 function draw(){ |
75 var canvas = document.getElementById('preview'); |
75 var canvas = document.getElementById('preview'); |
76 if (canvas.getContext){ |
76 if (canvas.getContext){ |
77 var ctx = canvas.getContext('2d'); |
77 var ctx = canvas.getContext('2d'); |
78 |
78 |
79 ctx.fillStyle = skyColor; |
79 ctx.fillStyle = skyColor; |
80 ctx.fillRect(0, 0, 512, 384); |
80 ctx.fillRect(0, 0, 512, 384); |
81 |
81 |
82 ctx.drawImage(sky, 0, 64, 512, 256); |
82 ctx.drawImage(sky, 0, 64, 512, 256); |
83 |
83 |
84 for (var i = 0; i < 4; i++) |
84 for (var i = 0; i < 4; i++) |
85 ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64); |
85 ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64); |
86 |
86 |
87 ctx.drawImage(horizont, 0, 192, 512, 128); |
87 ctx.drawImage(horizont, 0, 192, 512, 128); |
88 |
88 |
89 ctx.save(); |
89 ctx.save(); |
90 |
90 |
91 ctx.beginPath(); |
91 ctx.beginPath(); |
92 ctx.moveTo(0, 384); |
92 ctx.moveTo(0, 384); |
93 for (var x = 0; x < landArray.length; x++) |
93 for (var x = 0; x < landArray.length; x++) |
94 ctx.lineTo(x, landArray[x]); |
94 ctx.lineTo(x, landArray[x]); |
95 ctx.clip(); |
95 ctx.clip(); |
96 |
96 |
97 for (var i = 0; i < 2; i++) |
97 for (var i = 0; i < 2; i++) |
98 for (var k = 0; k < 2; k++) |
98 for (var k = 0; k < 2; k++) |
99 ctx.drawImage(land, i * 320, k * 240, 320, 240); |
99 ctx.drawImage(land, i * 320, k * 240, 320, 240); |
100 |
100 |
101 ctx.restore(); |
101 ctx.restore(); |
102 |
102 |
103 var k = 0; |
103 var k = 0; |
104 for (var x = 0; x < landArray.length; x++) { |
104 for (var x = 0; x < landArray.length; x++) { |
105 if (++k == 64) |
105 if (++k == 64) |
106 k = 0; |
106 k = 0; |
107 ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8); |
107 ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8); |
108 } |
108 } |
109 |
109 |
110 |
110 |
111 var gradient = ctx.createLinearGradient(0, 320, 0, 384); |
111 var gradient = ctx.createLinearGradient(0, 320, 0, 384); |
112 gradient.addColorStop(0, waterTopColor); |
112 gradient.addColorStop(0, waterTopColor); |
113 gradient.addColorStop(1, waterBottomColor); |
113 gradient.addColorStop(1, waterBottomColor); |
114 ctx.fillStyle = gradient; |
114 ctx.fillStyle = gradient; |
115 ctx.fillRect(0, 320, 512, 384); |
115 ctx.fillRect(0, 320, 512, 384); |
116 |
116 |
117 for (var i = 0; i < 8; i++) |
117 for (var i = 0; i < 8; i++) |
118 ctx.drawImage(water, i * 64, 308, 64, 24); |
118 ctx.drawImage(water, i * 64, 308, 64, 24); |
119 } |
119 } |
120 } |
120 } |
121 </script> |
121 </script> |