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

16566 ワード
ゲーム制作 HTML JavaScript jQuery 初心者 HTML テキストリンク

はじめに

自身の記録用です、ご了承ください。

コードはGitHubへ⇒GitHub

使用したのは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の熱い展開が起きてすごくざわざわします。

細かいルールが気になる方は以下をご参照ください！
ワンポーカーのルール

こんな感じに出来ました

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

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

  • スタート画面
    シンプルでかっこいいですねぇ（自画自賛）

  • プレイ画面①
    素人感が全面に出ていますね。

  • プレイ画面②
    そうです、いらすとやさんです。

  • プレイ画面③

  • ゲームオーバー（負け）
    完全に小ネタなのですが、「GameOver」の文字をfadeInさせる時間を “4444”msにすると すごく味のある雰囲気になりましたので、ここでジンクスを生み出したいと思います。
    怖い感じのフェードインにしたいときは、ぜひご活用ください。

中身を一部紹介

デッキのシャッフル

カードをシャッフルする関数になります！いろんなところで使えるんじゃないかなぁと思います。

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が一番強いのでそれにのみ注意します。

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にするとうまくいかず、一切見えませんでした。
この辺よく分からないので、詳しい方ぜひコメント欄にお願いします。

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

});
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に記載しておりますのでぜひご参照ください。）
常にゲームのステータスをチェックするするやり方が分からなかったので、setIntervalで2秒ごとにチェックする方法を取りました。ゲームのステータスをチェックし、それに対応したフラッグを立てて、次の動作を決定する、という流れになります。

画面遷移

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

<div class="titlezone"><p class="longshadow" onclick="location.href='./onePokerGame.html'">♠ One Poker ♠</p></div>

JavaScriptで画面遷移を指定する方法。

location.replace('./onePokerEnd.html');

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

$(function(){
            $("html").onclick(location.href='./onePokerMenu.html');
        });

jQueryによるアニメーション

こちらはゲームオーバーの画面のfadeIn処理になります。
怖い感じのフェードイン、4444msです。 覚えて帰ってくださいね。

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

今後の展望

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

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

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