vue.jsとtypescriotでテトリスのゲームを作成しているのですが、
エラーが表示され具体的な解決法がわかりません。
エラー画面。
vueページ
<script lang="ts" setup> //状態管理を行うため reactive 関数を読み込む import { reactive } from "vue"; //テトリミノを扱うため Tetromino クラスや TETROMINO_TYPE を読み込む import { Tetromino, TETROMINO_TYPE } from '../common/Tetromino'; //テトリスのフィールドを扱うためのFieldクラスを読み込む import { Field } from '../common/Field"; //適宣テトリスのフィールドを保持する let staticField = new Field(); //テトリミノ落下中のテトリスのフィールドを保持する const tetris = reactive({ field:new Field(), }); //落下中のテトリミノの状態を保持する const tetromino = reactive({ //テトリミノの状態を保持する current: Tetromino.random(), //テトリミノの位置を保持する position:{x: 3,y: 0}, }); //マス目の状態を元に対応したテトリミノの識別子(クラス名)を取得する const classBlockColor = (x: number, y: number): string => { //y行目 x行目のマス目の状態を取得する const type = tetris.field.data[_y][_x]; //テトリスのフィールドのマス目が空白以外なら、テトリミノの識別子を返却する if(type > 0) { return Tetromino.id(type as TETROMINO_TYPE); } //テトリスのフィールドのマス目が空白であれば、 //落下中のテトリミノの描画範囲をチェックする const{x,y} = Tetromino.position; const{data} = tetromino.current; //落下中のテトリミノの描画範囲のマス目をチェックする //マス目が空白以外であれば、対応するテトリミノの識別子を返却する if(y <=_y &&_y < y + data.length) { const cols = data[_y - y]; if(x <= x &&_x < x + cols.length) { if(cols[_x -x] > 0) { return Tetromino.id(cols[_x -x] as TETROMINO_TYPE); } } } //上記いずれの条件にも当てはまらなければ、空白を返却する return""; } setlnterval(() => { //2.テトリスを遊んでいる最中のフィールドを //テトリミノ出現直前のテトリスのフィールドに置き換える tetris.field = Field.deepCopy(staticField); //3.落下中のテトリミノの位置を1マス下げる tetromino.position.y++; //4.テトリスのフィールドに落下中のテトリミノの状態を反映する //2~4の処理を1秒毎に繰り返す tetris.field.update(tetromino.current.data,tetromino.position); },1*1000 /* 1秒ごと */); //1.テトリミノの状態を即時反映させることで、 //テトリスのプレイ直後から画面上にテトリミノを出現させる tetris.field.updata(tetromino.current.data,tetromino.position); </script> <template> <h1>プレイ画面</h1> <h2>ユーザ名:{{ $route.query.name }}</h2> <div class="container"> <!-- 2. script タグ内で定義した field 変数の二次元配列を、 Vue のテンプレート構文で繰り返し呼び出し、フィールドのマス目を描画する --> <table class="field" style="border-collapse: collapse"> <!-- 2.1. 行の数だけ繰り返し、tr タグでマスを表示する行を描画する :key には、行のインデックスを指定する --> <tr v-for="(row, y) in tetris.field.data" :key="y"> <!-- テトリスのフィールドの各マス目にその状態を描画する (0: 空白, 1: I-テトリミノ, etc.) --> <!-- 2.2. 列の数だけ繰り返し、tr タグでマスを描画する :key には、行と列のインデックスを指定する --> <td class="block" v-for="(col, x) in row" :key="() => `${x}${y}`" :class="classBlockColor(x, y)" /> </tr> </table> </div> </template> <!-- スタイルシートに SCSS 記法 (Sass) を利用する --> <style lang="scss" scoped> .container { display: flex; justify-content: center; align-items: stretch; } .field { border: ridge 0.4em #2c3e50; border-top: none; } .block { width: 1em; height: 1em; border: 0.1px solid #95a5a6; /* 各テトリミノに対応した色を扱うクラス定義 .block-i, .block-o のようにクラスが定義される */ &-i { background: #3498db; } &-o { background: #f1c40f; } &-t { background: #9b59b6; } &-j { background: #1e3799; } &-l { background: #e67e22; } &-s { background: #2ecc71; } &-z { background: #e74c3c; } } </style>
Tetromino.ts
/各テトリミノのデータ構造を表す二次元配列 const tetrominos = [ [ [0], ], [ [1,1,1,1], ], [ [2,2], [2,2], ], [ [0,3,3], [3,3,0], ], [ [4, 4, 0], [0, 4, 4], ], [ [0, 0, 5], [5, 5, 5], ], [ [6, 0, 0], [6, 6, 6], ], [ [0, 7, 0], [7, 7, 7], ], ]; const TETROMINO_TYPE = { I:1,// I-テトリミノ(水色) O:2,// O-テトリミノ(黄色) S:3,// S-テトリミノ(緑) Z:4,// Z-テトリミノ(赤) J:5,// J-テトリミノ(青) L:6,// L-テトリミノ(オレンジ) T:7,// T-テトリミノ(紫) } as const; //上記で定義したキーに対応する値で型を定義する export type TETROMINO_TYPE = typeof TETROMINO_TYPE[keyof typeof TETROMINO_TYPE]; //プログラム上でテトリミノを扱うためのクラス定義 export class Tetromino { //クラス変数でテトリミノの種類を持つ private type: TETROMINO_TYPE //コンストラクターの引数にはテトリミノの種類を指定する constructor(type:TETROMINO_TYPE) { this.type = type; } //各テトリミノに対応したcssクラス名(識別子を取得する)関数 static id(type:TETROMINO_TYPE):string { switch(type) { case TETROMINO_TYPE.I: return "block-i"; case TETROMINO_TYPE.O: return"block-o"; case TETROMINO_TYPE.S: return"block-s"; case TETROMINO_TYPE.Z: return"block-z"; case TETROMINO_TYPE.J: return"block-j"; case TETROMINO_TYPE.L: return"block-I"; case TETROMINO_TYPE.T: return"block-t"; default: return""; } } //自身のテトリミノの2次元配列を取得する get data():number[][] { return tetrominos[this.type]; } //ランダムな種類のテトリミノを取得する static random(): Tetromino { //1-7までの数値を取得する(空白以外のテトリミノの種類を取得する) const tetrominoTypes = tetrominos.length - 1; const type = Math.floor(Math.random()*tetrominoTypes) + 1; //typeの種類をTETROMINO_TYPEとして扱う return new Tetromino(type as TETROMINO_TYPE); } }
vueファイルの
Tetrominoを記述していることろで、
Unknown word
と忠告が表示、
Tetromino.tsファイルでは、
const tetrominosで
tetrominos": Unknown word.
と忠告が表示されております。
vue.typescriotど素人で上記2つの忠告でどのような記述に変更すれば良いのか、エラー画面からどこのコードを読み解決に導けば良いのか?
ご教授いただいてもよろしいでしょうか?
Unknown wordの忠告は恐らくCode Spell Checkerという拡張機能によるものなのでここでは関係ないですね
まだ回答がついていません
会員登録して回答してみよう