javascript（テトリス000_ロジック）新着!!
■Javascriptでテトリスのコードを作成する。落ちものゲームのテトリスのコードを作ってみる。ベーシックなものは横10マス、縦20マスくらいのもので、落ちるピースは下の7種類だったと思う。横一列に並んだらその行は消え […]
javascript（gridのアニメーション）
■anime.js でグリッドを操作するアニメーション。公式のHPでグリッド上のオブジェクトの操作が気になったので、サンプルを作って動かしてみる。公式のコードから少し編集して下のようなサンプルで試す。 htmlグリッドの […]
javascript（svgの線を消すアニメーション）
■strokeDashoffsetを使って線を徐々に消す。前回、svg画像の線に沿って別のオブジェクトを動かすアニメーションを試したけど、今回は線自体を徐々に消すものを試してみた。コードが下。 html css java […]
javascript（animeのpathでsvg画像をなぞる）
■anime.min.js の試し２。anime.min.js の Documentation を見ながらもう少しサンプルを試してみる。基本的には、指定したオブジェクトのx, y, z軸での移動や回転ができるよう。あと、 […]
javascript（ライブラリanime.min.js の試し）
■javascriptのアニメーションのライブラリを使う。モグラたたきのアプリで画像を差し替えてアニメーション風にしていたけど、javascript のアプリでanime.js といったものがあったので、このライブラリを […]
javascriptでのモグラたたきアプリ（試作品）
■動作ロジックも入れてとりあえず完成した。画面例は変わらず下のような感じ。 時間は60秒。Normalでは、1ターン（もぐらが出るロジック１回）を1.2秒に1回にしたので、ざっと50回。ただ、どこに出るかはランダムで決め […]
javascriptでのモグラたたきアプリ（動作ロジック）
■モグラの出現や叩かれた際のロジックを考える。setInterval と setTimeout を使って、モグラの動作のロジックを考える。出現は setInterval を使って繰り返し。動作は下のようなロジックを考えて […]
javascriptでのモグラたたきアプリ（setTimeoutで時間差で関数を実行）
■チェックする画像の設定２。setInterval で定期的に関数を実行させることができたけど、少し画像を差し替えたいときには setTimeout が使えそう。下のjavascriptでサンプルを実行。 下の、./mo […]
javascriptでのモグラたたきアプリ（setIntervalで定期的に関数を実行）
■チェックする画像の設定。モグラたたきの最低限の操作を考えてみると、①モグラの画像を定期的に、またランダムに表示させる。②その画像をクリックする。③画像をベースのものに戻す。になる。 ①では、setInterval で定 […]
javascriptでのモグラたたきアプリ（設計）
■モグラたたきのアプリの設計。最近、html関連を触っているので簡単なアプリの作成を考えてみる。画面上にランダムにマークを表示させクリックするモグラたたきのようなアプリを作る。 htmlのtr, tdタグを使って、4×4 […]
javascriptに関連してのCSS (pt=1.33px)
■何かずれる画像。横縦100px×200px の画像を張り付けてcssで位置を設定するとき、なぜかずれる場合がある。なんでだろうと思いながら、cssの設定やらhtmlの設定やらをいろいろと変えて表示させてみると、cssで […]
javascriptに関連してのCSS (object-fit)
■CSSのobject-fitプロパティを見てみた。ブラウザ上で何かをクリックしたときにjavascriptで画像を表示させたいけど、画像サイズをうまく調整する方法がないか探した。すると、object-fitプロパティと […]