progress 要素で遊ぶシリーズ。
まず普通に x と y を追従するようなものをつくるとこう。 Glitch で遊んでたのをここにコピペしてるのでなんか変かも。
x と y を入れ替えると、もう奇妙な感覚になる。
つまりこれをうまく使って遊べそう → これモアイまわしじゃん、ということに気づいたのだった。
300x300で, x と y は...
やっぱり座標が変そうなので Glitch 版も貼っておきます。
GIF で貼っておくと、こういう動きをするはず。
追記: もちろん progress 要素じゃなくてもよくて、月とかでもよい。こっちのほうが回転の様子とかはわかりやすい。
MDN <progress>: The Progress Indicator element - HTML: HyperText Markup Language | MDN を見ていたら、 ::-webkit-progress-bar みたいな疑似要素があって、色とかを変えられるようだった。 ::-webkit-... のほうしか指定してないので Chrome 系じゃないと色が変わらないかも。
あと MDN 見てると meter 要素 <meter>: The HTML Meter element - HTML: HyperText Markup Language | MDN というのもあって、今回みたいな用途だったら meter 要素のほうが比較的あっている？かも？ しかしモアイの回転度が進捗かというとそんな気もする。
本家モアイまわしはこちら。子どものころから大好きなゲームです。
www.skt-products.com
