2024年
javascript（テトリス009_テトリスへのanime.jsの使用）新着!!
■Anime.jsでアニメーションを追加する。前回まででテトリスのコードはできたので、装飾としてAnime.js（Anime.min.js）でアニメーションを追加する。対象の動作は、行が揃って消えるところと終了時。 追加 […]
javascript（テトリス008_テトリスをクラスのコードにする）
■テトリス006のコードをクラスを使ったものに修正する。テトリス006の記事で作成したコードは function を使っただけのものなので、それぞれの関係性が分かりづらい。クラスを使ったものにコードを整理した。 おおまか […]
javascript（テトリス007_クラスを使ったコードにする）
■javascriptでのクラスの試し。前回でテトリスのコードはできたので、これをクラスを使ったコードに修正したい。javascriptでもそういったことができるか調べたところ、ES6からは、javaと同じような書き方が […]
javascript（テトリス006_テトラ（４）での作成）
■４マスのピースで作成。少しずつ作ってきてようやく４マスのピースで動かせた。３マスからの拡張では大きな変更は必要なかった。点数などを追加した実行画面が下のような感じ。 動かしてみて特に問題はなさそうなのでロジックはこれで […]
javascript（テトリス005_開始と終了）
■ピースの開始位置とゲーム終了時の処理について。テトリスは上からピースが降ってきて、上まで積みあがると終わりになる。この「上」をどういった処理にするか検討してなかったので、今回はまだ３マスでそれを考える。ピースの形状から […]
javascript（テトリス004_ピースの回転2）
■ピースを回転させるロジックの続き。前回、下の図の(1,1)を取り上げて、回転させるロジックを考えてみた。その結果、+10（下へ）、-1（左へ）、-10（上へ）、+1（右へ）を繰り返す形になった。同様に他の部分も考えてみ […]
javascript（テトリス003_ピースの回転）
■回転するロジックを考えてみる。前回まで１マスで考えてきたけど、下のような３マスに拡張する。この場合、ピースを回転させる操作が必要。 まず、どこを中心に回転させるか考えてみたい。重心位置に近いところで回った方が直感的なイ […]
javascript（テトリス002_揃った行を消す）
■ピースが揃った場合の処理を追加する。今は１マス分のみのピースが落ちる形で作っている。左上から、各オブジェクトに0～199の番号を付けており、それに対応する形の配列（board）を用意して０（ピースがない状態）、１（置か […]
javascript（テトリス001_キーボードから入力）
■1セルのピースを操作する。テトリスのコードを作成するにあたり、いろいろと試行錯誤中。始め、位置情報を使って組み立てていこうかと思ったけど、微妙なずれの調整が難しそうなので、各クラスごとに番号を付与する。 落ちるピースは […]
javascript（テトリス000_ロジック）
■Javascriptでテトリスのコードを作成する。落ちものゲームのテトリスのコードを作ってみる。ベーシックなものは横10マス、縦20マスくらいのもので、落ちるピースは下の7種類だったと思う。横一列に並んだらその行は消え […]
javascript（gridのアニメーション）
■anime.js でグリッドを操作するアニメーション。公式のHPでグリッド上のオブジェクトの操作が気になったので、サンプルを作って動かしてみる。公式のコードから少し編集して下のようなサンプルで試す。 htmlグリッドの […]
javascript（svgの線を消すアニメーション）
■strokeDashoffsetを使って線を徐々に消す。前回、svg画像の線に沿って別のオブジェクトを動かすアニメーションを試したけど、今回は線自体を徐々に消すものを試してみた。コードが下。 html css java […]