<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mincraft 2D</title>
<style>
body { margin: 0; overflow: hidden; user-select: none; }
canvas { display: block; }
#controls {
position: absolute;
bottom: 10px;
left: 10px;
display: grid;
grid-template-areas:
". up ."
"left down right";
gap: 10px;
}
.control-btn {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid #fff;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
#up { grid-area: up; }
#left { grid-area: left; }
#down { grid-area: down; }
#right { grid-area: right; }
#inventory {
position: absolute;
bottom: 10px;
left: 200px;
display: flex;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 5px;
}
.inventory-slot {
width: 30px;
height: 30px;
margin: 3px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
#stats {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
gap: 10px;
}
.heart {
width: 20px;
height: 20px;
background: red;
clip-path: polygon(
50% 0%,
70% 20%,
100% 30%,
80% 60%,
90% 100%,
50% 80%,
10% 100%,
20% 60%,
0% 30%,
30% 20%
);
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="controls">
<button id="up" class="control-btn">↑</button>
<button id="left" class="control-btn">←</button>
<button id="down" class="control-btn">↓</button>
<button id="right" class="control-btn">→</button>
</div>
<div id="inventory">
<div class="inventory-slot">0</div>
<div class="inventory-slot">0</div>
<div class="inventory-slot">0</div>
<div class="inventory-slot">0</div>
<div class="inventory-slot">0</div>
</div>
<div id="stats">
<p>Vie: <span id="health">3</span></p>
<p>Nourriture: <span id="food">100</span></p>
</div>
<script>
const canvas = [Link]('gameCanvas');
const ctx = [Link]('2d');
[Link] = [Link];
[Link] = [Link];
// Joueur
const player = {
x: [Link] / 2,
y: [Link] / 2,
width: 40,
height: 60,
speed: 5,
velocityY: 0,
gravity: 0.5,
onGround: false,
health: 3,
food: 100,
inventory: [0, 0, 0, 0, 0],
frame: 0,
direction: 'right'
};
// Sprite du joueur (lien direct vers une image)
const playerSprite = new Image();
[Link] = '[Link]
[Link]'; // Remplace par ton sprite sheet
// Blocs
const blocks = [];
const blockSize = 40;
// Types de blocs
const blockTypes = {
grass: '#2E8B57',
dirt: '#8B4513',
stone: '#808080',
sand: '#F4A460',
water: '#1E90FF',
tree: '#006400',
wood: '#8B4513',
leaf: '#228B22'
};
// Génération aléatoire du relief (montagnes, lacs, arbres)
function generateTerrain() {
const groundLevel = 400;
const amplitude = 100; // Variation du relief
const frequency = 0.02; // Fréquence du relief
for (let x = 0; x <= [Link] * 2; x += blockSize) {
const y = groundLevel + [Link](x * frequency) * amplitude +
[Link](x * frequency * 0.5) * 50;
[Link]({ x, y: [Link](y / blockSize) * blockSize, width:
blockSize, height: blockSize, type: 'grass' });
// Ajouter de la terre et de la pierre en dessous
for (let dy = y + blockSize; dy <= [Link]; dy += blockSize)
{
const depth = (dy - y) / blockSize;
if (depth < 3) {
[Link]({ x, y: dy, width: blockSize, height:
blockSize, type: 'dirt' });
} else {
[Link]({ x, y: dy, width: blockSize, height:
blockSize, type: 'stone' });
}
}
// Ajouter des lacs
if ([Link]() < 0.1) {
for (let dx = x; dx < x + blockSize * 5; dx += blockSize) {
[Link]({ x: dx, y: y + blockSize, width: blockSize,
height: blockSize, type: 'water' });
}
}
// Ajouter des arbres
if ([Link]() < 0.2) {
const treeX = x;
const treeY = y - blockSize * 2;
[Link]({ x: treeX, y: treeY, width: blockSize, height:
blockSize * 3, type: 'tree' });
[Link]({ x: treeX, y: treeY - blockSize, width: blockSize,
height: blockSize, type: 'leaf' });
}
}
}
generateTerrain();
// Dessiner le joueur
function drawPlayer() {
[Link]();
if ([Link] === 'left') {
[Link](-1, 1);
[Link](playerSprite, player.x - [Link], player.y,
[Link], [Link]);
} else {
[Link](playerSprite, player.x, player.y, [Link],
[Link]);
}
[Link]();
}
// Dessiner les blocs
function drawBlocks() {
[Link](block => {
[Link] = blockTypes[[Link]];
[Link](block.x, block.y, [Link], [Link]);
});
}
// Appliquer la gravité
function applyGravity() {
[Link] += [Link];
player.y += [Link];
// Collision avec les blocs
[Link](block => {
if (player.x < block.x + [Link] &&
player.x + [Link] > block.x &&
player.y < block.y + [Link] &&
player.y + [Link] > block.y) {
[Link] = 0;
player.y = block.y - [Link];
[Link] = true;
}
});
// Collision avec le sol
if (player.y + [Link] > [Link]) {
player.y = [Link] - [Link];
[Link] = 0;
[Link] = true;
}
}
// Mettre à jour l'inventaire
function updateInventoryUI() {
const inventorySlots = [Link]('.inventory-slot');
[Link]((slot, index) => {
[Link] = [Link][index] || 0;
});
}
// Mettre à jour les stats
function updateStats() {
[Link]('health').textContent = [Link];
[Link]('food').textContent = [Link];
}
// Boucle de jeu
function gameLoop() {
[Link](0, 0, [Link], [Link]);
applyGravity();
drawBlocks();
drawPlayer();
updateStats();
requestAnimationFrame(gameLoop);
}
// Contrôles
let moveLeft = false;
let moveRight = false;
[Link]('up').addEventListener('click', () => {
if ([Link]) {
[Link] = -10;
[Link] = false;
}
});
[Link]('left').addEventListener('mousedown', () => {
moveLeft = true;
[Link] = 'left';
});
[Link]('left').addEventListener('mouseup', () => {
moveLeft = false;
});
[Link]('right').addEventListener('mousedown', () => {
moveRight = true;
[Link] = 'right';
});
[Link]('right').addEventListener('mouseup', () => {
moveRight = false;
});
// Déplacement continu
function handleMovement() {
if (moveLeft) {
player.x -= [Link];
}
if (moveRight) {
player.x += [Link];
}
}
// Casser des blocs au clic
[Link]('click', (e) => {
const mouseX = [Link];
const mouseY = [Link];
[Link]((block, index) => {
if (mouseX > block.x && mouseX < block.x + [Link] &&
mouseY > block.y && mouseY < block.y + [Link]) {
[Link](index, 1); // Casser le bloc
addToInventory([Link]); // Ajouter à l'inventaire
}
});
});
// Ajouter un bloc à l'inventaire
function addToInventory(item) {
const index = [Link](slot => slot === 0);
if (index !== -1) {
[Link][index] = item;
updateInventoryUI();
}
}
// Placer un bloc
[Link]('contextmenu', (e) => {
[Link]();
const mouseX = [Link];
const mouseY = [Link];
const blockX = [Link](mouseX / blockSize) * blockSize;
const blockY = [Link](mouseY / blockSize) * blockSize;
const index = [Link](slot => slot !== 0);
if (index !== -1) {
const blockType = [Link][index];
[Link]({ x: blockX, y: blockY, width: blockSize, height:
blockSize, type: blockType });
[Link][index] = 0;
updateInventoryUI();
}
});
// Démarrer la boucle de jeu
gameLoop();
setInterval(handleMovement, 16); // 60 FPS
</script>
</body>
</html>
