A game where you can mine k○ll monster get materials from minerals and monster and broken trees and get at the beginning of the game from a chest the mixing stick a tool that can merge tools and creatures and a creature and a tool with pixel graphics.'s game

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

No:2670

2600

←

Prev Next

→

A game where you can mine k○ll monster get materia..ALL
Developer User3408｜Date and time 23/6/22 8:44:47
Build time 96.688 sec｜Game capacity 6.18KB｜

Script

y emojis.

⛏️

🪓

🗡️

👹

🌳

⛰️

🤖

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

y emojis.

<!DOCTYPE html>
<html>
<head>
	<title>Minería & Monstruos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #eee;
			font-family: sans-serif;
			text-align: center;
		}

#canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
		}

#inventory {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
		}

#inventory .tool {
			margin: 0 10px;
			font-size: 30px;
			cursor: pointer;
		}

.monster {
			font-size: 50px;
			cursor: pointer;
		}

#resources {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
		}

#resources .resource {
			margin: 0 10px;
			font-size: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body onload="start()">
	<canvas id="canvas" width="400" height="400"></canvas>
	<div id="inventory">
		<div class="tool" id="pickaxe">⛏️</div>
		<div class="tool" id="axe">🪓</div>
		<div class="tool" id="sword">🗡️</div>
		<div class="monster" id="monster">👹</div>
	</div>
	<div id="resources">
		<div class="resource" id="wood">🌳</div>
		<div class="resource" id="stone">⛰️</div>
		<div class="resource" id="iron">🤖</div>
	</div>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var grid = [];
		var tileSize = 40;
		var player = {
			x: 0,
			y: 0,
			tool: "",
			materials: {
				wood: 0,
				stone: 0,
				iron: 0
			}
		};
		var monsters = [
			{ emoji: "👹", x: 1, y: 1 },
			{ emoji: "👻", x: 2, y: 4 },
			{ emoji: "🧟", x: 5, y: 5 }
		];

function start() {
			// Generate grid
			for (var i = 0; i < canvas.width / tileSize; i++) {
				grid[i] = [];
				for (var j = 0; j < canvas.height / tileSize; j++) {
					grid[i][j] = "grass";
				}
			}

// Place initial resources
			grid[2][2] = "tree";
			grid[4][3] = "rock";
			grid[6][4] = "iron_ore";

// Place player
			player.x = Math.floor(Math.random() * (canvas.width / tileSize));
			player.y = Math.floor(Math.random() * (canvas.height / tileSize));

draw();
		}

function draw() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw grid
			for (var i = 0; i < canvas.width / tileSize; i++) {
				for (var j = 0; j < canvas.height / tileSize; j++) {
					switch (grid[i][j]) {
						case "grass":
							ctx.fillStyle = "#7CFC00";
							break;
						case "tree":
							ctx.fillStyle = "#8B4513";
							break;
						case "rock":
							ctx.fillStyle = "#696969";
							break;
						case "iron_ore":
							ctx.fillStyle = "#D3D3D3";
							break;
						default:
							ctx.fillStyle = "#7CFC00";
							break;
					}
					ctx.fillRect(i * tileSize, j * tileSize, tileSize, tileSize);
				}
			}

// Draw player
			ctx.fillStyle = "#fff";
			ctx.fillText("😃", player.x * tileSize, player.y * tileSize);

// Draw monsters
			for (var i = 0; i < monsters.length; i++) {
				ctx.fillStyle = "#fff";
				ctx.fillText(monsters[i].emoji, monsters[i].x * tileSize, monsters[i].y * tileSize);
			}
		}

getResource();
			getMonster();
			draw();
		}

function getResource() {
			switch (grid[player.x][player.y]) {
				case "tree":
					player.materials.wood++;
					grid[player.x][player.y] = "grass";
					break;
				case "rock":
					player.materials.stone++;
					grid[player.x][player.y] = "grass";
					break;
				case "iron_ore":
					player.materials.iron++;
					grid[player.x][player.y] = "grass";
					break;
			}
			updateInventory();
		}

function getMonster() {
			for (var i = 0; i < monsters.length; i++) {
				if (player.x == monsters[i].x && player.y == monsters[i].y) {
					fightMonster(monsters[i]);
					break;
				}
			}
		}

function selectTool(event) {
			player.tool = event.target.id;
			var tools = document.querySelectorAll(".tool");
			for (var i = 0; i < tools.length; i++) {
				tools[i].classList.remove("active");
			}
			event.target.classList.add("active");
		}

function spawnMonster() {
			var monster = {
				emoji: "👾",
				x: Math.floor(Math.random() * (canvas.width / tileSize)),
				y: Math.floor(Math.random() * (canvas.height / tileSize))
			};
			monsters.push(monster);
			draw();
		}

document.addEventListener("keydown", move);
		var tools = document.querySelectorAll(".tool");
		for (var i = 0; i < tools.length; i++) {
			tools[i].addEventListener("click", selectTool);
		}
		var resources = document.querySelectorAll(".resource");
		for (var i = 0; i < resources.length; i++) {
			resources[i].addEventListener("click", getResource);
		}
		document.getElementById("monster").addEventListener("click", spawnMonster);
	</script>
</body>
</html>