Javascript

Javascript
javascript(テトリス000_ロジック)新着!!

■Javascriptでテトリスのコードを作成する。落ちものゲームのテトリスのコードを作ってみる。ベーシックなものは横10マス、縦20マスくらいのもので、落ちるピースは下の7種類だったと思う。横一列に並んだらその行は消え […]

続きを読む
anime
javascript(gridのアニメーション)

■anime.js でグリッドを操作するアニメーション。公式のHPでグリッド上のオブジェクトの操作が気になったので、サンプルを作って動かしてみる。公式のコードから少し編集して下のようなサンプルで試す。 htmlグリッドの […]

続きを読む
anime
javascript(svgの線を消すアニメーション)

■strokeDashoffsetを使って線を徐々に消す。前回、svg画像の線に沿って別のオブジェクトを動かすアニメーションを試したけど、今回は線自体を徐々に消すものを試してみた。コードが下。 html css java […]

続きを読む
anime
javascript(animeのpathでsvg画像をなぞる)

■anime.min.js の試し2。anime.min.js の Documentation を見ながらもう少しサンプルを試してみる。基本的には、指定したオブジェクトのx, y, z軸での移動や回転ができるよう。あと、 […]

続きを読む
anime
javascript(ライブラリanime.min.js の試し)

■javascriptのアニメーションのライブラリを使う。モグラたたきのアプリで画像を差し替えてアニメーション風にしていたけど、javascript のアプリでanime.js といったものがあったので、このライブラリを […]

続きを読む
Javascript
javascriptでのモグラたたきアプリ(試作品)

■動作ロジックも入れてとりあえず完成した。画面例は変わらず下のような感じ。 時間は60秒。Normalでは、1ターン(もぐらが出るロジック1回)を1.2秒に1回にしたので、ざっと50回。ただ、どこに出るかはランダムで決め […]

続きを読む
Javascript
javascriptでのモグラたたきアプリ(動作ロジック)

■モグラの出現や叩かれた際のロジックを考える。setInterval と setTimeout を使って、モグラの動作のロジックを考える。出現は setInterval を使って繰り返し。動作は下のようなロジックを考えて […]

続きを読む
Javascript
javascriptでのモグラたたきアプリ(setTimeoutで時間差で関数を実行)

■チェックする画像の設定2。setInterval で定期的に関数を実行させることができたけど、少し画像を差し替えたいときには setTimeout が使えそう。下のjavascriptでサンプルを実行。 下の、./mo […]

続きを読む
Javascript
javascriptでのモグラたたきアプリ(setIntervalで定期的に関数を実行)

■チェックする画像の設定。モグラたたきの最低限の操作を考えてみると、①モグラの画像を定期的に、またランダムに表示させる。②その画像をクリックする。③画像をベースのものに戻す。になる。 ①では、setInterval で定 […]

続きを読む
Javascript
javascriptでのモグラたたきアプリ(設計)

■モグラたたきのアプリの設計。最近、html関連を触っているので簡単なアプリの作成を考えてみる。画面上にランダムにマークを表示させクリックするモグラたたきのようなアプリを作る。 htmlのtr, tdタグを使って、4×4 […]

続きを読む
Javascript
javascriptに関連してのCSS (pt=1.33px)

■何かずれる画像。横縦100px×200px の画像を張り付けてcssで位置を設定するとき、なぜかずれる場合がある。なんでだろうと思いながら、cssの設定やらhtmlの設定やらをいろいろと変えて表示させてみると、cssで […]

続きを読む
Javascript
javascriptに関連してのCSS (object-fit)

■CSSのobject-fitプロパティを見てみた。ブラウザ上で何かをクリックしたときにjavascriptで画像を表示させたいけど、画像サイズをうまく調整する方法がないか探した。すると、object-fitプロパティと […]

続きを読む