/home/web6047/www/cgi-bin/prj/20180602-RPG／マップ/canvas.html

このファイル: /home/web6047/www/cgi-bin/prj/20180602-RPG／マップ/canvas.html

1 <html>
2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <title>RPG Map Scroll Sample.</title>
5 <script>
6
7 console.log( "=============== script ==============" );

8 function $( id ) { return document.getElementById( id ); }

9 var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
10 // usage: var txt = ( function() { /*multiTXT*/ } ).toString().match( HereDocument )[ 1 ];
11

12 function MAPDATA() {
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 var mapdataTXT = MAPDATA.toString().match( HereDocument )[ 1 ];
47

48 function Map() {
49 this.name = "map";
50 this.chips = new Object();
51 this.x = 0;
52 this.y = 0;
53 this.width = 0;
54 this.height = 0;
55 this.scrollX = 0;
56 this.scrollY = 0;
57 this.vWidth = 19;
58 this.vHeight = 17;
59 this.centerVX = Math.floor( this.vWidth / 2 );
60 this.centerVY = Math.floor( this.vHeight / 2 );
61 console.log( this.centerVX, this.centerVY );
62 }

63 Map.prototype.setData = function( text ) {
64 text = text.replace( /\r/, "" ); //IEとEdgeでこの行が必要
65 this.data = text.split( /\n/ );
66 this.width = this.data[ 0 ].length;
67 this.height = this.data.length;
68 };

69 Map.prototype.addChip = function( name, path ) {
70 this.chips[ name ] = {
71 name : name,
72 path : path,
73 image : new Image(),
74 };
75 };

76 Map.prototype.doLoadChips = function( callback ) {
77 this.onloadCNT = 0;
78 this.onloadMAX = Object.keys( this.chips ).length;
79 var caller = this;
80
81 for( var name in this.chips ) {
82 this.chips[ name ].image.onload = function( e ) {
83 if( ++caller.onloadCNT == caller.onloadMAX ) callback(); //caller is map.
84 };
85 this.chips[ name ].image.src = this.chips[ name ].path;
86 }
87 };

88 Map.prototype.loopXY = function( x, y ) {
89 x %= this.width;
90 y %= this.height;
91 //check.
92 if( x < 0 ) x = this.width + x;
93 if( y < 0 ) y = this.height + y;
94 return { x:x, y:y };
95 };

96 Map.prototype.getMapChipXY = function( x, y ) {
97 var looped = this.loopXY( x, y );
98 if( looped.x ==-1 ) {
99 alert( looped.x );
100 }
101 return this.chips[ this.data[ looped.y ].substr( looped.x, 1 ) ];
102 };

103 Map.prototype.getMapChipCenter = function() {
104 return this.chips[ this.data[ this.y ].substr( this.x, 1 ) ];
105 };

106 Map.prototype.run = function() {
107 if( ! this.scrollFLG ) return false;
108
109 this.scrollX += this.scrollXDirection;
110 this.scrollY += this.scrollYDirection;
111 //check. 16ドット増やし終わったか
112 if( --this.scrollCNT == 0 ) {
113 this.scrollFLG = false;
114 this.scrollX = 0;
115 this.scrollY = 0;
116 this.x -= this.scrollXDirection; //マップの座標を１増やす
117 this.y -= this.scrollYDirection; //（方向の考え方が逆だから符号は逆）
118 var looped = this.loopXY( this.x, this.y );
119 this.x = looped.x;
120 this.y = looped.y;
121 }
122 return true;
123 };

124 Map.prototype.draw = function( canvas ) {
125 for( var y = 0; y < this.vHeight; y++ ) {
126 for( var x = 0; x < this.vWidth; x++ ) {
127 var mapchip = this.getMapChipXY( this.x + x - this.centerVX, this.y + y - this.centerVY );
128 canvas.drawImage( mapchip.image, x * 16 + this.scrollX, y * 16 + this.scrollY );
129 }
130 }
131 };

132 Map.prototype.scroll = function( direction ) {
133 this.scrollCNT = 16;
134
135 this.scrollXDirection = ( direction == 2 ) - ( direction == 0 );
136 this.scrollYDirection = ( direction == 3 ) - ( direction == 1 );
137 /*
138 ( direction == 2 ) - ( direction == 0 )
139 この式が何を意味するかは私も中学生くらいの時に自分で考えてガッテンしました。
140 確かMSX Fanという雑誌の投稿プログラムでさりげなく使われていたものです。
141 真は1で、偽は-1と同等です。
142 */
143 this.scrollFLG = true;
144 };

145
146
147 var canvasEL, canvas;
148 var map;
149

150 function onloadx() {
151 map = new Map();
152 map.setData( mapdataTXT );
153 map.addChip( "草", "sougen.png" );
154 map.addChip( "水", "umi.png" );
155 map.addChip( "土", "tuchi.png" );
156 map.doLoadChips( onloadx2 );
157 map.x = 20;
158 map.y = 11;
159 }

160

161 function onloadx2() {
162
163 canvasEL = $( "canvasELID" );
164 canvas = canvasEL.getContext( '2d' );
165 canvas.font = "bold 20px 'ＭＳＰゴシック'";
166
167
168 draw();
169 sysclock = 10;
170 keys = new Array();
171 timerID = setInterval( run, sysclock );
172 onkeydown = onkeydownx;
173 onkeyup = onkeyupx;
174 }

175 function onkeydownx( e ) {
176 if( keys.indexOf( e.which ) == -1 ) keys.push( e.which );
177 }

178 function onkeyupx( e ) {
179 keys.splice( keys.indexOf( e.which ), 1 );
180 }

181 function run() {
182 var drawFLG = false;
183
184 //押されたキーの処理
185 for( var i = 0; i < keys.length; i++ ) {
186 var key = keys[ i ];
187 keymap( key );
188 drawFLG = true;
189 }
190
191 if( map.run() ) drawFLG = true;
192 if( drawFLG ) draw();
193 }

194 function keymap( key ) {
195 if( ! map.scrollFLG ) {
196 switch( key ) {
197 case 37: map.scroll( 2 ); break;
198 case 38: map.scroll( 3 ); break;
199 case 39: map.scroll( 0 ); break;
200 case 40: map.scroll( 1 ); break;
201
202 default:
203 console.log( key );
204 }
205 }
206 }

207 function draw() {
208 map.draw( canvas );
209
210 if( map.getMapChipCenter().name == "水" ) {
211 //船
212 canvas.save();
213 canvas.translate( map.centerVX * 16 + 6, map.centerVY * 16 + 6 );
214 canvas.scale( 0.4,0.4 );
215 canvas.beginPath();
216 canvas.moveTo( 7,7 );
217 canvas.lineTo( 4,7 );
218 canvas.arc( 10, -1, 16, 2.61, 3.66, false );
219 canvas.lineTo( 7,-9 );
220 canvas.lineTo( 7,-13 );
221 canvas.lineTo( 10,-13 );
222 canvas.lineTo( 10,-9 );
223 canvas.arc( 35, -1, 16, 3.66, 2.61, true );
224 canvas.lineTo( 10,7 );
225 canvas.lineTo( 10,10 );
226 canvas.lineTo( 25,10 );
227 canvas.lineTo( 25,20 );
228 canvas.lineTo( -7,20 );
229 canvas.arc( -4, 9, 10, 1.8, 3, false );
230 canvas.lineTo( 7,10 );
231 canvas.closePath();
232 canvas.fillStyle = "white";
233 canvas.fill();
234 canvas.restore();
235 } else {
236 //上陸
237 canvas.beginPath();
238 canvas.arc( map.centerVX * 16 + 8, map.centerVY * 16 + 8, 8, 0, 6.28, false );
239 canvas.closePath();
240 canvas.strokeStyle = "red";
241 canvas.stroke();
242 }
243
244 canvas.fillText( map.x + ", " + map.y, 5, 20 );
245 canvas.fillText( checkarea( map.x, map.y ), 5, 40 );
246 }

247 var countries = {
248 "Greenland" : [
249 [41,1,44,3],
250 [0,1,1,3],
251 ],
252 "Canada" : [
253 [34,1,43,7],
254 ],
255 "North America" : [
256 [31,3,43,11],
257 ],
258 "South America" : [
259 [39,12,44,21],
260 ],
261 "Madagascar" : [
262 [8,16,8,16],
263 ],
264 "Africa" : [
265 [1,10,6,18],
266 [7,11,8,18],
267 ],
268 "United Kingdom" : [
269 [1,4,1,5],
270 ],
271 "Norway" : [
272 [3,5,3,5],
273 [4,4,4,4],
274 [5,3,6,3],
275 ],
276 "Russia" : [
277 [7,2,22,6],
278 [23,4,29,8],
279 [20,7,22,7],
280 ],
281 "Japan" : [
282 [18,10,20,12],
283 [21,9,21,9],
284 ],
285 "Mongolia" : [
286 [16,7,17,7],
287 ],
288 "North Korea, South Korea" : [
289 [17,10,17,10],
290 ],
291 "China" : [
292 [13,7,15,9],
293 [14,8,17,10],
294 [18,7,19,9],
295 [16,11,16,11],
296 ],
297 "Central Asia" : [
298 [7,7,12,10],
299 ],
300 "Soudi Arabia" : [
301 [9,11,10,12],
302 ],
303 "India" : [
304 [12,11,14,12],
305 [13,10,13,10],
306 ],
307 "Thailand" : [
308 [16,12,16,13],
309 ],
310 "Malaysia" : [
311 [15,14,17,15],
312 ],
313 "Indonesia" : [
314 [17,15,21,16],
315 ],
316 "Australia" : [
317 [18,17,23,20],
318 ],
319 "Papua New Guinea" : [
320 [22,15,23,16],
321 ],
322 "New Zealand" : [
323 [25,21,26,22],
324 ],
325 "EU" : [
326 [1,6,6,9],
327 [4,4,6,5],
328 ],
329 "Antarctic" : [
330 [13,26,24,29],
331 ],
332 };

333 function checkarea( x, y ) {
334 if( map.getMapChipCenter().name == "水" ) return "";
335
336 for( var name in countries ) {
337 var country = countries[ name ];
338 for( var i = 0; i < country.length; i++ ) {
339 var area = country[ i ];
340 if( x >= area[ 0 ] && y >= area[ 1 ] && x <= area[ 2 ] && y <= area[ 3 ] ) {
341 return name;
342 }
343 }
344 }
345 return "other";
346 }

347 </script>
348 <style>
349 </style>
350 </head>
351 <body onload="onloadx()" style="
352 text-align : center;
353 ">
354 <canvas id="canvasELID" width="304" height="272" style="
355 object-fit : contain;
356 image-rendering : crisp-edges;
357 width : 100%;
358 height : 95%;
359 ">There is no canvas.</canvas>
360 Use keyboard.（←→、↑↓）
361 </body>
362 </html>