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

No:3428

5107

←

Prev Next

→

Proof of the Devil
Developer anonymous｜Date and time 70/1/1 10:24:50
Build time unknown sec｜Game capacity 5.09KB｜

Script

悪魔の証明

悪魔から証明書を取り戻すために、魔法陣の中の数字を選んで合計値を100にするゲームです。

←

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>
</head>
<body>
	<h1>悪魔の証明</h1>
	<p>悪魔から証明書を取り戻すために、魔法陣の中の数字を選んで合計値を100にするゲームです。</p>
	<div id="grid"></div>
	<div id="buttons">
		<button id="new-game">🌲 New Game</button>
		<button id="submit">✔ Submit</button>
	</div>
	<p id="message"></p>

// 1から9の数字をランダムに10個生成し、numbers配列に格納
				for (var i = 0; i < 10; i++) {
					this.numbers.push(Math.floor(Math.random() * 9) + 1);
				}

// ゲーム盤の生成
				var grid = "";
				for (var i = 0; i < 10; i++) {
					grid += '<div class="number" id="number-' + i + '">' + this.numbers[i] + '</div>';
				}
				document.getElementById("grid").innerHTML = grid;

// ボタンのイベントリスナーを登録
				document.getElementById("new-game").addEventListener("click", this.init.bind(this));
				document.getElementById("submit").addEventListener("click", this.submit.bind(this));

// ボタンの初期状態を設定
				document.getElementById("submit").disabled = true;

// メッセージを初期化
				document.getElementById("message").innerHTML = "";

// ナビゲーションバーを隠す
				window.scrollTo(0,1);
			},

// 数字の選択
			select: function(index) {
				// 前に選択された数字のスタイルを戻す
				if (this.selected !== null) {
					document.getElementById("number-" + this.selected).classList.remove("selected");
				}

// 新しい数字を選択
				this.selected = index;
				document.getElementById("number-" + index).classList.add("selected");

// ボタンの有効/無効を切り替える
				document.getElementById("submit").disabled = this.guesses.length == 0;
			},

// 数字の入力
			input: function(value) {
				// 選択された数字の値を書き換える
				this.numbers[this.selected] = value;
				document.getElementById("number-" + this.selected).innerHTML = value;

// 選択を解除する
				document.getElementById("number-" + this.selected).classList.remove("selected");
				this.selected = null;

// ボタンの有効/無効を切り替える
				document.getElementById("submit").disabled = this.guesses.length == 0;
			},

// 数字の入力を取り消す
			undo: function() {
				// 直近の入力を取り消す
				var guess = this.guesses.pop();
				this.numbers[guess.index] = guess.value;
				document.getElementById("number-" + guess.index).innerHTML = guess.value;

// 選択された数字を再度選択
				this.select(guess.index);

// ボタンの有効/無効を切り替える
				document.getElementById("submit").disabled = this.guesses.length == 0;
			},

// 現在の状態を提示
			prompt: function() {
				// 数字の合計値を計算
				var total = 0;
				for (var i = 0; i < 10; i++) {
					total += this.numbers[i];
				}

// メッセージを表示
				if (total == 100) {
					document.getElementById("message").innerHTML = "🎉 Congratulations! You got the certificate back!";
				} else {
					document.getElementById("message").innerHTML = "👿 Oops! The demon seems unhappy...";
				}
			},

// 提出
			submit: function() {
				// 選択された数字と入力された数字を記録
				var guess = {
					index: this.selected,
					value: parseInt(prompt("Input the number:"))
				};
				this.guesses.push(guess);

// 数字の入力を行う
				this.input(guess.value);

// 現在の状態を提示
				this.prompt();
			}
		};

// ゲームの開始
		game.init();
	</script>

h1, p, #message {
			text-align: center;
		}

#grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 32px 0;
		}

.number {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 48px;
			width: 64px;
			height: 64px;
			margin: 8px;
			border: 2px solid #CCC;
			border-radius: 8px;
			cursor: pointer;
			transition: all ease-out 0.1s;
		}

.number:hover {
			box-shadow: 0 0 4px #AAA;
		}

.selected {
			background-color: #6AE;
			color: #FFF;
		}

#buttons {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 32px 0;
		}

button {
			font-size: 24px;
			padding: 8px 16px;
			margin: 0 16px;
			border-radius: 8px;
			cursor: pointer;
			transition: all ease-out 0.1s;
		}

button:hover {
			box-shadow: 0 0 4px #AAA;
			transform: scale(1.1);
		}

button:active {
			transform: scale(0.9);
			box-shadow: none;
		}

button:disabled {
			opacity: 0.5;
			cursor: default;
		}
	</style>
</body>
</html>