vue.jsでブラックジャックを作成してみる【解説?】
ブラックジャック解説
ソース全ては前回最後に貼ったbitbucketのソースを見ていただければ。
ディレクトリ構成
src/pages/index.vue /components/ActionButtons.vue Hands.vue BurstModal.vue ResultModal.vue
ソース
ひとつずつ解説しようかな、とも思ったのですが膨大になるので個人的に今回「僕の中ではMVP」だった部分だけ取り上げます。
src/pages/index.vue
メインとなるvueファイル。
作成したカードの合計値を計算するメソッドが今回のMVPです。
最初は複数手札かつAが複数枚手札にあった時に一つずつ条件式で11か1か判定して加算しないといけないかなぁ、とか思ってたのですが、ふと気づきました。 手札を降順にすることでAを最後に回せばそのAの扱いを11にするか1にするかに複雑な条件がいらない…、と。
これが今回実装時の僕個人的なMVPです。せっかくの機会ですので皆さんにお知らせいたします。 現場からは以上です。
/** * 手札合計値を返す * * @param {Array} hands * @return {Number} */ calcHands(hands) { // Aを最後に処理するようにnumberを降順で並べる const tempHands = [...hands] const sortedHands = tempHands.sort((a, b) => b.number - a.number) return sortedHands.reduce((sum, hand) => { let { number } = hand if (number >= 10) number = 10 // Aの処理 if (number === 1 && sum + 11 <= 21) { number = 11 } return sum + number }, 0) },
けどcomputedにしてもよかったかもですね。
どんな指摘でも募集しておりますのでなんでもご指摘いただければ幸いです。
目が疲れやすい方のMacダークモード設定
使用アプリ
- GoogleChrome拡張 DarkReader
- AppleStoreアプリ QuickShade
両方とも使い方は触ればわかるUIになっているのでよい。
あとはF5, F6(Fnキーと同時押しの可能性もあり)でキーボードの明るさもついでに下げるとよいかも。
目が疲れやすい方の少しでも役に立てれば。
vue.jsでブラックジャックを作成してみる
ルール
ブラックジャックの流れとルール
ブラックジャックは、ディーラーとプレイヤーにカードが配られ、その合計値が「21」に近い方が勝ちというカードゲームです。
ルールも簡単で、なるべく21に近づけ、21を超えないようにカードを引くことが基本ルールです。
<ブラックジャック基本ルール>
- ディーラーとプレイヤー全員に2枚ずつカードが配られる
- 自分のカードの合計値が21に近づくよう、ヒットしてカードを追加したり、追加しないスタンドを選択する
- カードの合計値が21を超えてしまった時点で、その場で負けが決定する(バースト)
- プレイヤーは21を超えない限り好きなだけカードを追加することができる
- ディーラーはカードの合計値が17を超えるまでカードを追加しなければならない(未実装)
機能
実装済み
- カードを引く
- 相手の手札を見る / 隠す
- 勝負 → スタンドに変更しないと
- リスタート
未実装
- ディーラー側がカードを引く
- ディーラーはカードの合計値が17を超えるまでカードを追加しなければならない(未実装)
ソース
https://bitbucket.org/miyamura1218/blackjack-vue/src/master/ bitbucket.org
todo: 説明はまた書きます。
Homesteadインストール時の「The specified checksum type is not supported by Vagrant: sha512.」エラー
概要
友人とlaravelのHomesteadを使用し何か作ろうか、とした時に表題のエラーが発生し、「すわ何事!」となった話。
エラー内容
The specified checksum type is not supported by Vagrant: sha512. Vagrant supports the following checksum types: md5, sha1, sha256
stackOverFlowで同じ状況の人を発見
解決
結論から言うとvagrantのバージョンが低かった。 vagrant 2.2.5からvagrant2.2.6にあげると表題エラーは発生せずに無事vagrantの起動が完了した。
新しいmacを購入した時に行ったこと【webエンジニア】
ビンゴ判定プログラム
概要
ビンゴ判定って難しくない?難しくなくない?なんて頭をもたげたので書いてみる。
神のような友人は、「ん?簡単やんけ?死にたいんかお前」とおっしゃっておられました。
チェック系は特にやってないので動かしてみる人はその辺り念頭に置いていただければ。
ソース
- index.php
テストコードとか残してるけどまぁ、それでもまぁ、未来の僕のためやと思いますので許してください。
<?php require_once './class/Bingo.php'; use \App\Bingo; // 3 * 3 $openBingos = [ [0, 0], [0, 1], [0, 2], [1, 0], [1, 1], [2, 0], [2, 1], [2, 2], ]; // 単体 // $openBingos = [ // [0,0] // ]; // 4 * 4 // $openBingos = [ // [0, 0], [0, 1], [0, 2], [0, 3], // [1, 0], [1, 1], // [2, 0], [2, 1], [2, 2], // [3, 3], // ]; $line = 3; // $line = 4; $bingo = new \App\Bingo($openBingos, $line); // $bingo->addOpens([1, 2]); // $bingo->setBingoLineCount(); var_dump($bingo->getBingoCount());
- class/Bingo.php
<?php namespace App; class Bingo { /** * ビンゴ縦横マスの長さ * * @var int */ private $line; /** * ビンゴしているライン数 * * @var int */ private $bingoLineCount = 0; /** * 現在開いているマスの連想配列 * * @var array */ private $opens; const INDEX_X = 0; const INDEX_Y = 1; private $matrixCount = 2; // x, y public function __construct(array $opens, int $line) { $this->opens = $opens; $this->line = $line; $this->setBingoLineCount(); } /** * ビンゴラインを設定する */ public function setBingoLineCount() : void { // 縦横のビンゴ数を設定する $this->bingoLineCount += $this->simpleLineCount(); // ななめのビンゴ数を設定する $this->bingoLineCount += $this->diagonalLineCount(); } /** * ビンゴしている数を返す */ public function getBingoCount() : int { return $this->bingoLineCount; } /** * 縦横にビンゴしている数を返す * * @return int */ private function simpleLineCount() : int { $simpleLineCount = 0; for($i=0; $i < $this->matrixCount; $i++) { // 縦横で開いている要素数を取得する $simpleLines = array_count_values(array_column($this->opens, $i)); foreach($simpleLines as $openCount) { // 開いている要素数が横幅と同じならビンゴ判定 $simpleLineCount += $openCount === $this->line ? 1 : 0; } } return $simpleLineCount; } /** * 斜めにビンゴしている数を返す * * @return int $diagonalLineCount */ private function diagonalLineCount() : int { $diagonalLineCount = 0; // 斜めビンゴの要素を取得する list($rightDownCount, $leftDownCount) = $this->getDiagonalElementCount(); // ビンゴの場合は加算する $diagonalLineCount += $rightDownCount === $this->line ? 1 : 0; $diagonalLineCount += $leftDownCount === $this->line ? 1 : 0; return $diagonalLineCount; } /** * 斜めのビンゴの要素を返す * * @return array $diagonalOpens */ private function getDiagonalElementCount() : array { $rightDownCount = 0; $leftDownCount = 0; foreach ($this->opens as $open) { foreach (range(0, $this->line - 1) as $position) { $rightDownCount += $this->isRightDownLineElement($open, $position) ? 1 : 0; $leftDownCount += $this->isLeftDownLineElement($open, $position) ? 1 : 0; } } return [$rightDownCount, $leftDownCount]; } /** * 右斜めのビンゴに関係する要素か判定する * 3列の場合は、[0, 0], [1, 1], [2, 2]が対象 * * @param array $open * @param int $position * @return bool */ private function isRightDownLineElement(array $open, int $position) : bool { return $open[self::INDEX_X] === $position && $open[self::INDEX_Y] === $position; } /** * 左斜めのビンゴに関係する要素か判定する * 3列の場合は、[0, 2], [1, 1], [2, 0]が対象 * * @param array $open * @param int $position * @return bool */ private function isLeftDownLineElement(array $open, int $position) : bool { return $open[self::INDEX_X] === $position && $open[self::INDEX_Y] === $this->line - ($position + 1); } /** * ビンゴを開ける * * @param array $addOpens */ public function addOpens(array $addOpens) : void { $this->opens[] = $addOpens; } /** * ビンゴかどうかの判定 * * @return bool */ public function hasBingo() : bool { return (bool)$this->bingoLineCount; } }
反省
実力不足でループがすごいことになってる。
最初のデータの形が悪いのかなぁ。開いたマスを表現する連想配列をオブジェクトにしたい。
あと、斜めラインでビンゴしてる数を取得しているメソッドをgeneratorとか使って綺麗にするか、 もしくは早いタイミングでダメなやつは返すようにしてループを少しでも減らしたい。
斜めライン判定するメソッドも場当たり的な書き方ですね。なんですかねこの脳みそ。
【ソロキャンプ?】初めてのキャンプ
概要
2019年4月20日(土)に友人宅屋上でキャンプ。
日本広しと言えど屋上にテントを設営して一泊したのは後にも先にも僕らだけなのでは。
チュートリアル的な意味合いで実施した屋上キャンプは、鬼のように便利な設備と鬼のようにレベルの高い友人父というチートキャラがいたおかげで、何の問題もなく終了した。
風もほぼ無風でテントがどれくらい風に耐えれるかなどまったくわからなかったので今後の課題。
あとキャンプ場や自然でキャンプした時の薪や水の確保も次回外でキャンプした時に体験したい。
実際購入したもの
製品 | メーカー | 価格 |
---|---|---|
椅子 | CAPTAIN STAG | 1,240 |
まな板 | CAPTAIN STAG | 1,819 |
収納ケース | CHUMS | 2,052 |
キャンプグローブ | OLSON DEEPAK | 1,150 |
枕 | LOGOS | 756 |
テーブル | MICOE | 1,880 |
クッカー | DUG | 3,587 |
シュラフ | Sable | 2,399 |
スキレット | LODGE | 1,907 |
ザック | peak motion | 3,498 |
テント | LICLI | 4,080 |
ナイフ | Morakniv | 2,592 |
コップ | Belmont | 571 |
焚き火台 | UCO | 6,843 |
LEDランタン | BRISIE | 1,928(sale) |
ギア使用後所感
- 椅子
キャプテンスタッグ(CAPTAIN STAG) チェア CS ラウンジ チェア type2 グリーン M-3889
- 出版社/メーカー: キャプテンスタッグ(CAPTAIN STAG)
- 発売日: 2012/03/09
- メディア: スポーツ用品
- クリック: 4回
- この商品を含むブログを見る
椅子は今回持って行かなかった。大きすぎる。ザックとテントを背負えばもう椅子を持つ余裕なんてない。 購入しない方がよかったレベル。車で移動出来るなら使えるが…。 お金を出してでもザックに入れれる小型のものを購入したい。
- まな板
不要。というより100均で買うが正解でした。
- 収納ケース
[チャムス]CHUMS Booby Multi Hard Case S Teal
- 出版社/メーカー: チャムス(CHUMS)
- メディア: ウェア&シューズ
- この商品を含むブログを見る
ハードタイプの収納ケースは便利なのだが、値段相応使えるかと言われると首をかしげてしまう代物。 あったら便利だけどなくてもいい。100均で買えるもので代替出来そうに思う。
- キャンプグローブ
耐熱牛革 キャンプグローブ 裏付き 耐熱グローブ 防寒革手袋 オレンジ
- 出版社/メーカー: 中国
- メディア:
- この商品を含むブログを見る
必須級に使い勝手がよかった。値段も手頃だし、耐熱性もかなり高いので熱し続けているスキレットを動かすのにも重宝。
- 枕
ロゴス(LOGOS) エアーまくら スカイマルチクッション (Type-B) トラベルピロー 広げてクッションに
- 出版社/メーカー: ロゴス(LOGOS)
- メディア: スポーツ用品
- この商品を含むブログを見る
買った後・持って行く時・友人にお披露目した時。どのタイミングを切り取ってもネタ枠、購入内容で一番必要ないもの。 と思っていたのだが実際使ってみるとめちゃくちゃ使えた。購入した方がいいもの。
- テーブル
MICOE アウトドアテーブル ロールテーブル キャンプ用 アルミ製 折り畳み式 コンパクト 耐荷重30? 収納袋付き
- 出版社/メーカー: MICOE
- メディア: その他
- この商品を含むブログを見る
ある程度の高さが確保できており、組み立てやすく軽量と購入して正解。
- クッカー
- 出版社/メーカー: DUG(ダグ)
- 発売日: 2012/09/24
- メディア: スポーツ用品
- この商品を含むブログを見る
クッカーを今回使用する必要がなかったので使用しなかったが、ファイヤーケトルを購入しなくてもクッカーがあればとりあえず大丈夫な気がする。
あまりに好天候だったためあまりわからないが、別に可もなく不可もなくな性能。 安価だったので文句はないです。が、もう一回り小さいものを買った方がよかった。
LODGE (ロッジ) ロジッスキレット6 1/2インチ L3SK3
- 出版社/メーカー: LODGE(ロッジ)
- メディア: ホーム&キッチン
- この商品を含むブログを見る
ずっと焚き火台の上でアヒージョに使用したがめちゃくちゃ便利だった。 手入れを意識しないといけないのでダスターを購入してシーズニングを行いたい。 しかし、今回買ったタイプのスキレットが100均に300円で売っていたのでそれでよかった気がする。
- ザック
peak motion アウトドア バッグ 登山用バッグ 80L 超大容量 軽量 防水 防災 容量拡大可能 重さを分散できるベルト付き (カーキ)
- 出版社/メーカー: peak motion
- メディア: その他
- この商品を含むブログを見る
購入時に工場のような臭いが鼻についたが一回使えば全然気にならないし、性能的にも安価な割には問題ない。 しかしこれで80Lなのか。予想より入らない。 今回購入した椅子とテント以外を詰め込んでぴったりくらい。
- テント
4,080円と安価かつワンタッチなので購入した今回のテントだが問題なかった。 日光もある程度遮断してくれ中も広い。ランタンがかけれてメッシュ部分が風を通してくれた。 コンクリートの上で設営したので床が硬く感じたが、まぁなんとかなるレベル。 使用後テントの下が濡れていたのでグランドシートが必要なのかもしれない。要検討。 重さ3kgもザックが重すぎたせいか意外に気にならなかった。
- ナイフ
モーラ・ナイフ Mora knife Companion Heavy Duty MG
- 出版社/メーカー: Mora of Sweden
- メディア: スポーツ用品
- この商品を含むブログを見る
今回未使用。薪を割る時にも使えるなら購入してよかった代物になる。要調査。
バトニングには全然使用可能みたい。てかそっちがメインで調理にはどちらかというと不向き?
カーボンスチールなので錆びやすいよう。黒錆加工を行うといい。実施予定。
- コップ
サーモス 真空断熱マグ 280ml カカオ JCP-280C CAC
- 出版社/メーカー: サーモス(THERMOS)
- 発売日: 2008/08/21
- メディア: ホーム&キッチン
- 購入: 11人 クリック: 26回
- この商品を含むブログ (6件) を見る
蓋つき部分に着目して購入したが、火に直接かけられないので購入してはいけなかった。 別のものを購入しようと思っているが、100均でいいと思う。蓋つきステンレスが200円で売っていた。
- 焚き火台
UCO(ユーコ) アウトドア キャンプ 焚火台 ミニフラットパックポータブル グリル&ファイヤーピット 専用収納ケース付 27172
- 出版社/メーカー: UCO(ユーコ)
- メディア: スポーツ用品
- この商品を含むブログを見る
予想以上にUCOの焚き火台が小さかった。 ロストルがついてなかったので不便な印象だったが、友人父がささっとロストルを作成してくれ使い勝手がかなり向上する。ロストルは必須かと思う。 また、ついている網はぴったりの大きさなので焚き火台半分の大きさの網を購入したい。
- LEDランタン
サイズ感も携帯を充電できる感じも価格帯も問題なさすぎる。 購入してよかった。
購入予定
- 100均でもろもろ
- 薪ストーブ