AI game creator

Click here for free DL of the app version that can save data.

No:841

404

←

Prev Next

→

Mahjong Games
Developer User3159｜Date and time 23/6/17 20:14:38
Build time 78.488 sec｜Game capacity 6.282KB｜

Script

1️⃣

2️⃣

3️⃣

4️⃣

5️⃣

6️⃣

7️⃣

8️⃣

9️⃣

🀇

🀈

🀉

🀊

🀋

🀌

🀍

🀎

🀏

🀙

🀚

🀛

🀜

🀝

🀞

🀟

🀠

🀡

🀐

🀑

🀒

🀓

🀔

🀕

🀖

🀗

🀘

得点: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>麻雀ゲーム</title>
	<style>
		*{
			box-sizing: border-box;
		}

body{
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

.container{
			display: flex;
			flex-wrap: wrap;
			max-width: 500px;
			margin: 0 auto;
			padding: 20px;
		}

.tile{
			background-color: white;
			border: 1px solid black;
			width: 70px;
			height: 100px;
			font-size: 40px;
			margin: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			user-select: none;
		}

.active{
			background-color: green;
			color: white;
		}

.score{
			font-size: 20px;
			margin: 10px 0;
		}

.control{
			display: flex;
			justify-content: center;
			margin: 20px 0;
		}

.btn{
			padding: 10px 20px;
			margin: 0 10px;
			background-color: blue;
			color: white;
			font-size: 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			user-select: none;
		}

.btn:hover{
			background-color: darkblue;
		}

.message{
			font-size: 24px;
			margin: 10px 0;
			text-align: center;
		}

</style>
</head>

<body>

var tiles = [];
		var selectedTiles = [];
		var score = 0;
		var msg = document.getElementById("msg");
		var scoreEl = document.getElementById("score");

// 麻雀牌の配列を生成
		function generateTiles(){
			for(var i=0; i<4; i++){
				for(var j=1; j<=9; j++){
					tiles.push(j);
					if(j == 1){
						tiles.push("東");
						tiles.push("南");
						tiles.push("西");
						tiles.push("北");
						tiles.push("白");
						tiles.push("発");
						tiles.push("中");
					}
				}
			}
		}

// 配牌を行う
		function dealTiles(){
			// 配列をシャッフルする
			tiles = shuffleTiles(tiles);

// 手牌の配列を初期化する
			selectedTiles = [];

// 14枚の牌を手牌に加える
			for(var i=0; i<14; i++){
				var tile = tiles.pop();
				selectedTiles.push(tile);
			}

// 手牌を表示する
			displayTiles(selectedTiles);

// メッセージを表示する
			msg.innerHTML = "配牌が終わりました。";
		}

// 配列をシャッフルする
		function shuffleTiles(tiles){
			for(var i=tiles.length-1; i>=0; i--){
				var j = Math.floor(Math.random() * (i+1));
				var temp = tiles[i];
				tiles[i] = tiles[j];
				tiles[j] = temp;
			}
			return tiles;
		}

// 指定された配列を表示する
		function displayTiles(tiles){
			var container = document.querySelector(".container");
			container.innerHTML = "";
			for(var i=0; i<tiles.length; i++){
				var tile = tiles[i];
				var tileEl = document.createElement("div");
				tileEl.className = "tile";
				tileEl.dataset.value = tile;
				tileEl.innerHTML = tile;
				tileEl.addEventListener("click", selectTile);
				container.appendChild(tileEl);
			}
		}

// 牌を選択する
		function selectTile(){
			var tileEl = this;
			var tileValue = tileEl.dataset.value;
			if(tileEl.classList.contains("active")){
				tileEl.classList.remove("active");
				selectedTiles.splice(selectedTiles.indexOf(tileValue), 1);
			}else{
				tileEl.classList.add("active");
				selectedTiles.push(tileValue);
			}
		}

// リセットする
		function reset(){
			tiles = [];
			selectedTiles = [];
			score = 0;
			scoreEl.innerHTML = score;
			displayTiles(tiles);
			msg.innerHTML = "リセットしました。";
		}

// 結果を出力する
		function showResult(){
			if(selectedTiles.length != 14){
				msg.innerHTML = "手牌が14枚ではありません。";
				return;
			}
			// ここに役の判定処理を実装する
			score = Math.floor(Math.random() * 10) * 1000;
			scoreEl.innerHTML = score;
			msg.innerHTML = "得点は" + score + "点です。";
		}

// スマホでも操作しやすくするため、タッチイベントを追加する
		document.addEventListener("touchstart", function(){});

// 実行する
		generateTiles();
		displayTiles(tiles);

// ボタンにクリックイベントを追加する
		document.getElementById("dealBtn").addEventListener("click", dealTiles);
		document.getElementById("resetBtn").addEventListener("click", reset);
		document.getElementById("scoreBtn").addEventListener("click", showResult);

</script>

</body>
</html>