DamienDabernat/game.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Simple falling sand game

  
## game.js
// Initialisation du canvas
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const width = 100;
const height = 100;
const cellSize = 5;

// Tableau 2D pour stocker l'état
let grid = Array.from(Array(height), () => Array(width).fill(0));

// Remplir quelques cellules avec du "sable" (représenté par 1)
grid[10][10] = 1;
grid[10][11] = 1;


let painting = false;

canvas.addEventListener("mousedown", () => {
    painting = true;
});

canvas.addEventListener("mouseup", () => {
    painting = false;
});

canvas.addEventListener("mousemove", drawSand);

function drawSand(event) {
    if (!painting) return;

    // Obtenir les coordonnées de la souris
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // Convertir en indices de tableau
    const gridX = Math.floor(x / cellSize);
    const gridY = Math.floor(y / cellSize);

    // Vérifier les limites
    if (gridX >= 0 && gridX < width && gridY >= 0 && gridY < height) {
        // Dessiner du sable
        grid[gridY][gridX] = 1;
    }
}

// Fonction de mise à jour
function update() {
    for (let y = height - 2; y >= 0; y--) {  // On commence de la seconde ligne du bas pour éviter de sortir de la grille
        for (let x = 0; x < width; x++) {
            if (grid[y][x] === 1) {
                if (y + 1 < height && grid[y + 1][x] === 0) {  // Vérification des limites ajoutée ici
                    // Déplacer le sable vers le bas
                    grid[y + 1][x] = 1;
                    grid[y][x] = 0;
                }
            }
        }
    }
}


// Fonction de rendu
function draw() {
    ctx.clearRect(0, 0, width * cellSize, height * cellSize);
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            if (grid[y][x] === 1) {
                ctx.fillStyle = "#DAA520"; // couleur du sable
                ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
            }
        }
    }
}

// Boucle principale
function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

// Démarrer la boucle
loop();

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="header">
  <div id="message">

  </div>
</div>


<canvas id="canvas" width="500" height="500"></canvas>

<script src="game.js"></script>
</body>
</html>
	// Initialisation du canvas
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	const width = 100;
	const height = 100;
	const cellSize = 5;

	// Tableau 2D pour stocker l'état
	let grid = Array.from(Array(height), () => Array(width).fill(0));

	// Remplir quelques cellules avec du "sable" (représenté par 1)
	grid[10][10] = 1;
	grid[10][11] = 1;


	let painting = false;

	canvas.addEventListener("mousedown", () => {
	painting = true;
	});

	canvas.addEventListener("mouseup", () => {
	painting = false;
	});

	canvas.addEventListener("mousemove", drawSand);

	function drawSand(event) {
	if (!painting) return;

	// Obtenir les coordonnées de la souris
	const rect = canvas.getBoundingClientRect();
	const x = event.clientX - rect.left;
	const y = event.clientY - rect.top;

	// Convertir en indices de tableau
	const gridX = Math.floor(x / cellSize);
	const gridY = Math.floor(y / cellSize);

	// Vérifier les limites
	if (gridX >= 0 && gridX < width && gridY >= 0 && gridY < height) {
	// Dessiner du sable
	grid[gridY][gridX] = 1;
	}
	}

	// Fonction de mise à jour
	function update() {
	for (let y = height - 2; y >= 0; y--) { // On commence de la seconde ligne du bas pour éviter de sortir de la grille
	for (let x = 0; x < width; x++) {
	if (grid[y][x] === 1) {
	if (y + 1 < height && grid[y + 1][x] === 0) { // Vérification des limites ajoutée ici
	// Déplacer le sable vers le bas
	grid[y + 1][x] = 1;
	grid[y][x] = 0;
	}
	}
	}
	}
	}


	// Fonction de rendu
	function draw() {
	ctx.clearRect(0, 0, width * cellSize, height * cellSize);
	for (let y = 0; y < height; y++) {
	for (let x = 0; x < width; x++) {
	if (grid[y][x] === 1) {
	ctx.fillStyle = "#DAA520"; // couleur du sable
	ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
	}
	}
	}
	}

	// Boucle principale
	function loop() {
	update();
	draw();
	requestAnimationFrame(loop);
	}

	// Démarrer la boucle
	loop();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<div id="header">
	<div id="message">

	</div>
	</div>


	<canvas id="canvas" width="500" height="500"></canvas>

	<script src="game.js"></script>
	</body>
	</html>