DevQuizの俺回答その１

DevQuiz終わりましたね。結局、ウォームアップクイズと分野別クイズを解いて、スライドパズルは1問できただけｗという状態でなんだか悔しい終わり方になってしまったorz

でも、問題に取り組んだことで自分の思考の癖みたいなものがわかったし、エレガントに解いている人たちが公開している回答を見て新しい知識も得られたし、Google Developer Dayに参加できなくてもよしとしよう！（単なる負け惜しみ）

Web Game

分野別クイズはWeb Gameと一人ゲームを解きました。

Web Gameではサンプルのextensionを変更しました。一旦カードをめくって、めくったカードの位置とそれに対応する色のカードの位置を保持するハッシュを作ったあと、そのハッシュをもとに神経衰弱を行うという実装をしました。

Web Game ― Gist

var cards = {}; // カードの色テーブル
var pairs = {}; // カードのペア

var el = document.getElementsByClassName('card');
var all_cards = el.length;
alert("all_cards: " + all_cards);

// カードの色テーブルを作ると同時にペアの位置も記憶
for(i = 0; i < all_cards; i++) {
    var str = "card" + i;
    var element = document.getElementById(str);
    if (element == null) {
        alert('Card element is not found. Check element id.');
    } else {
        var myevent = document.createEvent('MouseEvents');
        myevent.initEvent('click', false, true);
        element.dispatchEvent(myevent);
        
        var clr = element.style.backgroundColor;
        var m = clr.match(/^rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)$/);
        
        // カードの色テーブルに追加
        var key = m[1] + m[2] + m[3];
        if( key in cards ) {
            // 現在の位置をキーにして相手の位置をバリューとして代入
            pairs[i] = cards[key];
        }
        else {
            // カードの色テーブルに現在の位置をバリューとして追加
            cards[key] = i;
        }
    }
}

// pairsに基づき再度マウスイベントをエミュレートして神経衰弱を実行
for(var i in pairs) {
    // 一枚目
    var str = "card" + i;
    var element = document.getElementById(str);
    var myevent = document.createEvent('MouseEvents');
    myevent.initEvent('click', false, true);
    element.dispatchEvent(myevent);
    
    str = "card" + pairs[i];
    element = document.getElementById(str);
    element.dispatchEvent(myevent);
    
}