一般的な開発ツールは、作ったデータをパソコンに保存し、読み込むことができます。 JavaScriptはローカル(パソコン)上のファイルの読み込みには対応していますが、 2018年現在、ローカルにファイルを保存する処理に正式には対応していません。 (色々なテクニックを使いローカルに保存する方法はあり、それらを解説するサイトもあります) 本講座はソースコードを複雑にしないよう、マップデータをテキストエリアに出力し、コピペで利用するようにしました。 マップデータの利用の仕方は下の(2)をご覧下さい。
定数名 | 用途 |
---|---|
CHIP_MAX | マップチップを何種類読み込むか |
CHIP_SIZE | マップチップの画像サイズ(ドット数) |
FIELD_W | マップは横に何マスあるか |
FIELD_H | マップは縦に何マスあるか |
※JavaScriptで複数の画像を扱う場合は 1-8 で説明しましたように、 画像をできるだけ1枚のファイルにまとめ、切り出し表示する方法が安全ですが、 本項ではシンプルで判りやすいソースコードを提供する意味で、画像をまとめていません。
function placeNum( val, pla ) {
return ("0000000000"+val).slice(-pla);
}
01 | <!DOCTYPE html> |
---|---|
02 | <html lang="ja"> |
03 | <head> |
04 | <meta charset="utf-8"> |
05 | <title>キャラクターの移動</title> |
06 | </head> |
07 | <body style="text-align:center; background-color:black;"> |
08 | <canvas id="bg"></canvas> |
09 | |
10 | <script src="me_data.js"></script> |
11 | <script src="me_worldmap.js"></script> |
12 | |
13 | <script> |
14 | |
15 | //キャンバスの設定 |
16 | var winW = window.innerWidth; |
17 | var winH = window.innerHeight; |
18 | var canvas = document.getElementById("bg"); |
19 | var cnt = canvas.getContext("2d"); |
20 | var SCALE; |
21 | var CWIDTH = 480; |
22 | var CHEIGHT = 480; |
23 | if( winH < winW*CHEIGHT/CWIDTH ) |
24 | winW = toInt(winH*CWIDTH/CHEIGHT); |
25 | else |
26 | winH = toInt(CHEIGHT*winW/CWIDTH); |
27 | canvas.width = winW; |
28 | canvas.height = winH; |
29 | SCALE = winW / CWIDTH; |
30 | cnt.scale( SCALE, SCALE ); |
31 | cnt.textAlign = "center"; |
32 | cnt.textBaseline = "middle"; |
33 | |
34 | //キー入力 |
35 | var key = 0; |
36 | window.onkeydown = function(event) { key = event.keyCode; } |
37 | window.onkeyup = function(event) { key = 0; } |
38 | |
39 | function toInt( val ) {//整数を返す関数 |
40 | return parseInt(val); |
41 | } |
42 | |
43 | function placeNum( val, pla ) {//数字を指定する桁数にする関数 |
44 | return ("0000000000"+val).slice(-pla); |
45 | } |
46 | |
47 | //画像ファイルの処理 |
48 | var img = [], imgPre = []; |
49 | |
50 | function loadImg( n ) {//画像を読み込む |
51 | imgPre[n] = false; |
52 | img[n] = new Image(); |
53 | img[n].src = "chip/" + placeNum(n,3) + ".png"; |
54 | img[n].onload = function() { imgPre[n] = true; } |
55 | } |
56 | |
57 | function drawChip( cn, dx, dy ) {//マップチップを表示 |
58 | if( imgPre[cn] == true ) cnt.drawImage( img[cn], dx, dy ); |
59 | } |
60 | |
61 | function drawChr( cn, dx, dy, dir ) {//キャラクターを表示 |
62 | if( imgPre[cn] == true ) { |
63 | var sx = 32*(toInt(tmr/4)%2); |
64 | var sy = 48*dir; |
65 | cnt.drawImage( img[cn], sx, sy, 32, 48, dx, dy, 32, 48 ); |
66 | } |
67 | } |
68 | |
69 | //変数の宣言 |
70 | var idx = 0, tmr = 0; |
71 | var plX = 7, plY = 7, plD = 0; |
72 | |
73 | function getChip( x, y ) {//マップチップの値を返す |
74 | if( x < 0 || x >= FIELD_W || y < 0 || y >= FIELD_H ) return 4; |
75 | return MAPDAT[x+y*FIELD_W]; |
76 | } |
77 | |
78 | window.onload = mainProc(); |
79 | function mainProc() { |
80 | var i, x, y; |
81 | tmr ++; |
82 | |
83 | switch( idx ) { |
84 | case 0://初期化処理 |
85 | for( i = 0; i < CHIP_MAX+1; i ++ ) loadImg(i); |
86 | idx = 1; |
87 | break; |
88 | |
89 | case 1: |
90 | //キャラクターの移動 |
91 | if( key == 38 ) { plD = 0; if( getChip(plX,plY-1) <= 3 ) plY --; } |
92 | if( key == 40 ) { plD = 1; if( getChip(plX,plY+1) <= 3 ) plY ++; } |
93 | if( key == 37 ) { plD = 2; if( getChip(plX-1,plY) <= 3 ) plX --; } |
94 | if( key == 39 ) { plD = 3; if( getChip(plX+1,plY) <= 3 ) plX ++; } |
95 | //フィールドを描く |
96 | for( y = 0; y < 15; y ++ ) { |
97 | for( x = 0; x < 15; x ++ ) drawChip( getChip(plX+x-7,plY+y-7), x*CHIP_SIZE, y*CHIP_SIZE ); |
98 | } |
99 | drawChr( CHIP_MAX, 7*CHIP_SIZE, 7*CHIP_SIZE-16, plD );//勇者の表示 |
100 | break; |
101 | } |
102 | |
103 | setTimeout( mainProc, 120 ); |
104 | } |
105 | |
106 | </script> |
107 | <br> |
108 | <a href="../../jsh5_034.html">講座に戻る</a> |
109 | </body> |
110 | </html> |
function getChip( x, y ) {
if( x < 0 || x >= FIELD_W || y < 0 || y >= FIELD_H ) return 4;
return MAPDAT[x+y*FIELD_W];
}