数当てゲーム

大学生のときに仲いい人達の間で流行った数あてゲームってのがありましてね。
どんなゲームかというと、お互いに秘密の4桁の数字を決めあって、相手の数字を交互に推理しながら当てていくものです。
ただしいくつかルールがあって、

  • 秘密の数に同じ数は二度使えない(1981などは1を二回使うので不可)
  • 自分の番になると、4桁の数字を言う。言われたプレイヤーは、自分の秘密の数と相手に言われた数字を照らし合わせて「位置も数も合ってる数」と「数字だけ合ってる数」の個数をそれぞれ答えます。
    • たとえば、「2169」に対して「2695」と聞かれたら、位置まで一致している数(この場合2)が1個、使われているけど位置があっていない数(この場合6, 9)が2個あるので、「1 2」と答えます
  • 尋ねるときも同じ数字は二度使えない
  • 以上を繰り返し、先に相手の秘密の数を当てたほうが勝ち

というゲームです。なかなか奥が深い。
紙とペンがあれば遊べるので結構エコなゲーム。
人間相手にやると、秘密の数の決め方に癖とかが出てきて結構面白いんです。

で、このゲームを最近思い出して、頭のいい人とやってみたんです。
普通ならルールを理解するために何度もプレイしてもらう必要があるのに、やっぱり一回やってみたら覚えてくれて、とても楽しかったのです。
で、数日経った今日、「これjavascriptで簡単に作れるんじゃね?」って思って試したらすんなりロジックだけ作れたので公開しますね。
game.takaki.co.uk/numbers/

人間相手に当て合いっこするようなハラハラ感はないですが、ちょっとした暇つぶしに。

一応ゲーム業界に従事するプロのフロントエンドなので、時間を見つけて演出をもっと華やかにしたいです。

カテゴリー: 未分類 | コメントする

【js】0 と 1 のカッコいい入れ替え方

こんばんは。
たかきです。

今日会社でコードレビューをしていたらこんなコードを見ました。

baa = baa === 0 ? 1 : 0;

「0 なら 1、 1 なら 0」に変換するコードですね。

三項演算子が苦手な方は以下のものと同じ処理をすると考えてください。

if(baa === 0) {
    baa = 1;
}
else {
    baa = 0;
}

あるいは、

switch(baa) {
  case 0:
    baa = 1;
    break;
  default:
    baa = 0;
    break;
}

こんな感じ?
この処理に switch を使ってる人がいたら注意しますけど。

で、はじめのコードを思い出してみると、

baa = baa === 0 ? 1 : 0;

こうでしたね。
もしも true を flase に、 false を true にするのならおそらくほとんどの人がこう書くでしょう。
続きを読む

カテゴリー: front-end, JavaScript, Work, エンジニア | コメントする

【js】Backbonejsでeventsを継承させる方法

こんばんは。
たかきです。

Backbonejsって便利ですけどeventsは継承してくれなくて困りますよね。
昨日仕事でeventsをなんとか継承させることはできないかあれこれやっていたらできたので披露します。

まず、こんな継承元のViewがあったとします。

var dadView = Backbone.view.extend({
  events: {
    'tap .hoge': 'hoge',
    'tap .foo': 'foo',
  }
});

なんて感じの。

そしてこれを継承します。
(requirejsとかで、上記親Viewが DadViewと定義されているとして、)
続きを読む

カテゴリー: front-end, JavaScript, エンジニア | コメントする

【js】モンティ・ホール問題

モンティ・ホール問題って知ってますか?

ドアが3枚あります。
どれか1つのドアの後ろにはアタリの高級車が、残りの2枚のドアの向こうにはハズレを意味するヤギが控えています。
挑戦者がどれか一つのドアを選ぶと(まだ開けない)、司会者がハズレのドアを一つ開けてくれます。
ここで挑戦者には、回答を変更する権利が与えられます。

さて、挑戦者はドアを変更するべきでしょうか、せざるべきでしょうか、あるいはどちらでも変わらないでしょうか。

この問題を知らなければ、変えても変えなくても正解する確率は変わらないと思うでしょう。
僕もそうでしたし、この問題が提起されたときには数学者たちも確率は変わらないと言い張ったそうです。

ま、このすったもんだのストーリーだけでも面白いので、興味がある人はwikipediaなどをご覧ください。

答えは、ドアを変えるべきなんですね。
変える前は1/3の確率で当たるんですけど、変えると当たる確率が3/2に変わるんです。
それをJavascriptで試してみたのでご覧ください。

10,000回試した結果です。
きっと66%前後を示しているのではないでしょうか(リロードのたびに実験しますので、65~67%を示すと思います)。

See the Pen zoRJzB by Takaki Hiemno (@takaki1216) on CodePen.

カテゴリー: front-end, JavaScript, jQuery | コメントする

【jQuery】遅れてfade in/outさせる

【要件】
ボタンをクリックしたら500ms遅れて何か要素(今日はクリックされたボタン)を$.fadeOut()させよ

はい。普通にjQueryで書くとこんな感じ。

$('ぼたん').click(function() {
  setTimeout(function() {
    $(this).fadeOut();
  }.bind(this), 500);
});

そうです。遅れて何かをするときには setTimeout() です。これでOKです。
でも、もう一個function() が出てくるので this を bind しなきゃいけないし(functionの外側で var self = this; とかして、 $(self).fadeOut() しても同じです。)、なかなか煩わしいですよね。

そこで、せっかくjQueryなので .delay() を使うと楽だよ、可読性も上がるよ、という紹介です。
まあ、こんな書き方もあるんだよ、程度に。よかったら使ってみてくださいね。

$('ぼたん').click(function() {
    $(this).delay(500).fadeOut();
});

これで同じ動作をします。
ほら、読みやすくなったでしょう?
実物は下記をご覧ください!

See the Pen kkgwBL by Takaki Hiemno (@takaki1216) on CodePen.

カテゴリー: front-end, JavaScript, jQuery, エンジニア | コメントする

前職の友達に子供が産まれたぞ

こんばんは。

先々月6月、前の会社の友達に子供が産まれました。
と言っても僕はもちろん彼ももうその会社は辞めてしまっているのですが。

でも二人共その会社にいた時に彼が結婚して、別の時には向こうの奥さん(当時彼女)と一緒にうちの子とCOSTCOに行ったりと、何かと親密な人なんですね。
そんな彼の家に今週末お邪魔してきます。

育児に何がほしいか聞いたら粉ミルクだというので、

これを持って行こうと思います。
銘柄も指定してくれたのでとても楽です。

うちの子は「はいはい」しか飲まなかったなぁ。

赤ちゃんにもいろんな好みがあるのですね。

いやー会いに行くの楽しみです。

カテゴリー: blog, 生活 | コメントする

バールのようなもの

こんばんは。
バールを買ったんです。
よくニュースとかで「バールのようなものでこじ開けられ…」なんて聞くあのバールです。

IMG_8929
↑じゃん。
これ。
390mm のバール。

実は家の前の側溝の網の蓋の中に息子が僕の自転車の鍵を落としてしまいまして。
鍵を取るべく蓋を素手で引っ張ってみるもびくともしない。
で、家にあった道具で挑んだんですがカナヅチの釘抜きなんてこのザマですよ。↓
IMG_8855

金属でもこんなに簡単にひん曲がるとは恐るべし側溝の蓋…一体どんな力で埋まってるんだ。
もうだめなのか、鍵は諦めるしかないのか?と思っていたんですが、この前ジャージを買いに行ったドンキホーテでバールを見つけまして。
「これだ!」と。
「近所のくろがねやならもっと安く買えるだろう」と。

そして今日買ってきたのが最初に紹介した青いバール。

バールすごいっす。
どんなに力を加えても撓(しな)ったりしない。
むしろ網の横のコンクリートが凹んでいく!

IMG_8928
↑そしてバールを駆使してめでたく開けることができた図がこちら。

網こんな形してたのか!
そりゃ簡単に開かないわけだ。
平らな板状のものが乗ってるのかと思ってたよ。

てかこれを無理やり開けても折れたり曲がったりしないバールすげえ。
そりゃあ金庫とかも破られるわけだ。

35歳にして初めてバールを使って興奮しているのでした。
これ、人んちのドアとか車とか開くんじゃね?
こんなのが1000円で買えていいんかね?
(※いいんです)

というわけで欲しくなった人はこちらからどうぞ。

カテゴリー: 生活 | コメントする

【javascript】ifにするぅ?switchにするぅ?そ・れ・と・も

【要件】
受け取った animal_id に応じて、以下のとおり表示したい。

animal_id 表示名
1 cat
2 dog
3 lion
4 panda
5 giraffe

はい。きっと最初に思いつくのがif文による分岐ですよね。
続きを読む

カテゴリー: JavaScript | コメントする

アプリのバッジ数などに使える小技

今日はアプリのバッジ数をつける時なんかに使うであろう小技を紹介。

何かから未読数とかを受け取って表示するケースを考えますが、
「100以上なら99と表示したい」なんてこと、よくありますよね?

真面目な皆さんはこんなコードを書くかもしれません。


console.log(num);  // 120

if(num > 99) {
  num = 99;
}

console.log(num)  // 99

はい、これでOKです。
期待通りに動きます。

でも今日頭のいい人のコードを読んでて感動したので紹介します。

console.log(num);  // 120

Math.min(num, 99)

console.log(num)  // 99

はいこれだけ。

Math.min()は、引数の中から最小のものを返してくれる関数ですね。
言われてみれば当たり前なんですが、こういうところでコーディングのセンスの差がでますよね〜。

(まあ、実用上は100以上の時は 「99+」 なんて表記するために+をつけなきゃいけないから、結局どこかでif文書いたりすることが多いんでしょうけどね。)

カテゴリー: JavaScript | コメントする

【Javascrip】配列の .reverse() に気をつけろ!

こんばんは。
たかきです。

今日もjavascriptを書いております。
みなさんも書いてますか?

配列、使ってますか?
使ってますよね。

array に .reverse() って使ったことありますか?
そう、配列を逆順にするあれですね。

var arr = [0, 1, 2, 3, 4];
var arrRev = arr.reverse();
console.log(arrRev); // [4, 3, 2, 1, 0]

そう、こんな関数ですね。
続きを読む

カテゴリー: JavaScript | コメントする