canvasを読み込めません。

初めてゲームを作っています。

JavaSprictで迷路ゲームを作っています

canvasを使いたいのですがうまく行きません。マップ表示とasiという画像を動かしたいのですがどちらも表示されません。こちらのサイトで勉強させていただいています。canvasを使う前は、asi画像だけ表示され、動いていました。

https://original-game.com/introduction-to-javascript-how-to-use-html5-and-canvas/
https://original-game.com/introduction-to-javascript-character-move-on-map/

発生している問題・エラーメッセージ

該当のソースコード

HTML5
1<!doctype html ><html lang="ja"><meta charset="utf-8" />
2	
3
4<head>
5
6<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
7
8	<title>キャラクターの表示</title>
9		  
10			 		
11
12    
13    </head>
14    <body>
15    
16    <canvas id="canvas"width="640" height="640"></canvas>>
17   <script type="text/javascript" src="js/無題_1.js"></script>
18
19        
20        
21        
22    </body>
23    </html>
24
25
26
27
28
29```
30``````JavaSprict
31
32<?--
33var canvas = document.getElementById( 'canvas' );
34canvas.width = 640;	//canvasの横幅（よこはば）
35canvas.height = 640;	//canvasの縦幅（たてはば）
36 
37//コンテキストを取得（しゅとく）
38
39var ctx = canvas.getContext( '2d' );
40
41ctx.fillRect(0,0,30,30);
42
43//asiオブジェクト作成
44var asi = new Object();
45asi.img = new Image();
46asi.img.src = 'img/asi.png';
47asi.x = 0;
48asi.y = 0;
49asi.move = 0;
50
51//マップチップのImageオブジェクトを作る
52var mapchip = new Image();
53mapchip.src = 'img/map.jpg';
54
55//キーボードのオブジェクトを作成
56	var key = new Object();
57	key.up = false;
58	key.down = false;
59	key.right = false;
60	key.left = false;
61	key.push = '';
62	
63//マップの作成（さくせい）
64var map = [
65	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
66	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
67	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
68	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
69	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
70	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
71	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
72	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
73	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
74	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
75	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
76	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
77	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
78	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
79	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
80	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
81	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
82	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
83	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
84	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
85]
86 
87//メインループ
88 function main(){
89	 ctx.fillStyle = "rgb(0,0,0)";
90	 ctx.fillRect(0,0,640,640);
91
92
93	 addEventListener('load',function(){
94	for (var y=0; y<map.length; y++) {
95		for (var x=0; x<map[y].length; x++) {
96			if ( map[y][x] === 0 )ctx.drawImage( mapchip, 0, 0, 32, 32, 32*x, 32*y, 32, 32 );
97			 if ( map[y][x] === 1 )ctx.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 ); 
98		}
99
100 } 
101	 },false);
102  //画像を表示 
103 ctx.drawImage( asi.img, asi.x, asi.y ); 
104
105 addEventListener("keydown", keydownfunc, false);
106  addEventListener("keyup", keyupfunc, false); 
107
108//方向キーが押されている場合（ばあい）は、asiが移動する
109 if ( asi.move === 0 ) {
110		 if ( key.left === true ) {
111				var x = asi.x/32;
112				var y = asi.y/32;
113				x--;
114				if ( map[y][x] === 0 ) {
115						rico.move = 32;
116						key.push = 'left';
117					}
118				}
119						
120		 if ( key.up === true ) { 
121				var x = asi.x/32;
122				var y = asi.y/32;
123				if ( y > 0) {
124					y--;
125					if ( map[y][x] === 0 ) {
126						asi.move = 32;
127						key.push = 'up';
128					}
129				}
130			}
131					if ( key.right === true ) { 
132						var x = asi.x/32;
133						var y = asi.y/32;
134						x++;
135						if ( map[y][x] === 0 ) {
136							asi.move = 32;
137							key.push = 'right';
138						}
139					}
140			   if ( key.down === true ) {
141				var x = asi.x/32;
142				var y = asi.y/32;
143				if ( y < 19 ) {
144					y++;
145					if ( map[y][x] === 0 ) {
146						asi.move = 32;
147						key.push = 'down';
148					}
149				}
150			}
151		}
152	 
153	 //asi.moveが0より大きい場合は、4pxずつ移動（いどう）を続ける
154	 if (asi.move > 0) {
155		asi.move -= 4;
156		if ( key.push === 'left' ) asi.x -= 4;
157		if ( key.push === 'up' ) asi.y -= 4;
158		if ( key.push === 'right' ) asi.x += 4;
159		if ( key.push === 'down' ) asi.y += 4;
160	}
161 
162	requestAnimationFrame( main );
163}
164//ページと依存（いぞん）している全てのデータが読み込まれたら、メインループ開始
165addEventListener('load', main(), false);
166 
167//キーボードが押されたときに呼び出される関数（かんすう）
168function keydownfunc( event ) {
169	var key_code = event.keyCode;
170	if( key_code === 37 ) key.left = true;
171	if( key_code === 38 ) key.up = true;
172	if( key_code === 39 ) key.right = true;
173	if( key_code === 40 ) key.down = true;
174	event.preventDefault();//方向キーでブラウザがスクロールしないようにする
175}
176 
177//キーボードが放（はな）されたときに呼び出される関数
178function keyupfunc( event ) {
179	var key_code = event.keyCode;
180	if( key_code === 37 ) key.left = false;
181	if( key_code === 38 ) key.up = false;
182	if( key_code === 39 ) key.right = false;
183	if( key_code === 40 ) key.down = false;
184}
185
186
187```
188
189### 補足情報（FW/ツールのバージョンなど）
190
191JavaScript
192Visual Studio Code(バージョン 1.42.0)
193fire fox(バージョン 73.0.1 (64-bit))

m.ts10806

2020/03/03 09:02

JavaScriptのコードがマークダウン対応されていませんのでHTMLと同じようにご対応ください

oikashinoa

2020/03/03 09:49

質問と直接関係ないですが、Visual Studio Codeのバージョンって正しいです？ 1.42.0が最新なんですが。

ayu.id

2020/03/03 11:17

すみませんコピー&ペーストが消えてませんでした。ダウンロードしたばかりでバージョンの更新が必要なく、見方がわかっていませんでした。教えていただきありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

canvasを読み込めません。

Canvasが表示されないのでしょうか？
「canvas に表示する画像を読み込めない」の間違いでしょうか？

どちらか分からないため、２つに回答

確認がVSCodeだけであれば、背景色と同色で判別できないだけで、ブラウザでは 640x640[px] の四角形が確認できるはずです。
前の学習内容にもどって、ディレクトリ構成を確認しましょう。

（次のように画像要素 <img> を書き入れて正しいかどうか確認できます。）

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6  <title>キャラクターの表示</title>
7</head>
8<body>
9  <canvas id="canvas"width="640" height="640"></canvas>
10
11  <!-- 画像PATHが間違っていないかを確認。あとで消す -->
12  <img src="img/asi.png">
13  <img src="img/map.jpg">
14
15
16  <script src="js/script.js"></script>
17</body>
18</html>

なお、ご質問のHTMLは、正しくマークアップできていません。
また、javascript のファイル名は、半角英数字で保存する癖をつけましょう

head タグの前に meta タグが書かれている。
canvas タグを閉じたあとに、> がある。
最初は、学習の進み具合で script01_01.js のようにするなど。

日本語をURLで使うときには、パーセントエンコーディングという符号化が行われます（仕様：決まりごと）。
無題だと %E7%84%A1%E9%A1%8C になります（script.js の方が読みやすいはずです）。
― これが原因で javascript ファイルを読み込めていないのかもしれません。（追記）

hwatarig さんの回答も参考にしてください。
（キーボード操作すると、エラーになるはずです）

投稿2020/03/04 03:40

編集2020/03/04 03:55