Mincraft but make it simpler's game

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

No:2371

1746

←

Prev Next

→

Mincraft but make it simpler
Developer User3549｜Date and time 23/6/21 2:48:39
Build time 24.113 sec｜Game capacity 2.108KB｜

Script

Here is an example program for a simple Minecraft-like game that is implemented as a single HTML file and includes JavaScript code:

This program creates a canvas element and uses JavaScript to draw a grid of grass blocks on it. When the user clicks on a block, it toggles between grass and dirt. There are no enemies or other players, but the user can interact with the world and shape it to their liking.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Here is an example program for a simple Minecraft-like game that is implemented as a single HTML file and includes JavaScript code:

<!DOCTYPE html>
<html>
<head>
	<title>SimpleCraft</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #66CCFF;
		}
		#canvas {
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var BLOCK_SIZE = 32;
		var SCREEN_WIDTH = Math.floor(window.innerWidth / BLOCK_SIZE);
		var SCREEN_HEIGHT = Math.floor(window.innerHeight / BLOCK_SIZE);
		var world = [];

// initialize world with grass blocks
		for (var y = 0; y < SCREEN_HEIGHT; y++) {
			world[y] = [];
			for (var x = 0; x < SCREEN_WIDTH; x++) {
				world[y][x] = 'grass';
			}
		}

function drawBlock(x, y, type) {
			switch (type) {
				case 'grass':
					ctx.fillStyle = '#99CC00';
					break;
				case 'dirt':
					ctx.fillStyle = '#CC9933';
					break;
				default:
					ctx.fillStyle = '#CCCCCC';
			}
			ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
		}

function renderWorld() {
			for (var y = 0; y < SCREEN_HEIGHT; y++) {
				for (var x = 0; x < SCREEN_WIDTH; x++) {
					drawBlock(x, y, world[y][x]);
				}
			}
		}

// render world on initial load
		renderWorld();

// handle click events on the canvas
		canvas.addEventListener('click', handleClick);
	</script>
</body>
</html>