質問編集履歴
2
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
制作環境はwin11, Google Chrome, vs-codeです。
|
|
1
2
|
スペースを押しても行が変わりません。script.jsの２２行目で参照元では、
|
|
2
3
|
```const key_code = event.keyCode;```となってますがeventが使えずKeyboardEventとしました。それでですかね？どこか間違ったんでしょうか？
|
|
3
4
|
|
|
5
|
+
|
|
6
|
+
|
|
4
7
|
[参照元](https://original-game.com/javascript-change-strings-by-by-key-input/)
|
|
5
8
|
|
|
6
9
|
```HTML
|
1
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
</body>
|
|
19
19
|
</html>
|
|
20
20
|
```
|
|
21
|
+
|
|
21
22
|
```game.js
|
|
22
23
|
'use strict';
|
|
23
24
|
|
|
@@ -135,125 +136,9 @@
|
|
|
135
136
|
}
|
|
136
137
|
}
|
|
137
138
|
```
|
|
139
|
+
|
|
138
140
|
```script.js
|
|
139
|
-
'use strict';
|
|
140
141
|
|
|
141
|
-
class Game {
|
|
142
|
-
constructor(width, height) {
|
|
143
|
-
this.objs = [];
|
|
144
|
-
|
|
145
|
-
this.frame = 0;
|
|
146
|
-
|
|
147
|
-
// もしもwidthやheight何も代入されていなければ、320を代入する
|
|
148
|
-
this.width = width || 320;
|
|
149
|
-
this.height = height || 320;
|
|
150
|
-
|
|
151
|
-
this.canvas = document.querySelector('#canvas');
|
|
152
|
-
|
|
153
|
-
canvas.width = this.width;
|
|
154
|
-
canvas.height = this.height;
|
|
155
|
-
|
|
156
|
-
this.ctx = canvas.getContext('2d');
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
// start()を呼び出すことで、メインループが開始される
|
|
160
|
-
start() {
|
|
161
|
-
this._main();
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
// メインループ
|
|
165
|
-
_main() {
|
|
166
|
-
this.ctx.fillStyle = '#000';
|
|
167
|
-
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
168
|
-
|
|
169
|
-
// ゲームに登場するものの数だけ繰り返す
|
|
170
|
-
for (let i = 0; i < this.objs.length; i++) {
|
|
171
|
-
// ゲームに登場するもののクラスから、render()を呼び出す
|
|
172
|
-
this.objs[i].render(this.ctx, this.frame);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
this.frame++;
|
|
176
|
-
console.log(this.frame);
|
|
177
|
-
|
|
178
|
-
// _main()を呼び出す（ループさせる）
|
|
179
|
-
requestAnimationFrame(this._main.bind(this));
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
// ゲームにテキストなどを表示するための関数
|
|
183
|
-
add(obj, x, y) {
|
|
184
|
-
obj.x = x || 0;
|
|
185
|
-
obj.y = y || 0;
|
|
186
|
-
this.objs.push(obj);
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
class Label {
|
|
191
|
-
// Labelの初期設定
|
|
192
|
-
constructor(label) {
|
|
193
|
-
// 表示している場所の行数
|
|
194
|
-
this._visibleLine = 0;
|
|
195
|
-
this._text = [];
|
|
196
|
-
// 表示している文字列の長さ
|
|
197
|
-
this._displayLength = 0;
|
|
198
|
-
// 表示する行の数
|
|
199
|
-
this._line = 0;
|
|
200
|
-
this.label = label;
|
|
201
|
-
this.font = "20px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";
|
|
202
|
-
this.color = '#fff';
|
|
203
|
-
this.maxLength = 30;
|
|
204
|
-
this.baseline = 'top';
|
|
205
|
-
this.interval = 0;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
// 次の行への切り替え機能
|
|
209
|
-
next() {
|
|
210
|
-
this._visibleLine++;
|
|
211
|
-
this._text = [];
|
|
212
|
-
this._displayLength = 0;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
// Labelを表示するための関数（メインループから呼び出される）
|
|
216
|
-
render(ctx, frame) {
|
|
217
|
-
ctx.fillStyle = this.color;
|
|
218
|
-
ctx.font = this.font;
|
|
219
|
-
ctx.textBaseline = this.baseline;
|
|
220
|
-
|
|
221
|
-
// インターバルが0の場合は、文字を一気に表示
|
|
222
|
-
if (this.interval === 0) {
|
|
223
|
-
// 表示する文字数を、１行に表示する最大の文字数で割り、切り上げることで、文字列が何行になるのかが分かる
|
|
224
|
-
this._line = Math.ceil(this.label[this._visibleLine].length / this.maxLength);
|
|
225
|
-
// 文字列の行数だけ繰り返す
|
|
226
|
-
for (let i = 0; i < this._line; i++) {
|
|
227
|
-
this._text[i] = this._text[i] || '';
|
|
228
|
-
//「substr()」は、任意の文字列の中から指定した文字列を抽出して切り出すことが出来るメソッド
|
|
229
|
-
// str.substr( 開始位置, 文字数 )
|
|
230
|
-
this._text[i] = this.label[this._visibleLine].substr(i * this.maxLength, this.maxLength);
|
|
231
|
-
|
|
232
|
-
// 文字列の表示
|
|
233
|
-
ctx.fillText(this._text[i], this.x, this.y + (i * 25));
|
|
234
|
-
}
|
|
235
|
-
// インターバルが0以外の場合、一文字ずつ表示していく
|
|
236
|
-
} else {
|
|
237
|
-
if (this._displayLength < this.label[this._visibleLine].length && frame % this.interval === 0) {
|
|
238
|
-
this._text[this._line] = this._text[this._line] || '';
|
|
239
|
-
// this.labelに代入されている文字列を、this._text[this._line]に一文字ずつ入れていく
|
|
240
|
-
// this._text[this._line] += this.label.charAt(this._displayLength);
|
|
241
|
-
this._text[this._line] += [...this.label[this._visibleLine]][this._displayLength];
|
|
242
|
-
this._displayLength++;
|
|
243
|
-
if (this._displayLength % this.maxLength === 0) {
|
|
244
|
-
this._line++;
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
for (let i = 0; i < this._line + 1; i++) {
|
|
248
|
-
this._text[i] = this._text[i] || '';
|
|
249
|
-
ctx.fillText(this._text[i], this.x, this.y + (i * 25));
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
```script
|
|
257
142
|
'use strict';
|
|
258
143
|
|
|
259
144
|
const str = [
|