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

No:22818

←

Prev Next

→

Le bateau militaire
Developer User10541｜Date and time 23/10/25 17:42:25
Build time 133.985 sec｜Game capacity 6.102KB｜

Script

Bien sûr! Voici un exemple de jeu de bateau militaire (Battleship) écrit en JavaScript et encadré dans des balises script, pouvant être intégré dans un seul fichier HTML. Le jeu est conçu pour être joué sur un smartphone et utilise des pictogrammes.

Bataille Navale

Ce code HTML contient le jeu de bataille navale où vous devez cliquer sur les cases pour attaquer les navires ennemis. Les navires sont placés aléatoirement et vous devez les couler tous pour gagner. Les cases touchées sont colorées en rouge, les cases manquées sont colorées en gris et les navires coulés sont marqués d'un drapeau (💥). Amusez-vous bien à jouer à la bataille navale sur votre smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bataille Navale</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

.grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 2px;
        }

.cell {
            width: 30px;
            height: 30px;
            background-color: lightblue;
            border: 1px solid #fff;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
        }

.ship {
            background-color: dodgerblue;
        }

.hit {
            background-color: red;
        }

.miss {
            background-color: gray;
        }
    </style>
</head>
<body>
    <h1>Bataille Navale</h1>
    <div class="grid"></div>

function createGrid() {
            for (let i = 0; i < gridSize * gridSize; i++) {
              const cell = document.createElement("div");
              cell.classList.add("cell");
              cell.addEventListener("click", handleCellClick);
              grid.appendChild(cell);
            }
          }

function placeShips() {
            ships.forEach(ship => {
              let randomPosition, randomDirection;

do {
                randomPosition = Math.floor(Math.random() * gridSize * gridSize);
                randomDirection = Math.floor(Math.random() * 2);
              } while (!isValidPlacement(randomPosition, randomDirection, ship.length));

const shipCellsIndexes = [];

for (let i = 0; i < ship.length; i++) {
                const cellIndex = randomPosition + (randomDirection === 0 ? i : i * gridSize);
                shipCellsIndexes.push(cellIndex);
                shipCells.set(cellIndex, ship.name);
                shipHits.set(cellIndex, false);
              }

shipSunk.set(ship.name, false);
              
              updateGrid();

console.log(`Navire ${ship.name} placé aux positions: ${shipCellsIndexes}`);
            });
          }

function isValidPlacement(position, direction, length) {
            const endPosition = position + (direction === 0 ? length - 1 : (length - 1) * gridSize);

if (endPosition >= gridSize * gridSize) {
              return false;
            }

for (let i = position; i <= endPosition; i += (direction === 0 ? 1 : gridSize)) {
              if (shipCells.has(i)) {
                return false;
              }
            }

return true;
          }

function handleCellClick(e) {
            const cellIndex = Array.from(grid.children).indexOf(e.target);

if (shipCells.has(cellIndex)) {
              shipHits.set(cellIndex, true);
              updateGrid();

const shipName = shipCells.get(cellIndex);

if (isShipSunk(shipName)) {
                shipSunk.set(shipName, true);
                checkGameEnd();

console.log(`Navire ${shipName} coulé!`);
              } else {
                console.log(`Navire touché!`);
              }
            } else {
              console.log(`Tir manqué!`);
            }

this.removeEventListener("click", handleCellClick);
          }

function updateGrid() {
            grid.innerHTML = "";

for (let i = 0; i < gridSize * gridSize; i++) {
              const cell = document.createElement("div");
              cell.classList.add("cell");
              cell.dataset.index = i;

if (shipHits.get(i) === true) {
                if (shipCells.has(i)) {
                  cell.classList.add("hit");
                } else {
                  cell.classList.add("miss");
                }
              } else if (shipCells.has(i)) {
                cell.classList.add("ship");

if (shipSunk.get(shipCells.get(i))) {
                  cell.innerHTML = "💥"; // Pictogramme d'un drapeau
                }
              }

grid.appendChild(cell);
            }
          }

function isShipSunk(shipName) {
            for (const [key, value] of shipCells) {
              if (value === shipName && !shipHits.get(key)) {
                return false;
              }
            }

return true;
          }

function checkGameEnd() {
            for (const [key, value] of shipSunk) {
              if (!value) {
                return;
              }
            }

console.log("Félicitations! Vous avez coulé tous les navires ennemis!");
          }

createGrid();
          placeShips();
        });
    </script>
</body>
</html>
```