مباراة كرة قدم's game

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

No:21378

←

Prev Next

→

مباراة كرة قدم
Developer User9801｜Date and time 23/10/15 6:37:43
Build time 145.331 sec｜Game capacity 3.577KB｜

Script

En tant que programmeur, je peux créer un simple jeu de football basé sur des pictogrammes pour une utilisation sur smartphone. Voici un exemple de code HTML inclus dans les balises de script qui met en œuvre le jeu :

Ce code HTML crée un terrain de football simulé avec deux joueurs représentés par des pictogrammes (`emozi_bear.png` et `emozi_chicken.png`) et une balle représentée par un cercle noir. Les joueurs peuvent être déplacés avec les touches fléchées et les touches A et D du clavier du smartphone. La balle se déplace également automatiquement de manière aléatoire à gauche ou à droite. Veuillez noter que vous devrez fournir vos propres images pour les pictogrammes des joueurs (`emozi_hamuster.png` et `emozi_dog.png`) pour personnaliser le jeu selon vos préférences.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jeu de football</title>
  <style>
    #field {
      width: 300px;
      height: 500px;
      border: 2px solid black;
      margin: 0 auto;
      position: relative;
    }
    #ball {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
      left: 140px;
      top: 240px;
    }
    .player {
      width: 50px;
      height: 50px;
      position: absolute;
    }
    #player1 {
      background-image: url('player1.png');
      left: 120px;
      top: 400px;
    }
    #player2 {
      background-image: url('player2.png');
      left: 120px;
      top: 20px;
    }
  </style>
</head>
<body>
  <div id="field">
    <div id="ball"></div>
    <div id="player1" class="player"></div>
    <div id="player2" class="player"></div>
  </div>

var ball = document.getElementById('ball');
    var player1 = document.getElementById('player1');
    var player2 = document.getElementById('player2');

// Fonction pour déplacer le joueur 1
    function movePlayer1(direction) {
      if (direction === 'right') {
        player1.style.left = parseInt(player1.style.left) + 10 + 'px';
      } else if (direction === 'left') {
        player1.style.left = parseInt(player1.style.left) - 10 + 'px';
      }
    }

// Fonction pour déplacer le joueur 2
    function movePlayer2(direction) {
      if (direction === 'right') {
        player2.style.left = parseInt(player2.style.left) + 10 + 'px';
      } else if (direction === 'left') {
        player2.style.left = parseInt(player2.style.left) - 10 + 'px';
      }
    }

// Lier les événements de touche pour contrôler les joueurs
    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 37) {
        // Flèche gauche
        movePlayer1('left');
      } else if (event.keyCode === 39) {
        // Flèche droite
        movePlayer1('right');
      } else if (event.keyCode === 65) {
        // Touche A
        movePlayer2('left');
      } else if (event.keyCode === 68) {
        // Touche D
        movePlayer2('right');
      }
    });

// Fonction pour déplacer la balle automatiquement
    function moveBall() {
      var direction = Math.random() > 0.5 ? 1 : -1; // 50% de chance d'aller à droite ou à gauche
      var distance = Math.floor(Math.random() * 30) + 1; // Distance de déplacement aléatoire entre 1 et 30 pixels
      ball.style.left = parseInt(ball.style.left) + (direction * distance) + 'px';

// Appel récursif pour continuer le mouvement
      setTimeout(moveBall, 1000);
    }

// Démarrer le mouvement de la balle
    moveBall();
  </script>
</body>
</html>
```

Ce code HTML crée un terrain de football simulé avec deux joueurs représentés par des pictogrammes (`player1.png` et `player2.png`) et une balle représentée par un cercle noir. Les joueurs peuvent être déplacés avec les touches fléchées et les touches A et D du clavier du smartphone. La balle se déplace également automatiquement de manière aléatoire à gauche ou à droite.

Veuillez noter que vous devrez fournir vos propres images pour les pictogrammes des joueurs (`player1.png` et `player2.png`) pour personnaliser le jeu selon vos préférences.