vue.jsでブラックジャックを作成してみる【解説？】

ブラックジャック解説

ソース全ては前回最後に貼ったbitbucketのソースを見ていただければ。

polymeism.hatenablog.com

ディレクトリ構成

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

chrome.google.com

• AppleStoreアプリ QuickShade

QuickShade

• questbeat
• ユーティリティ
• 無料
• 

apps.apple.com

両方とも使い方は触ればわかるUIになっているのでよい。

あとはF5, F6（Fnキーと同時押しの可能性もあり）でキーボードの明るさもついでに下げるとよいかも。

目が疲れやすい方の少しでも役に立てれば。

vue.jsでブラックジャックを作成してみる

ルール

ブラックジャックの流れとルール

ブラックジャックは、ディーラーとプレイヤーにカードが配られ、その合計値が「21」に近い方が勝ちというカードゲームです。

ルールも簡単で、なるべく21に近づけ、21を超えないようにカードを引くことが基本ルールです。

＜ブラックジャック基本ルール＞

• ディーラーとプレイヤー全員に２枚ずつカードが配られる
• 自分のカードの合計値が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で同じ状況の人を発見

stackoverflow.com

解決

結論から言うとvagrantのバージョンが低かった。 vagrant 2.2.5からvagrant2.2.6にあげると表題エラーは発生せずに無事vagrantの起動が完了した。

新しいmacを購入した時に行ったこと【webエンジニア】

[mac]初期化

ダウンロード

• chrome
• Evernote
• Bootsnote（Dropboxから過去のメモを共有）
• VSCode
  • PHP Intelephenseとvue extentionとGitLens辺りを入れておけばひとまず。
• Homebrew
  • openssl
  • mysql
  • nodebrew
    • node
    • npm
  • PHP7.3
• composer
  • global require laravel/installer
• git
• sourcetree（アカウント設定：bitbucket, git todo git ssh）
• Vagrant
• VirtualBox
• .vimrc

設定

• システム環境設定 > キーボード > ユーザー辞書タブ > スマート引用符とスマートダッシュを使用 をOFF
• メインに使用しているgmailとchromeを同期
• トラックパッドのシングルタップでクリック
• トラックパッドの速さを最速に
• メニューの右上、文字が出てるヤツ > ライブ変換をOFF
• Finder -> ファイルの拡張子を表示する
• システム環境設定 -> ファイヤーウォールON
• Finder -> 表示 -> パスバーの表示
• .bashrcと.bash_profileの作成

ビンゴ判定プログラム

概要

ビンゴ判定って難しくない？難しくなくない？なんて頭をもたげたので書いてみる。

神のような友人は、「ん？簡単やんけ？死にたいんかお前」とおっしゃっておられました。

チェック系は特にやってないので動かしてみる人はその辺り念頭に置いていただければ。

ソース

• 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) 木製 食器 まな板 角型カッティングボード 39cm ウッドブレス UP-2558

不要。というより100均で買うが正解でした。

• 収納ケース

[チャムス]CHUMS Booby Multi Hard Case S Teal

ハードタイプの収納ケースは便利なのだが、値段相応使えるかと言われると首をかしげてしまう代物。 あったら便利だけどなくてもいい。100均で買えるもので代替出来そうに思う。

• キャンプグローブ

耐熱牛革 キャンプグローブ 裏付き 耐熱グローブ 防寒革手袋 オレンジ

必須級に使い勝手がよかった。値段も手頃だし、耐熱性もかなり高いので熱し続けているスキレットを動かすのにも重宝。

• 枕

ロゴス(LOGOS) エアーまくら スカイマルチクッション (Type-B) トラベルピロー 広げてクッションに

買った後・持って行く時・友人にお披露目した時。どのタイミングを切り取ってもネタ枠、購入内容で一番必要ないもの。 と思っていたのだが実際使ってみるとめちゃくちゃ使えた。購入した方がいいもの。

• テーブル

MICOE アウトドアテーブル ロールテーブル キャンプ用 アルミ製 折り畳み式 コンパクト 耐荷重30? 収納袋付き

ある程度の高さが確保できており、組み立てやすく軽量と購入して正解。

• クッカー

DUG(ダグ) 焚火缶 3点セット DG-0103

クッカーを今回使用する必要がなかったので使用しなかったが、ファイヤーケトルを購入しなくてもクッカーがあればとりあえず大丈夫な気がする。

• シュラフ

Sable 寝袋 シュラフ 封筒型 長さ225×幅75cm 最低使用温度-5度 軽量 防水 アウトドア 登山 キャンプ 車中泊 防災避難用 丸洗い可 収納袋付き ブルー SA-PS046 (ブルー)

あまりに好天候だったためあまりわからないが、別に可もなく不可もなくな性能。 安価だったので文句はないです。が、もう一回り小さいものを買った方がよかった。

• スキレット

LODGE (ロッジ) ロジッスキレット6 1/2インチ L3SK3

ずっと焚き火台の上でアヒージョに使用したがめちゃくちゃ便利だった。 手入れを意識しないといけないのでダスターを購入してシーズニングを行いたい。 しかし、今回買ったタイプのスキレットが100均に300円で売っていたのでそれでよかった気がする。

• ザック

peak motion アウトドア バッグ 登山用バッグ 80L 超大容量 軽量 防水 防災 容量拡大可能 重さを分散できるベルト付き (カーキ)

購入時に工場のような臭いが鼻についたが一回使えば全然気にならないし、性能的にも安価な割には問題ない。 しかしこれで80Lなのか。予想より入らない。 今回購入した椅子とテント以外を詰め込んでぴったりくらい。

• テント

LICLI テント ワンタッチ 2人用 ? 4人用 ロープ ペグ 付き 軽量 アウトドア キャンプ用品 簡単 設営 「 登山 運動会 ツーリング 防災 」「 コンパクト 一人用 」「 防水 防風 UVカット 」 5カラー 210×210×135cm (ブルー)

4,080円と安価かつワンタッチなので購入した今回のテントだが問題なかった。 日光もある程度遮断してくれ中も広い。ランタンがかけれてメッシュ部分が風を通してくれた。 コンクリートの上で設営したので床が硬く感じたが、まぁなんとかなるレベル。 使用後テントの下が濡れていたのでグランドシートが必要なのかもしれない。要検討。 重さ3kgもザックが重すぎたせいか意外に気にならなかった。

• ナイフ

モーラ・ナイフ Mora knife Companion Heavy Duty MG

今回未使用。薪を割る時にも使えるなら購入してよかった代物になる。要調査。 バトニングには全然使用可能みたい。てかそっちがメインで調理にはどちらかというと不向き？ カーボンスチールなので錆びやすいよう。黒錆加工を行うといい。実施予定。

• コップ

サーモス 真空断熱マグ 280ml カカオ JCP-280C CAC

蓋つき部分に着目して購入したが、火に直接かけられないので購入してはいけなかった。 別のものを購入しようと思っているが、100均でいいと思う。蓋つきステンレスが200円で売っていた。

• 焚き火台

UCO(ユーコ) アウトドア キャンプ 焚火台 ミニフラットパックポータブル グリル&ファイヤーピット 専用収納ケース付 27172

予想以上にUCOの焚き火台が小さかった。 ロストルがついてなかったので不便な印象だったが、友人父がささっとロストルを作成してくれ使い勝手がかなり向上する。ロストルは必須かと思う。 また、ついている網はぴったりの大きさなので焚き火台半分の大きさの網を購入したい。

• LEDランタン

BRISIE LEDランタン 暖色 電球色 USB充電式 モバイルバッテリー IP65 防水&防塵 5つ調光モード マグネット式 アウトドア＆防災用品 【196ルーメン/連続点灯50時間】

サイズ感も携帯を充電できる感じも価格帯も問題なさすぎる。 購入してよかった。

購入予定

• 100均でもろもろ
• 薪ストーブ