Q&A
「eventが使えず」の状況をもう少し丁寧に説明ください。
制作環境はwin11, Google Chrome, vs-codeです。
スペースを押しても行が変わりません。script.jsの２２行目で参照元では、
const key_code = event.keyCode;となってますがeventが使えずKeyboardEventとしました。それでですかね？どこか間違ったんでしょうか？
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"> 6 <title>text</title> 7</head> 8<body> 9 <canvas id="canvas"></canvas> 10 <script type="text/javascript" src="js/game.js"></script> 11 <script type="text/javascript" src="js/script.js"></script> 12</body> 13</html>
game.js
1'use strict'; 2 3class Game { 4 constructor(width, height) { 5 this.objs = []; 6 7 this.frame = 0; 8 9 // もしもwidthやheight何も代入されていなければ、320を代入する 10 this.width = width || 320; 11 this.height = height || 320; 12 13 this.canvas = document.querySelector('#canvas'); 14 15 canvas.width = this.width; 16 canvas.height = this.height; 17 18 this.ctx = canvas.getContext('2d'); 19 } 20 21 // start()を呼び出すことで、メインループが開始される 22 start() { 23 this._main(); 24 } 25 26 // メインループ 27 _main() { 28 this.ctx.fillStyle = '#000'; 29 this.ctx.fillRect(0, 0, this.width, this.height); 30 31 // ゲームに登場するものの数だけ繰り返す 32 for (let i = 0; i < this.objs.length; i++) { 33 // ゲームに登場するもののクラスから、render()を呼び出す 34 this.objs[i].render(this.ctx, this.frame); 35 } 36 37 this.frame++; 38 console.log(this.frame); 39 40 // _main()を呼び出す（ループさせる） 41 requestAnimationFrame(this._main.bind(this)); 42 } 43 44 // ゲームにテキストなどを表示するための関数 45 add(obj, x, y) { 46 obj.x = x || 0; 47 obj.y = y || 0; 48 this.objs.push(obj); 49 } 50} 51 52class Label { 53 // Labelの初期設定 54 constructor(label) { 55 // 表示している場所の行数 56 this._visibleLine = 0; 57 this._text = []; 58 // 表示している文字列の長さ 59 this._displayLength = 0; 60 // 表示する行の数 61 this._line = 0; 62 this.label = label; 63 this.font = "20px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif"; 64 this.color = '#fff'; 65 this.maxLength = 30; 66 this.baseline = 'top'; 67 this.interval = 0; 68 } 69 70 // 次の行への切り替え機能 71 next() { 72 this._visibleLine++; 73 this._text = []; 74 this._displayLength = 0; 75 } 76 77 // Labelを表示するための関数（メインループから呼び出される） 78 render(ctx, frame) { 79 ctx.fillStyle = this.color; 80 ctx.font = this.font; 81 ctx.textBaseline = this.baseline; 82 83 // インターバルが0の場合は、文字を一気に表示 84 if (this.interval === 0) { 85 // 表示する文字数を、１行に表示する最大の文字数で割り、切り上げることで、文字列が何行になるのかが分かる 86 this._line = Math.ceil(this.label[this._visibleLine].length / this.maxLength); 87 // 文字列の行数だけ繰り返す 88 for (let i = 0; i < this._line; i++) { 89 this._text[i] = this._text[i] || ''; 90 //「substr()」は、任意の文字列の中から指定した文字列を抽出して切り出すことが出来るメソッド 91 // str.substr( 開始位置, 文字数 ) 92 this._text[i] = this.label[this._visibleLine].substr(i * this.maxLength, this.maxLength); 93 94 // 文字列の表示 95 ctx.fillText(this._text[i], this.x, this.y + (i * 25)); 96 } 97 // インターバルが0以外の場合、一文字ずつ表示していく 98 } else { 99 if (this._displayLength < this.label[this._visibleLine].length && frame % this.interval === 0) { 100 this._text[this._line] = this._text[this._line] || ''; 101 // this.labelに代入されている文字列を、this._text[this._line]に一文字ずつ入れていく 102 // this._text[this._line] += this.label.charAt(this._displayLength); 103 this._text[this._line] += [...this.label[this._visibleLine]][this._displayLength]; 104 this._displayLength++; 105 if (this._displayLength % this.maxLength === 0) { 106 this._line++; 107 } 108 } 109 for (let i = 0; i < this._line + 1; i++) { 110 this._text[i] = this._text[i] || ''; 111 ctx.fillText(this._text[i], this.x, this.y + (i * 25)); 112 } 113 } 114 } 115}
script.js
1 2'use strict'; 3 4const str = [ 5 '吾輩は猫である。', 6 '名前はまだ無い。', 7 'どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。' 8]; 9 10// ゲームのオブジェクトを640×480サイズで作る 11const game = new Game(640, 480); 12 13// ラベルオブジェクトを作る 14const label = new Label(str); 15label.interval = 5; 16label.maxLength = 32; 17 18// add()を使って、ゲームにラベルを表示 19game.add(label, 0, 0); 20 21// キーボードが押された時 22addEventListener('keydown', () => { 23 const key_code = KeyboardEvent.keyCode; 24 if (key_code === 32) label.next(); // スペースキーが押された時、label.next()を実行 25 KeyboardEvent.preventDefault(); // 方向キーでブラウザがスクロールしないようにする 26}, false); 27 28// ゲームスタート 29game.start();
回答2件
0
eventが線で消されます。
これは「非推奨」という意味で、そのままでも動作はします。
投稿2025/02/24 09:15
総合スコア147045
そうなんですか。普通に動きました。
でも、このままっていう訳にはいかないんでしょ？
> でも、このままっていう訳にはいかないんでしょ？
他にやることがあるならそちらを優先、ぐらいの優先順位で問題ありません。近い未来に動作しなくなる予定がある性質のものではないです。
分かりました。ありがとうございます。
0
ベストアンサー
addEventListener('keydown', event => {とした上で、eventからデータを取得してください。
javascript
1// "addEventListener"のコールバックは、引数でイベントのデータを受け取れます 2addEventListener('keydown', () => { 3 // "code"はイベントのデータの一部です。"event"から取得してください 4 // "keyCode"は非推奨なので、"code"に置き換えてください 5 const key_code = KeyboardEvent.keyCode; 6 if (key_code === 32) label.next(); 7 // "preventDefault"はイベントのメソッドの一部です。"event"から取得してください 8 KeyboardEvent.preventDefault(); 9}, false);
javascript
1addEventListener('keydown', event => { 2 const code = event.code; 3 if (code === 32) label.next(); 4 event.preventDefault(); 5}, false);
投稿2025/02/24 05:19
編集2025/02/24 08:18
総合スコア684
今度はkeyCodeが非推奨らしいです。
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode
ちなみに制作環境はwin11, Google Chrome, vs-codeです。
本文にスクショを載せます。
記事内記載の通りに`code`で参照されてはどうですか？
KeyboardEvent.codeでもkeypressでも動かないんです。
コード例は記載しておきましたが、`KeyboardEvent.code`ではありませんよ？
`event.code`などで参照していますか？
キーボード操作の受け取りはかなりの事例があるので、一度検索してみてはどうですか？
検索してみます。
下記のコードのように書き換えたけど動かなかったです。
「動かなかった」とはどのような状態を指していますか？
keydownイベントは発火しているのか、
`event.code`は取得出来ているのか、
`code === 32`の判定はなされているのか、
`label.next()`が動作しないのか。
たった数行のコードでも、主語が無いと意図が伝わらない可能性が高いです。
ブレークポイントを設定して見るやつですよね。あれ上手く使えたことないです。
とりあえず１行目の文章が表示されるだけです
例えばですが、判定式の前に`console.log()`などを挟み、どこまで動作しているかなどは見れませんか？
こんな感じです。
addEventListener('keydown', event => {
const code = event.code;
if (code === 32) label.next(); // スペースキーが押された時、label.next()を実行
console.log(key_code); // result: 表示無し
console.log(this._text); // result: 表示無し
event.preventDefault(); // 方向キーでブラウザがスクロールしないようにする
}, false);
addEventListener('keydown', () => {
const key_code = event.keyCode;
if (key_code === 32) label.next(); // スペースキーが押された時、label.next()を実行
console.log(key_code); // result: 32
console.log(this._text); // result: undefind canvasに２行目、３行目の表示はされる
event.preventDefault(); // 方向キーでブラウザがスクロールしないようにする
}, false);
keyCode が 32 (0x20) ってことは つまり code でいうところの "Space" ではないでしょうか？ key なら " " ですね。
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode#keycode_%E3%81%AE%E5%80%A4
出来れば推奨でいきたいけど、mozillaを見ても分からんのよね。
KeyboardEvent を見る限り code が 32 になることは無いのは確か（ key で " " でいいのでは？みたいなところもあります。
https://w3c.github.io/uievents/#idl-keyboardevent
"code"や"key"がどのような値を取得するかはリファレンスで確認可能です。
何を取得し、どれと比較したいかを考えてみると答えに至るかと思います。
そうですか。見てみます。ありがとうございます。
来ました！２行目、３行目も表示されています。
addEventListener('keydown', event => {
const code = event.code;
console.log(code); // result: Space
if (code === 'Space') label.next(); // スペースキーが押された時、label.next()を実行
console.log(code); // result: Space
event.preventDefault(); // 方向キーでブラウザがスクロールしないようにする
}, false);
※最初に私が載せた mdn のページに keyCode と code の比較表があったのですよ。
そうなんですか。すいません、気付かなかった
あなたの回答
tips
プレビュー
