【JavaScript＆HTML5講座】トップページへ

3-4 (1) ソースコード

解説ページに戻る

・HTMLファイル　mapEditor.html
01<!DOCTYPE html>
02<html lang="ja">
03<head>
04<meta charset="utf-8">
05<title>開発ツールサンプル</title>
06</head>
07<body>
08<canvas id="bg"></canvas>
09<textarea id="ta" cols="100" rows="5" readOnly="true">ここにマップデータが出力されます</textarea>
10
11<script src="me_data.js"></script>
12<script src="me_program.js"></script>
13
14<br>
15<a href="../../jsh5_034.html">講座に戻る</a>
16</body>
17</html>

・JSファイル1　me_data.js　値の定義
01var CHIP_MAX = 14;
02var CHIP_SIZE = 32;
03
04var FIELD_W = 40;
05var FIELD_H = 30;

・JSファイル2　me_program.js　マップエディタの処理
01//キャンバスの設定
02var winW = window.innerWidth;
03var canvas = document.getElementById("bg");
04var cnt = canvas.getContext("2d");
05var SCALE;
06var CWIDTH  = 640;
07var CHEIGHT = 480;
08winW = toInt(winW*0.96);//キャンバス右端がブラウザのスクロールバーに隠れないように
09canvas.width = winW;
10canvas.height = winW*CHEIGHT/CWIDTH;
11SCALE = winW / CWIDTH;
12cnt.scale( SCALE, SCALE );
13cnt.textAlign = "center";
14cnt.textBaseline = "middle";
15
16//マウスとタップの判定
17var tapX = 0, tapY = 0, tapC = 0;
18
19canvas.addEventListener( "touchstart", touchStart );
20canvas.addEventListener( "touchmove", touchMove );
21canvas.addEventListener( "touchend", touchEnd );
22canvas.addEventListener( "touchcancel", touchCancel );
23function touchStart(event) {
24 event.preventDefault();
25 var rect = event.target.getBoundingClientRect();
26 tapX = event.touches[0].clientX-rect.left;
27 tapY = event.touches[0].clientY-rect.top;
28 transformXY();
29 tapC = 1;
30 setMap();
31}
32function touchMove(event) {
33 event.preventDefault();
34 var rect = event.target.getBoundingClientRect();
35 tapX = event.touches[0].clientX-rect.left;
36 tapY = event.touches[0].clientY-rect.top;
37 transformXY();
38 setMap();
39}
40function touchEnd(event) { tapC = 0; }
41function touchCancel(event) { tapC = 0; }
42
43canvas.addEventListener( "mousedown", mouseDown );
44canvas.addEventListener( "mousemove", mouseMove );
45canvas.addEventListener( "mouseup", mouseUp );
46function mouseDown(event) {
47 var rect = event.target.getBoundingClientRect();
48 tapX = event.clientX-rect.left;
49 tapY = event.clientY-rect.top;
50 transformXY();
51 tapC = 1;
52 setMap();
53}
54function mouseMove(event) {
55 var rect = event.target.getBoundingClientRect();
56 tapX = event.clientX-rect.left;
57 tapY = event.clientY-rect.top;
58 transformXY();
59 setMap();
60}
61function mouseUp(event) { tapC = 0; }
62
63function transformXY() {//実座標→仮想座標への変換
64 tapX = toInt(tapX/SCALE);
65 tapY = toInt(tapY/SCALE);
66}
67
68//キー入力
69var key = 0;
70window.onkeydown = function(event) { key = event.keyCode; }
71window.onkeyup = function(event) { key = 0; }
72
73function toInt( val ) {//整数を返す関数
74 return parseInt(val);
75}
76
77function placeNum( val, pla ) {//数字を指定する桁数にする関数
78 return ("0000000000"+val).slice(-pla);
79}
80
81//画像ファイルの処理
82var img = [], imgPre = [];
83
84function loadImg( n ) {//画像を読み込む
85 imgPre[n] = false;
86 img[n] = new Image();
87 img[n].src = "chip/" + placeNum(n,3) + ".png";
88 img[n].onload = function() { imgPre[n] = true; }
89}
90
91function drawChip( cn, dx, dy ) {//マップチップを表示
92 if( imgPre[0] == true ) cnt.drawImage( img[cn], dx, dy );
93}
94
95function fText( str, x, y, siz, col ) {//文字表示
96 cnt.font = siz + "px monospace";
97 cnt.fillStyle = col;
98 cnt.fillText( str, x, y );
99}
100
101function fRect( x, y, w, h, col ) {//矩形（塗り潰し）
102 cnt.fillStyle = col;
103 cnt.fillRect( x, y, w, h );
104}
105
106function sRect( x, y, w, h, col ) {//矩形（枠）
107 cnt.lineWidth = 2;
108 cnt.strokeStyle = col;
109 cnt.strokeRect( x, y, w, h );
110}
111
112//ボタンを表示（中心座標、幅、高さ）
113function drawBtn( str, x, y, w, h ) {
114 var ret = false;
115 var col = "#24f";
116 if( x-w/2 < tapX && tapX < x+w/2 && y-h/2 < tapY && tapY < y+h/2 ) {
117  col = "#48f";
118  if( tapC > 0 ) { col = "#cff"; ret = true; }//ボタンが押されている
119 }
120 fRect( x-w/2, y-h/2, w, h, col );
121 fText( str, x, y, 24, "white" );
122 return ret;
123}
124
125//定数の宣言
126var FCHIP_W = toInt(480/CHIP_SIZE);//フィールドのチップを横に何個描くか
127var FCHIP_H = toInt(480/CHIP_SIZE);//フィールドのチップを縦に何個描くか
128var SCHIP_N = toInt(160/CHIP_SIZE);//選択用のチップを横に何個描くか
129var WMAP_X = 480+(160-FIELD_W)/2;//全体マップの表示位置
130var WMAP_Y = 420-FIELD_H;
131
132//変数の宣言
133var idx = 0;
134var sel = 0;
135var fTop = 0;
136var fLeft = 0;
137
138//二次元配列の作成
139var map = new Array();
140for( var y = 0; y < FIELD_H; y ++ ) {
141 map[y] = new Array();
142 for( var x = 0; x < FIELD_W; x ++ ) map[y][x] = 0;
143}
144
145function setMap() {//画面をクリック（タップ）した時の処理
146 var c, x, y;
147 if( tapC == 0 ) return;
148 if( tapX < 480 ) {//マップチップを置く
149  x = toInt(tapX/CHIP_SIZE);
150  y = toInt(tapY/CHIP_SIZE);
151  map[fTop+y][fLeft+x] = sel;
152 }
153 else {//マップチップを選ぶ
154  x = toInt((tapX-480)/CHIP_SIZE);
155  y = toInt(tapY/CHIP_SIZE);
156  c = x + y * SCHIP_N;
157  if( c < CHIP_MAX ) sel = c;
158 }
159}
160
161function putMapData() {//データを出力する
162 var x, y;
163 var dat = "";
164 for( y = 0; y < FIELD_H; y ++ ) {
165  for( x = 0; x < FIELD_W; x ++ ) dat = dat + map[y][x] + ",";
166 }
167 document.getElementById("ta").value = dat;
168}
169
170window.onload = mainProc();
171function mainProc() {
172 var i, x, y;
173
174 switch( idx ) {
175  case 0://初期化処理
176  for( i = 0; i < CHIP_MAX; i ++ ) loadImg(i);
177  idx = 1;
178  break;
179
180  case 1:
181  if( key == 65 ) {
182   if( confirm("選択しているチップで画面を埋めます。よろしいですか？") == true ) {
183    for( y = 0; y < FCHIP_H; y ++ ) {
184     for( x = 0; x < FCHIP_W; x ++ ) map[fTop+y][fLeft+x] = sel;
185    }
186   }
187   key = 0;
188  }
189  if( key == 38 ) { if( fTop > 0 ) fTop --; }
190  if( key == 40 ) { if( fTop < FIELD_H-FCHIP_H ) fTop ++; }
191  if( key == 37 ) { if( fLeft > 0 ) fLeft --; }
192  if( key == 39 ) { if( fLeft < FIELD_W-FCHIP_W ) fLeft ++; }
193
194  //フィールドのマップチップを描く
195  for( y = 0; y < FCHIP_H; y ++ ) {
196   for( x = 0; x < FCHIP_W; x ++ ) drawChip( map[fTop+y][fLeft+x], x*CHIP_SIZE, y*CHIP_SIZE );
197  }
198
199  //選択用のチップを描く
200  fRect( 480, 0, 160, 480, "black" );
201  x = 0;
202  y = 0;
203  for( i = 0; i < CHIP_MAX; i ++ ) {
204   var cx = x*CHIP_SIZE + 480;
205   var cy = y*CHIP_SIZE;
206   drawChip( i, cx, cy );
207   if( i == sel ) sRect( cx+1, cy+1, CHIP_SIZE-2, CHIP_SIZE-2, "red" );//選択しているチップ
208   x ++;
209   if( x == SCHIP_N ) { x = 0; y ++; }
210  }
211
212  //全体マップ
213  fRect( WMAP_X, WMAP_Y, FIELD_W, FIELD_H, "#888" );
214  sRect( WMAP_X+fLeft, WMAP_Y+fTop, FCHIP_W, FCHIP_H, "#8ff" );
215  fText( "X="+fLeft+" Y="+fTop, 560, WMAP_Y-20, 20, "#fff" );
216
217  if( drawBtn( "出力", 560, 455, 150, 40 ) == true ) {
218    putMapData();
219    tapC = 0;
220  }
221  break;
222 }
223
224 setTimeout( mainProc, 80 );
225}

解説ページに戻る
お気軽にお問い合わせ下さい →