ざわざわするゲーム「ワン・ポーカー」を再現してみた。

# はじめに
自身の記録用です、ご了承ください。

コードはGitHubへ⇒[GitHub](https://github.com/bigsugarG/One-Poker)

使用したのはJS、JQuery、HTML/CSSです。
完全ローカルです。

# ワン・ポーカーについて
皆さん漫画カ〇ジに出てくる「ワン・ポーカー」というトランプゲームをご存知でしょうか。

知らない方も多いと思うので、簡単に説明しますと、
**たった2枚の手札から1枚を場に出し、レートが強い方が勝ち**
という変則ルールのポーカーです。
レートは、Aが最強で2が最弱ですが、**2だけがAに勝つことが出来ます**。

もちろん他にもルールがいくつかあります。最も特徴的なのはランプが点灯することで
**お互いの手札の強さが知らされている状態で戦う**
という点でしょう。

>手札の内容がUPを意味するA-8、DOWNを意味する7-2をランプで対戦相手に知らせる。
UPが二つとも点灯すれば全てA-8、DOWNが二つとも点滅した場合は全て7-2、両方一つずつの場合は一枚がA-8、もう一枚が7-2となる。

互いに相手のランプを見てレートを考慮し、相手の手を読んでいくわけです。原作では、A vs 2の熱い展開が起きて**すごくざわざわ**します。

細かいルールが気になる方は以下をご参照ください！
[ワンポーカーのルール](https://dic.pixiv.net/a/%E3%83%AF%E3%83%B3%E3%83%BB%E3%83%9D%E3%83%BC%E3%82%AB%E3%83%BC)

# こんな感じに出来ました
さて、実際に作ってみたのですが、マザーソフィー（原作内でゲームを仕切るマシーン）の機能としてはおおむね再現できたんじゃないかなと思ってます！が、ファンの方などおられましたら、どうか細かいところまではご勘弁ください🙏💧

デザインは完全に個人の趣味です。

- スタート画面
シンプルでかっこいいですねぇ（自画自賛）
![2020-04-09 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598885/ca0be48d-a2f2-6234-cd00-f773eb044281.png)

- プレイ画面①
素人感が全面に出ていますね。
![2020-04-09 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598885/96a6cbac-6ed6-e618-0444-2a62879eae6d.png)

- プレイ画面②
そうです、いらすとやさんです。
![2020-04-09 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598885/238ccb2a-bce7-a0b2-f3cd-1440ce6989c8.png)

- プレイ画面③
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598885/d9aed0a1-91f6-38de-1250-adf4396ba683.png)


- ゲームオーバー（負け）
完全に小ネタなのですが、「GameOver」の文字をfadeInさせる時間を **“4444”ms**にすると **すごく味のある雰囲気**になりましたので、ここでジンクスを生み出したいと思います。
怖い感じのフェードインにしたいときは、ぜひご活用ください。
![2020-04-09 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598885/96c37d10-d566-8293-dcd1-f27f7d37e436.png)


# 中身を一部紹介
#### デッキのシャッフル
カードをシャッフルする関数になります！いろんなところで使えるんじゃないかなぁと思います。

```javascript:onePoker.js
var shuffledDeck = []; //試合に使うデッキ

function shuffleCard(){ //シャッフルする関数
    var numberData = [1,2,3,4,5,6,7,8,9,10,11,12,13]; //トランプで使う1~13の数字を用意

    alert("Mother Sophie is Setting Cards...");

    for(i=0;i<4;i++){ //スート4種類分なので
        numberData.sort(() => Math.random() - 0.5); //まずは1~13までをシャッフル
        for(j=0;j<numberData.length;j++){ //順番にデッキに入れていく
            shuffledDeck.push(numberData[j]);
        }
    }

    shuffledDeck.sort(() => Math.random() - 0.5);
//4×13枚入れ終わったデッキをシャッフルする（この動作をしないと1~13のセットが分かれたままになってしまうので注意！）

//以下はシャッフルには関係が無く、残りライフを表示している
    for(i=0;i<pl1Totalpoint;i++){
        document.getElementById("life_gage").insertAdjacentText("beforeend","👸");
    }    
    for(i=0;i<pl2Totalpoint;i++){
        document.getElementById("life_gage2").insertAdjacentText("beforeend","👸");
    }
//beforeendを指定することで手前から1個ずつ詰めて入れているイメージ

    getCard(1); //プレイヤーごとにカードを引いています
    getCard(2);
}

```
#### ランプの点灯
どちらも同じなので、プレイヤー1の方のランプ表示を紹介します。
まずは引いたカードのUPかDOWNかを判定してランプの色を変える関数です。Aが一番強いのでそれにのみ注意します。

```javascript:onePoker.js
function lanpSwitch(){
    if(lanpFlag==true){
        if(pl1CardF<8&&pl1CardF!==1){
            document.getElementById("pl1_down1").style.backgroundColor = 'blue';
        }else{
            document.getElementById("pl1_up1").style.backgroundColor = 'red';
        }
        if(pl1CardS<8&&pl1CardS!==1){
            document.getElementById("pl1_down2").style.backgroundColor = 'blue';
        }else{
            document.getElementById("pl1_up2").style.backgroundColor = 'red';
        }
    }
}
```
次はボタンがうっすら登場するためのアニメーションですが、正直完全にはうまくいきませんでした。
CSSの方でランプをdisplay:noneにしてfadeInさせてるんですが、なぜか最初からぼんやり見えてるんですよね😇
ちなみに、**jQueryのfadeInのアニメーションはdisplay値にのみ対応**（？）しているみたいで、**visiblity:hiddenにするとうまくいかず**、一切見えませんでした。
この辺よく分からないので、詳しい方ぜひコメント欄にお願いします。

```javascript:onePokerQuery.js
$(function(){
 
 $('#pl1_up1,#pl1_down1,#pl1_up2,#pl1_down2').hide().fadeIn(2500);

});
```
```html:onePokerGame.html
        <div id="player1_light">
            <button id="pl1_up1">UP</button> 
            <button id="pl1_down1">DOWN</button>
            <button id="pl1_up2">UP</button>
            <button id="pl1_down2">DOWN</button>
        </div>

```

#### カードオープンまでのやりとり
コードを載せるには少々ごみごみしすぎているので割愛します。（もしも気になる方がおられましたら[GitHub](https://github.com/bigsugarG/One-Poker)に記載しておりますのでぜひご参照ください。）
常にゲームのステータスをチェックするするやり方が分からなかったので、**setIntervalで2秒ごとにチェックする**方法を取りました。ゲームのステータスをチェックし、それに対応したフラッグを立てて、次の動作を決定する、という流れになります。

#### 画面遷移
タイトル画面において、タイトルの要素をクリックしたときにゲーム画面に遷移する方法。
**onclick="location.href='XXXXXX'"** で遷移できます！

```html
<div class="titlezone"><p class="longshadow" onclick="location.href='./onePokerGame.html'">♠ One Poker ♠</p></div> 
```
JavaScriptで画面遷移を指定する方法。

```javascript
location.replace('./onePokerEnd.html');
```
適当に書いたら上手くいったjQueryの画面遷移。onclickを指定していますが、要素がhtmlだからか、このコードに辿り着いた瞬間に遷移が行われました。

```javascript
$(function(){
            $("html").onclick(location.href='./onePokerMenu.html');
        });
```
#### jQueryによるアニメーション
こちらはゲームオーバーの画面のfadeIn処理になります。
**怖い感じのフェードイン、4444msです。** 覚えて帰ってくださいね。

```javascript
$(function() {
    $('#text,#subtext').hide().fadeIn(4444);
});
```


# 今後の展望

拙い投稿を最後まで見ていただきありがとうございました！

今後は主に以下の2点を改善していきたいと思っております。

- ゲーム画面のデザインを改善。
- ダイアログのポップアップを作成。