スーパーセントウです！
既にtwitter上では発表しましたが、
ついについに、競馬ゲーム作ってしまいました！！
１分で遊べます。ちょっと行ってみてください。
このコロナウイルス騒動で家での時間が増えたこともあり、
なにかを作るにはうってつけなタイミングでした。
CSSでアニメーション
回収率計算機のリニューアルでちょっとCSSをかじったら、
画像をアニメーションで動かしたくなったことがきっかけです。
で、画像を間隔起動させたら馬が走る！
それと私はドラクエ５が好きです。
どう好きなのかは置いといてカジノのスライムレースが結構好きでした。
１レースの時間もかかり、しかも当たらない、
圧倒的に非効率のゲームですね。
とにかくスライムレースみたいなのを作ろうという企画です。
Javascriptでpauseしながらループ
Javascriptにはpause的なコマンドがありません。
pauseとは一時停止です。
これは困りました。
ちょっとずつ動かないとゲームになりません。
ググるとsetIntervalを使うパターンとsetTimeoutを使うパターンがでてきました。
よくわかりませんが今回はsetTimeoutを使ってみました。
試行上限回数を決めてループする仕組みをコピペにて採用。
試行中に条件が来たらreturnで終了というソースになってます。
※試行上限回数を決めているということで理論上全頭ゴールしないケースがあるはずです。
htmlで画像の上で画像を動かす
これがかなりてこずりました。
html上で画像を重ねるとググると、
cssのpositionにrelativeとabsoluteを設定するやり方が出てきます。
とりあえずこの方式を使ってみました。
ブラウザのズームを変えると馬がコース外にはみ出していく！(笑)
当然スマホで見てみると横のサイズが異なっていてずれちゃいます。
しかも見た目上ゴールを過ぎても馬が止まらない！(笑)
レスポンシブデザインとかいうやつに悩む日々。
最終的にどうやっているかというと実は３つの画像が重なっているんです。
目に見えてるのは競馬場の画像と馬の画像ですが、
これを両方absoluteでつないでいます。
馬がはみ出したり、コース外に行くことがなくなりました。
そしてrelativeさん用に競馬場と同じサイズの白い画像を裏に隠しています。
きっと不細工な作り方なんだろうなー。
とこんな苦労がありました。
使い方
簡単です。STARTボタンを押すだけです。
勝手に走ります。勝手に止まります。
一喜一憂してください！
飲み会とかには使えるかもね♪
今のところどうやったらいいかわかっていませんが、
脚質要素とかつけられたら面白いなーと妄想しています。
よろしくお願いいたします！
[ad#co-1]