Play Minecraft in Your Browser: Simple HTML Game
<html>
<head>
<title>Play Minecraft in Your Browser: Simple HTML Game</title>
</head>
<body>
<h1>Welcome to the Minecraft HTML Game!</h1>
<h2>Instructions:</h2>
<p>
You are a miner in the world of Minecraft and you need to collect as many blocks as possible. You will have to move around the map and collect blocks of different colors. You can use the arrow keys to move your character around the map. Have fun!
</p>
<canvas id='myCanvas' width='800' height='400'></canvas>
<script>
// Get canvas element
const canvas = document.getElementById('myCanvas');
// Get canvas context
const ctx = canvas.getContext('2d');
// Variables to keep track of score, character position, and blocks
let score = 0;
let x = 0;
let y = 0;
let blocks = [];
// Create an array of blocks
for (let i = 0; i < 10; i++) {
let block = {
x: Math.floor(Math.random() * canvas.width),
y: Math.floor(Math.random() * canvas.height),
color: `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
};
blocks.push(block);
}
// Character image
const character = new Image();
character.src = 'character.png';
// Draw blocks on canvas
function drawBlocks() {
blocks.forEach(block => {
ctx.fillStyle = block.color;
ctx.fillRect(block.x, block.y, 20, 20);
});
}
// Update character position
function updatePosition() {
ctx.drawImage(character, x, y, 20, 20);
}
// Check if character has collected a block
function checkCollision() {
blocks.forEach((block, index) => {
if (x < block.x + 20 &&
x + 20 > block.x &&
y < block.y + 20 &&
y + 20 > block.y) {
score += 1;
blocks.splice(index, 1);
}
});
}
// Draw score
function drawScore() {
ctx.fillStyle = '#000';
ctx.font = '16px Arial';
ctx.fillText(`Score: ${score}`, 8, 20);
}
// Update the canvas
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBlocks();
updatePosition();
checkCollision();
drawScore();
requestAnimationFrame(draw);
}
// Move character with arrow keys
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
x -= 20;
} else if (event.keyCode === 38) {
y -= 20;
} else if (event.keyCode === 39) {
x += 20;
} else if (event.keyCode === 40) {
y += 20;
}
});
draw();
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmfo 著作权归作者所有。请勿转载和采集!