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

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の条件はこの勝利条件を満たしているか？を表しています。

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

更新を再開・・・

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

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

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

変数宣言varの謎にせまる。

JavaScriptについて勉強し始めて間もないですが、様々なサイトや書籍を参考にしながら勉強しています。しかし初心者向けの本や、ドットインストールはとっつきやすさ重視なのか詳細な説明を省いている部分が多いのだと最近気が付きました。

そしてちょうど今クロージャと言うものを調べている時に、プログラミングの基本中の基本、変数宣言について疑問を持ちました・・・。

自分が調べて知ったことを、メモがてらまとめていきます。

超初心者がJavaScriptで作る三目並べ その3

予定を変更してバグには目をつむり、とりあえず五目並べがまともに成り立つ形を目指すことにしました。

 今回は勝ち負けを表すことのできる関数を作っていきます。

超初心者がJavaScriptで作る三目並べ その2

前回はコードを短くしようとして、動作がうまく行かずに終わりました。結局それ自体はとても簡単に解決しました・・・。

ということで前回の続きです。

超初心者がJavaScriptで作る三目並べ その1

HTMLを勉強し始めて早一ヶ月。基本中の基本だけですがJavaScriptも学んだ"つもり"です。実際にコードを書いたことはあまりないのでここで一旦練習することにします。

解説もしたいところですが、生半可な知識では正確な情報を伝えられないと思うので、それはまたいずれ・・・。今回は簡単に説明を付ける程度にしておきます。