おはようございます！！
２、３日更新してませんでしたが、信号機にかなりハマってしまっていました。泣
まずCSS全然覚えてなくて見た目作るのに大苦戦でした。
かなり苦戦したけど先ほどついに完成しました！！
https://tik-factory.com/TrafficLights
今スマホで見たら悲惨なことになってますね。頑張ってなおします。
デザインはとりあえずで作ったものなので今後やっていこうかと思いますが。
システムとしては、時間で処理を行うsetIntervalとclearIntervalというものを使い各画像に時間を指定してCSSに処理をかけるというもの。
ここは調べてやったらすぐに到達できた。
問題はここから。青→黄色→赤まで行ってその後どうやって青に戻ろうか？コレでかなり時間使いました。
たぶん普通にループ文使ってやれると思うんだけど現状そこまで行けてない。まず上のシステムのリファクタリングができなくて、デカすぎる。デカすぎるからループ文に入れようとするとわけがわからないことになりシステムが動かなくなる。リファクタリングしようと試みるもうまくいかず動かなくなる。
をしばらく繰り返して諦めて別の道を探すことにしました。
まずは秒数指定ではなく何秒の倍数とかで範囲を作ってループを使わずにやれないかとか考えてみたけど、頭が悪すぎて断念。
同じシステムを何個もコピーしてやるか？
さすがにそれはダサい。
そして辿り着いたのは、最後の処理が終わったらページ自体を最初に戻すという方法。
たぶんこのページにこの信号機以外の何かを動かしていたら使えないかもしれない方法だと思いますが。
使ったのはdoReloadというもの。
この発見により、見た目上のゴリ押しループが完成！！
にっこり
あとは秒数のバランスを整えて完成です。
だいぶ色々問題や疑問が残ってるけどとりあえず動いたから今のところはクリアーということにしておこう。
スタイリッシュに決まったらコード載せようかと思っていたけど全然でしたね。その辺はまた今後の課題ということにします。
いずれはこの信号を使って人や車が動いたり止まったりする道を作ってみようと思います。
あとこの時間で処理するシステムは写真のスライドとかに使っても良さそうだと思いますね。
やべ。仕事行かないとー。
ではまた。
コメント