はじめに
自身の記録用です、ご了承ください。
コードは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にすると すごく味のある雰囲気になりましたので、ここでジンクスを生み出したいと思います。
怖い感じのフェードインにしたいときは、ぜひご活用ください。
中身を一部紹介
デッキのシャッフル
カードをシャッフルする関数になります！いろんなところで使えるんじゃないかなぁと思います。
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が一番強いのでそれにのみ注意します。
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にするとうまくいかず、一切見えませんでした。
この辺よく分からないので、詳しい方ぜひコメント欄にお願いします。
$(function(){
$('#pl1_up1,#pl1_down1,#pl1_up2,#pl1_down2').hide().fadeIn(2500);
});
<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点を改善していきたいと思っております。
- ゲーム画面のデザインを改善。
- ダイアログのポップアップを作成。