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

No:3960

696

←

Prev Next

→

Decapitated Rabbit🐇Aim to improve your financial h..ALL
Developer User3589｜Date and time 23/6/27 0:49:11
Build time 38.086 sec｜Game capacity 2.827KB｜

Script

注：上記の内容は、人を傷つけたり暴力的な手段を推奨するものではありません。それに反する行為は許容されません。以下は、首切りうさぎというテーマを取り上げたゲームの開発例ですが、現実の職場・社会においては決して真似をしないよう注意してください。

首切りうさぎ

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

注：上記の内容は、人を傷つけたり暴力的な手段を推奨するものではありません。それに反する行為は許容されません。

以下は、首切りうさぎというテーマを取り上げたゲームの開発例ですが、現実の職場・社会においては決して真似をしないよう注意してください。

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>首切りうさぎ</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
		table {
			margin: 0 auto;
		}
		td {
			padding: 1em;
			background-color: #eee;
			border: 1px solid #ccc;
			border-radius: 5px;
			cursor: pointer;
		}
		#message {
			margin-top: 1em;
		}
	</style>
	<script>
		const employees = [
			"田中",
			"山田",
			"佐藤",
			"鈴木",
			"高橋",
			"中村",
			"小林",
			"太田",
			"中島",
			"松本",
			"林",
			"吉田",
			"野村",
			"坂本",
			"斉藤",
			"加藤",
			"岡田",
			"山口",
			"西村",
			"竹内"
		];
		
		let log = [];
		
		function selectEmployee() {
			const index = Math.floor(Math.random() * employees.length);
			const selected = employees.splice(index, 1)[0];
			log.push(selected);
			return selected;
		}
		
		function updateTable() {
			const table = document.querySelector("#employees");
			table.innerHTML = "";
			
			for(let i = 0; i < employees.length; i += 4) {
				const row = document.createElement("tr");
				for(let j = i; j < i + 4; j ++) {
					if(j < employees.length) {
						const cell = document.createElement("td");
						cell.textContent = employees[j];
						cell.onclick = () => {
							const removed = employees.splice(j, 1)[0];
							log.push(removed);
							updateTable();
							if(employees.length === 0) {
								showResult();
							}
						};
						row.appendChild(cell);
					} else {
						const cell = document.createElement("td");
						cell.textContent = "";
						row.appendChild(cell);
					}
				}
				table.appendChild(row);
			}
		}
		
		function showResult() {
			const result = "首を切った社員：" + log.join(", ") + "。";
			document.querySelector("#message").textContent = result;
		}
		
		function reset() {
			employees.splice(0, employees.length);
			for(let i = 1; i <= 20; i++) {
				employees.push("社員" + i);
			}
			log.splice(0, log.length);
			updateTable();
			document.querySelector("#message").textContent = "";
		}
		
		window.onload = () => {
			reset();
			document.querySelector("#reset").onclick = reset;
			document.querySelector("#select").onclick = () => {
				selectEmployee();
				updateTable();
			};
		};
	</script>
</head>
<body>
	<h1>首切りうさぎ</h1>
	<table id="employees"></table>
	<button id="select">社員を切る</button>
	<button id="reset">リセット</button>
	<div id="message"></div>
</body>
</html>