AI game creator

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

No:19527

←

Prev Next

→

Raycasting
Developer User8620｜Date and time 23/10/4 17:04:37
Build time 25.937 sec｜Game capacity 3.766KB｜

Script

D'accord, voici un exemple de jeu en utilisant le raycasting implémenté dans une seule fichier HTML avec JavaScript :

Ce code représente un jeu simple utilisant le raycasting pour afficher une carte dans un canvas HTML. Vous pouvez contrôler le joueur à l'aide des flèches du clavier. Les murs sont représentés par des rectangles et le joueur est représenté par un petit carré. Ce n'est qu'un exemple de base pour vous aider à démarrer. Vous pouvez ajouter des fonctionnalités supplémentaires, des graphismes améliorés et d'autres mécaniques de jeu en fonction de vos besoins.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

D'accord, voici un exemple de jeu en utilisant le raycasting implémenté dans une seule fichier HTML avec JavaScript :

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jeu de Raycasting</title>
  <meta charset="UTF-8">
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Variables du joueur
    const player = {
      x: 100,
      y: 100,
      dirX: -1,
      dirY: 0,
      speed: 0.1,
      rotateSpeed: 0.05
    };

// Carte du jeu
    const map = [
      [1, 1, 1, 1, 1],
      [1, 0, 0, 0, 1],
      [1, 0, 1, 0, 1],
      [1, 0, 0, 0, 1],
      [1, 1, 1, 1, 1]
    ];

// Fonction principale de rendu
    function render() {
      // Efface le contenu précédent
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dessin de la carte
      for (let i = 0; i < map.length; i++) {
        for (let j = 0; j < map[i].length; j++) {
          if (map[i][j] === 1) {
            ctx.fillRect(j * 50, i * 50, 50, 50);
          }
        }
      }

// Dessin du joueur (représenté par un pictogramme)
      ctx.fillRect(player.x - 5, player.y - 5, 10, 10);

// Animation en boucle
      requestAnimationFrame(render);
    }

// Fonction de mise à jour du joueur
    function updatePlayer() {
      // Mouvement du joueur en fonction de sa direction
      player.x += player.dirX * player.speed;
      player.y += player.dirY * player.speed;
    }

// Écoute des touches pour contrôler le joueur
    function handleKeyPress(event) {
      const { keyCode } = event;

switch (keyCode) {
        case 38: // Flèche haut
          player.dirX = Math.cos(Math.atan2(player.dirY, player.dirX) - player.rotateSpeed);
          player.dirY = Math.sin(Math.atan2(player.dirY, player.dirX) - player.rotateSpeed);
          break;
        case 40: // Flèche bas
          player.dirX = Math.cos(Math.atan2(player.dirY, player.dirX) + player.rotateSpeed);
          player.dirY = Math.sin(Math.atan2(player.dirY, player.dirX) + player.rotateSpeed);
          break;
        case 37: // Flèche gauche
          // Rotation anti-horaire
          const oldDirX = player.dirX;
          player.dirX = player.dirX * Math.cos(player.rotateSpeed) - player.dirY * Math.sin(player.rotateSpeed);
          player.dirY = oldDirX * Math.sin(player.rotateSpeed) + player.dirY * Math.cos(player.rotateSpeed);
          break;
        case 39: // Flèche droite
          // Rotation horaire
          const oldDirX2 = player.dirX;
          player.dirX = player.dirX * Math.cos(-player.rotateSpeed) - player.dirY * Math.sin(-player.rotateSpeed);
          player.dirY = oldDirX2 * Math.sin(-player.rotateSpeed) + player.dirY * Math.cos(-player.rotateSpeed);
          break;
        default:
          break;
      }
    }

// Ajout des écouteurs d'événements
    window.addEventListener('keydown', handleKeyPress);

// Lancement du jeu
    render();
    setInterval(updatePlayer, 16); // Met à jour le joueur toutes les 16ms
  </script>
</body>
</html>
```

Ce n'est qu'un exemple de base pour vous aider à démarrer. Vous pouvez ajouter des fonctionnalités supplémentaires, des graphismes améliorés et d'autres mécaniques de jeu en fonction de vos besoins.