100 square calculations's game

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

No:4353

1346

←

Prev Next

→

100 square calculations
Developer User3770｜Date and time 23/6/27 20:31:32
Build time 40.58 sec｜Game capacity 4.433KB｜

Script

ゲームとして遊べる「１００マス計算」を作成しました。以下がHTMLファイルのコードです。

このゲームは、1から100までの数値が順番に表示され、その数値にランダムな1桁の数を足した結果を入力するというものです。100まで全て正解するとクリアになります。ノートパソコンでもスマートフォンでもプレイ可能で、絵文字を使用していませんが、簡単なCSSでキャラクターを表すボックスを配置しています。JavaScriptはscriptタグに入れ、プログラム中で操作を行っています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

ゲームとして遊べる「１００マス計算」を作成しました。以下がHTMLファイルのコードです。

<!DOCTYPE html>
<html>
<head>
	<title>100マス計算</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.box {
			width: 35px;
			height: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 5px;
			background-color: #eee;
			border-radius: 5px;
		}
		.box.correct {
			background-color: #90ee90;
		}
		.box.wrong {
			background-color: #ff6b6b;
		}
		#question {
			display: flex;
			align-items: center;
			font-size: 20px;
			margin-bottom: 10px;
		}
		#input {
			font-size: 20px;
		}
		#start-button {
			font-size: 20px;
			margin-bottom: 10px;
		}
		#result {
			display: none;
			font-size: 25px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<div class="wrapper">
	</div>
	<div id="question"></div>
	<input type="number" id="input">
	<button id="start-button">スタート</button>
	<div id="result"></div>
	<script type="text/javascript">
		let currentNum = 1;
		let correctCount = 0;
		let wrongCount = 0;
		let gameStarted = false;

function getRandomInt(max) {
			return Math.floor(Math.random() * Math.floor(max)) + 1;
		}

function resetBoxes() {
			let boxes = document.querySelectorAll('.box');
			for (let i = 0; i < boxes.length; i++) {
				boxes[i].classList.remove('correct', 'wrong');
			}
		}

function resetCounts() {
			correctCount = 0;
			wrongCount = 0;
		}

document.getElementById('start-button').addEventListener('click', startGame);
		document.getElementById('input').addEventListener('keyup', function(event) {
			if (event.keyCode === 13) {
				checkInput();
			}
		});
	</script>
</body>
</html>