City building game with money display. The commercial buildings add 1 money until the scene.'s game

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

No:13372

100

←

Prev Next

→

City building game with money display. The commerc..ALL
Developer User5869｜Date and time 23/8/28 3:54:04
Build time 14.766 sec｜Game capacity 3.961KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Jeux de construction de ville</title>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // On récupère le canvas de notre jeu
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Variables du jeu
        let money = 0;
        const buildingCost = 10;
        const buildings = [
          {
            name: 'Usine',
            cost: 100,
            income: 1
          },
          {
            name: 'Centre commercial',
            cost: 200,
            income: 1
          },
          {
            name: 'Hôtel',
            cost: 300,
            income: 1
          }
        ];
        let scene = 'menu'; // Scènes : menu, jeu
        
        // Fonction d'affichage du menu
        function drawMenu() {
            // Fond du menu
            ctx.fillStyle = '#333';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Titre
            ctx.fillStyle = '#fff';
            ctx.font = '48px Arial';
            ctx.fillText('Jeu de construction de ville', 50, 100);
            
            // Bouton de démarrage
            ctx.fillStyle = '#00ff00';
            ctx.fillRect(150, 200, 200, 80);
            ctx.fillStyle = '#fff';
            ctx.font = '32px Arial';
            ctx.fillText('Commencer', 180, 250);
        }
        
        // Fonction d'affichage du jeu
        function drawGame() {
            // Fond du jeu
            ctx.fillStyle = '#eee';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Affichage de l'argent
            ctx.fillStyle = '#000';
            ctx.font = '24px Arial';
            ctx.fillText('Argent: ' + money, 20, 40);
            
            // Affichage des bâtiments disponibles
            ctx.font = '20px Arial';
            buildings.forEach((building, index) => {
              ctx.fillText(
                building.name + ' (' + building.cost + '€) +' + building.income + '€',
                20,
                100 + index * 30
              );
            });
        }
        
        // Fonction pour ajouter de l'argent
        function addMoney(amount) {
          money += amount;
        }
        
        // Fonction pour acheter un bâtiment
        function buyBuilding(building) {
          if (money >= building.cost) {
            money -= building.cost;
            addMoney(building.income);
          } else {
            alert("Pas assez d'argent !");
          }
        }
        
        // Gestionnaire d'événement de clic
        canvas.addEventListener('click', function(event) {
            switch (scene) {
                case 'menu':
                    // Vérifier si le bouton de démarrage est cliqué
                    if (event.offsetX >= 150 && event.offsetX <= 350 && event.offsetY >= 200 && event.offsetY <= 280) {
                        scene = 'jeu';
                    }
                    break;
                case 'jeu':
                    // Vérifier si un bâtiment est cliqué
                    buildings.forEach((building, index) => {
                      const buildingY = 100 + index * 30;
                      if (event.offsetX >= 20 && event.offsetY >= buildingY && event.offsetX <= 220 && event.offsetY <= buildingY + 20) {
                        buyBuilding(building);
                      }
                    });
                    break;
            }
        });
        
        // Fonction de boucle de jeu
        function gameLoop() {
            if (scene === 'menu') {
                drawMenu();
            } else if (scene === 'jeu') {
                drawGame();
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        // Lancement du jeu
        gameLoop();
    </script>
</body>
</html>