Doctorblog.fr@gmail.com créer un compte jeu de société football's game

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

No:27383

←

Prev Next

→

Doctorblog.fr@gmail.com créer un compte jeu de soc..ALL
Developer User13637｜Date and time 23/12/6 18:57:56
Build time 36.36 sec｜Game capacity 3.867KB｜

Script

D'accord, voici un exemple de code HTML contenant un jeu de société de football simplifié utilisant des pictogrammes :

Ce code HTML contient un tableau de 3x3 cases où l'un des joueurs est représenté par un pictogramme et le ballon de football par un autre. L'objectif du jeu est de déplacer le joueur vers le ballon en utilisant les touches directionnelles de votre smartphone. Lorsque le joueur atteint le ballon, un message s'affiche indiquant que vous avez marqué un but et le jeu est réinitialisé.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

D'accord, voici un exemple de code HTML contenant un jeu de société de football simplifié utilisant des pictogrammes :

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jeu de société de football</title>
    <style>
        #board {
            display: flex;
            flex-wrap: wrap;
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .cell {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        #ball {
            background-image: url('ball.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
        #player {
            background-image: url('player.png');
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="board">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell" id="ball"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell" id="player"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

function movePlayer(event) {
            const player = document.getElementById('player');
            let playerPosition = Array.from(document.getElementsByClassName('cell')).indexOf(player);
            let newPosition;

switch (event.key) {
                case 'ArrowUp':
                    newPosition = playerPosition - 3;
                    break;
                case 'ArrowDown':
                    newPosition = playerPosition + 3;
                    break;
                case 'ArrowLeft':
                    newPosition = playerPosition - 1;
                    break;
                case 'ArrowRight':
                    newPosition = playerPosition + 1;
                    break;
                default:
                    return;
            }

const ball = document.getElementById('ball');
            const ballPosition = Array.from(document.getElementsByClassName('cell')).indexOf(ball);

if (newPosition < 0 || newPosition > 8) {
                return; // Player cannot move out of the board
            }

if (newPosition === ballPosition) {
                // Player has reached the ball
                alert('Goal! Vous avez marqué un but !');
                resetGame();
                return;
            }

// Swap player and empty cell
            document.getElementsByClassName('cell')[playerPosition].removeAttribute('id');
            player.removeAttribute('id');
            document.getElementsByClassName('cell')[newPosition].setAttribute('id', 'player');
        }

function resetGame() {
            const cells = Array.from(document.getElementsByClassName('cell'));
            cells.forEach((cell) => {
                cell.removeAttribute('id');
            });
            document.getElementsByClassName('cell')[2].setAttribute('id', 'ball');
            document.getElementsByClassName('cell')[5].setAttribute('id', 'player');
        }
        
        resetGame(); // Start the game
    </script>
</body>
</html>
```