回答編集履歴
3
訂正
answer
CHANGED
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|
|
78
78
|
// 黒色で完全に塗りつぶす
|
|
79
79
|
ctx.fillStyle = "rgb( 0, 0, 0 )";
|
|
80
|
-
ctx.fillRect(0, 0, CHIP_WIDTH*
|
|
80
|
+
ctx.fillRect(0, 0, CHIP_WIDTH*32, CHIP_HEIGHT*32);
|
|
81
81
|
|
|
82
82
|
// (3,0)-(8,8) の範囲のマップデータを抽出する
|
|
83
83
|
sub = getSubMap( 3, 0, MAP_WIDTH, MAP_HEIGHT );
|
2
追記
answer
CHANGED
|
File without changes
|
1
追記
answer
CHANGED
|
@@ -40,4 +40,60 @@
|
|
|
40
40
|
[0, 0, 0]
|
|
41
41
|
]
|
|
42
42
|
*/
|
|
43
|
-
```
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
追記）
|
|
46
|
+
|
|
47
|
+
> getSubMap()をどう活用していいのかがいまいちわかっておりません
|
|
48
|
+
|
|
49
|
+
ご質問のコードでは、**計算済みの値をハードコード**していますが、
|
|
50
|
+
変化しうる値は、変数やオブジェクトにするなどしてコンピュータに計算させます。
|
|
51
|
+
（単純計算はコンピュータの得意とするところです）。
|
|
52
|
+
|
|
53
|
+
ご質問の ``main()`` 関数をいじってみました。
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
var CHIP_WIDTH = 32;
|
|
57
|
+
var CHIP_HEIGHT = 32;
|
|
58
|
+
var IMG_CACHE = {}; // Image
|
|
59
|
+
|
|
60
|
+
var MAP_WIDTH = 8; // 928; = 32 * 29 だが、ここでは 8
|
|
61
|
+
var MAP_HEIGHT= 8; // 448 = 32 * 14 だが、ここでは 8
|
|
62
|
+
|
|
63
|
+
function main() {
|
|
64
|
+
var canvas = document.getElementById('canvas');
|
|
65
|
+
canvas.width = CHIP_WIDTH * MAP_WIDTH;
|
|
66
|
+
canvas.height = CHIP_HEIGHT * MAP_HEIGHT;
|
|
67
|
+
|
|
68
|
+
var ctx = canvas.getContext('2d');
|
|
69
|
+
// canvas の width, height を受け付いだサイズ
|
|
70
|
+
|
|
71
|
+
//var ground = IMG_CACHE["ground"];
|
|
72
|
+
//ground.src = 'img/yuka1.png';
|
|
73
|
+
if( ! "ground" in IMG_CACHE ) {
|
|
74
|
+
IMG_CACHE["ground"] = new Image();
|
|
75
|
+
IMG_CACHE["ground"].src = 'img/yuka1.png'; // サーバー問い合わせが起こる
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// 黒色で完全に塗りつぶす
|
|
79
|
+
ctx.fillStyle = "rgb( 0, 0, 0 )";
|
|
80
|
+
ctx.fillRect(0, 0, CHIP_WIDTH*8, CHIP_HEIGHT*8);
|
|
81
|
+
|
|
82
|
+
// (3,0)-(8,8) の範囲のマップデータを抽出する
|
|
83
|
+
sub = getSubMap( 3, 0, MAP_WIDTH, MAP_HEIGHT );
|
|
84
|
+
|
|
85
|
+
for (var y=0; y<sub.length; y++) {
|
|
86
|
+
for (var x=0; x<sub[y].length; x++) {
|
|
87
|
+
if (sub[y][x] === 0)
|
|
88
|
+
ctx.drawImage(IMG_CACHE["ground"],
|
|
89
|
+
0, 0,CHIP_WIDTH, CHIP_HEIGHT,
|
|
90
|
+
CHIP_WIDTH*x,CHIP_HEIGHT*y,CHIP_WIDTH,CHIP_HEIGHT);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
window.requestAnimationFrame( main );
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
``map`` はグローバルに宣言されていますので、 ``sub`` という変数で抽出したMAPデータを扱い、既にできていた２重の for ループのコードは、抽出したMAPの範囲で描画します。
|
|
99
|
+
他にも、グローバルに宣言した変数を増やしています。
|