定義
・ジョーカーを引いたら負け
・ランダム関数でカードを出力
・ユーザー1と2が交互にトランプを引いていく
・3枚まではジョーカーが出ない
・出たカードを真ん中に縦で並べていく
・リセットボタンも作成
使うものは連想配列(オブジェクト)、dom
補足
今回はあまりリッチなものにしない
順番に押せばゲームが出来る
ランダン関数で同じ番号が出たら関数内で再度引き直す
どっちがカードを出したかわかるようにして別途で順番を表記しない
カードをひっくり返した毎にそのカードの数字を配列に追加して、その配列と照らし合わせて重複を確認
重複したら自動的に引き直す
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>jokergame</title>
</head>
<body>
<div>
<button>ユーザー1</button>
<button>リセットボタン</button>
<button>ユーザー2</button>
</div>
<p id="game-log">ハート6</p>
<p>ハート6</p>
<script src="./index.js"></script>
</body>
</html>
div {
display: flex;
justify-content: space-around;
}
p {
display: flex;
justify-content: center;
}
組んでみたロジック
const trump = {
1: "♠1",
2: "♠2",
3: "♠3",
4: "♠4",
5: "♠5",
6: "♠6",
7: "♠7",
8: "♠8",
9: "♠9",
10: "♠10",
11: "♠11",
12: "♠12",
13: "♠13",
14: "♥1",
15: "♥2",
16: "♥3",
17: "♥4",
18: "♥5",
19: "♥6",
20: "♥7",
21: "♥8",
22: "♥9",
23: "♥10",
24: "♥11",
25: "♥12",
26: "♥13",
27: "♦1",
28: "♦2",
29: "♦3",
30: "♦4",
31: "♦5",
32: "♦6",
33: "♦7",
34: "♦8",
35: "♦9",
36: "♦10",
37: "♦11",
38: "♦12",
39: "♦13",
40: "♣1",
41: "♣2",
42: "♣3",
43: "♣4",
44: "♣5",
45: "♣6",
46: "♣7",
47: "♣8",
48: "♣9",
49: "♣10",
50: "♣11",
51: "♣12",
52: "♣13",
53: "ジョーカーやで＾＿＾",
}
var randoms = []
var turn = 0
var GameLog = document.getElementById('game-log')
function opencard(user) {
var card = Math.floor(Math.random() * 53 + 1)
var num=document.createElement('p')
num.innerHTML = user + ':' + trump[card]
if (user === 'user1') {
num.style.color='red'
} else {
num.style.color='blue'
}
GameLog.appendChild(num)
if (card == 53) {
if (turn < 3) {
alert('まだ試合を終えるには早すぎる')
num.remove()
} else {
alert(user+' lose!!!!!!!!!!!!!!!!!!!!!!')
}
}
for (var i = 0; i < randoms.length; i++){
if (randoms[i] == card) {
num.remove()
turn = turn-1
}
}
randoms.push(card)
turn = turn + 1
}
function reset() {
turn = 0
randoms = []
while (GameLog.firstChild) GameLog.removeChild(GameLog.firstChild);
}