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

No:1539

1261

←

Prev Next

→

sell-through game
Developer User3025｜Date and time 23/6/18 18:18:56
Build time 77.854 sec｜Game capacity 4.816KB｜

Script

セルゲーム

上記は、セルゲームというゲームを実装したHTMLファイルです。JavaScriptを含んでおり、ランダムでセルが生きていたり、死んでいたりするセルオートマトンを作成し、それを操作して遊ぶことができます。画面はスマートフォンに最適化されており、縦25行、横40列のセルで構成されたテーブルが表示されます。セルをタップして遊ぶことができるため、操作はスマートフォンで行うことができます。生きているセルは緑色、死んでいるセルは赤いバツマークが表示されます。また、Startボタンを押すと自動で進み始め、Stopボタンで一時停止、Nextボタンで1段階進めることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>セルゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body{
			background-color: #F5DEB3;
			font-size: 20px;
			text-align: center;
		}
		table{
			margin: auto;
			border-collapse: collapse;
		}
		td{
			width: 50px;
			height: 50px;
			border: 1px solid black;
			font-size: 30px;
		}
		button{
			font-size: 20px;
			margin-top: 10px;
			padding: 10px 20px;
			border: none;
			background-color: #8FBC8F;
			color: white;
			border-radius: 5px;
			cursor: pointer;
		}
		h1{
			margin-top: 30px;
			font-size: 40px;
			color: #5F9EA0;
		}
	</style>
</head>
<body>
	<h1>セルゲーム</h1>
	<table id="board"></table>
	<button onclick="startGame()">Start</button>
	<button onclick="stopGame()">Stop</button>
	<button onclick="nextGeneration()">Next</button>
	<script>
		var rows = 25;
		var cols = 40;
		var playing = false;
		var grid = new Array(rows);
		var nextGrid = new Array(rows);
		var timer;
		createBoard();
		initializeGrids();

function initializeGrids() {
			for (var i = 0; i < rows; i++){
				grid[i] = new Array(cols);
				nextGrid[i] = new Array(cols);
			}
			clearGrids();
			randomGrid();
		}

function clearGrids() {
			for (var i = 0 ; i < rows; i++){
				for (var j = 0; j < cols; j++){
				 	grid[i][j] = false;
				 	nextGrid[i][j] = false;
				}
			}
		}

function randomGrid() {
			for (var i = 0 ; i < rows; i++){
				for (var j = 0; j < cols; j++){
				 	grid[i][j] = (Math.random() < 0.2);
				}
			}
			updateView();
		}

function countNeighbors(row, col) {
			var count = 0;
			if (row - 1 >= 0 && grid[row-1][col]) count++;
			if (row - 1 >= 0 && col - 1 >= 0 && grid[row-1][col-1]) count++;
			if (row - 1 >= 0 && col + 1 < cols && grid[row-1][col+1]) count++;
			if (col - 1 >= 0 && grid[row][col-1]) count++;
			if (col + 1 < cols && grid[row][col+1]) count++;
			if (row + 1 < rows && grid[row+1][col]) count++;
			if (row + 1 < rows && col - 1 >= 0 && grid[row+1][col-1]) count++;
			if (row + 1 < rows && col + 1 < cols && grid[row+1][col+1]) count++;
			return count;
		}

function startGame() {
			playing = true;
			timer = setInterval(function(){
				nextGeneration();
			}, 50);
		}

function stopGame() {
			playing = false;
			clearInterval(timer);
		}

function nextGeneration() {
			updateGrid();
			updateView();
		}
	</script>
</body>
</html>