時間ごとに色が変わる時計を作ってみた

00:00:00

(function(){
    var hour = 0,
        minute = 0,
        second = 0;

    var setClock = function() {
        getNowTime();
        colorRewrite();
        document.getElementById('clock20150725').innerHTML = '#' + hour + ' ' + minute + ' ' + second;
    };

    var getNowTime = function() {
        var currentTime = new Date();

        hour = currentTime.getHours();
        minute = currentTime.getMinutes();
        second = currentTime.getSeconds();

        hour = ('0' + hour).slice(-2);
        minute = ('0' + minute).slice(-2);
        second = ('0' + second).slice(-2);
    };

    var colorRewrite = function() {
        var clock = document.getElementById('clock20150725'),
            bgColor = '#' + hour + minute + second;
        clock.style.backgroundColor = bgColor;
    };

    setInterval(setClock,200);
})();

先日このような記事を読んで、 なかなか面白い発想のアプリだなということで、 What colour is it?というサイトを見よう見まねで同じ仕組の時計を作りました。

色々調べながらでも1時間程度で作れたので、 ドットインストールの内容がひと通り終わったあとの練習に良さそうです。

JavaScriptでマルバツゲームその1

プログラムを書いて逐一更新しては全く進まないので、ある程度まとまってから更新していくことにします・・・。 今回は前回のリベンジで三目並べです。

前回のプログラムを破棄して、昨日から作ったので2日で完成です。 Bloggerの仕様がわからないので、CSSのうまい当て方がわかりませんでした・・・。

とりあえず二度押し防止、勝敗判定までは搭載しています。 よっぽどのことがない限りバグらないはず！・・・はず。

初心者なりに調べつつ作成したので、メモしたことなどを含めて完成後に解説を載せていきたいです。

今後の改善予定は、リセットボタンの搭載、勝敗をアラートではなくボードの下くらいに表示、そしてCPUとの対戦機能です。 CPUとの対戦機能はなんというか、JavaScriptがかける書けないということではない部分が問題になりそう・・・。

そして最も改善したいところはこれです。

var firstMove = /circle20150707/;
if (
firstMove.test(square[0][0].className) && firstMove.test(square[0][1].className) && firstMove.test(square[0][2].className) ||
firstMove.test(square[1][0].className) && firstMove.test(square[1][1].className) && firstMove.test(square[1][2].className) ||
firstMove.test(square[2][0].className) && firstMove.test(square[2][1].className) && firstMove.test(square[2][2].className) ||

firstMove.test(square[0][0].className) && firstMove.test(square[1][0].className) && firstMove.test(square[2][0].className) ||
firstMove.test(square[0][1].className) && firstMove.test(square[1][1].className) && firstMove.test(square[2][1].className) ||
firstMove.test(square[0][2].className) && firstMove.test(square[1][2].className) && firstMove.test(square[2][2].className) ||

firstMove.test(square[0][0].className) && firstMove.test(square[1][1].className) && firstMove.test(square[2][2].className) ||
firstMove.test(square[0][2].className) && firstMove.test(square[1][1].className) && firstMove.test(square[2][0].className)
){
    alert("先手の勝利");
    endGame();
    return;
}

これは勝敗判定の一部ですが、ifの条件が最悪です。 多次元配列squareに各マス目のdivの情報を詰め込んだわけです。

マス目をクリックすると、そのdiv要素にクラス（circle20150707）を適用して丸を表示させています。 ということで多次元配列squareで欲しいマス目を指定し、.classNameをつければ適用されているクラスを取得できます。 あとはそのクラスの中にcircle20150707が含まれていれば、そこは丸＝先手のマスというわけです。

三目並べの勝利条件は横に3つ並ぶか、縦に3つならぶか、斜めに3個並ぶかです。それぞれ3通り、3通り、2通りあります。 要するに上のifの条件はこの勝利条件を満たしているか？を表しています。

しかし見た目が汚らしすぎるので、何とかもっとスマートなやり方を探したいと思います・・・。

更新を再開・・・

ひどく間が開いてしまいましたがぼちぼち再開していこうと思います。

なんとなく自分的に更新するのが義務、みたいになっていたのが良くなかった気がします。ということでもっと気楽に更新していこうかなと・・・。

絵は毎日だらだらと描いても全く身にならないような気がしたので、暇な時にガッツリと描いていく感じにしようかなと思います。ブログタイトルもそのうち変えておこう・・・。