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

No:33426

←

Prev Next

→

A block Game
Developer User3879｜Date and time 24/1/4 5:22:36
Build time 49.408 sec｜Game capacity 6.587KB｜

Script

Bien sûr! Voici un exemple de jeu de blocs, implémenté en tant que fichier HTML unique, avec JavaScript encadré par des balises de script. Cela peut être joué comme un jeu terminé.

Jeu de Blocs

Score: 0

Ce code crée un simple jeu de blocs où le joueur contrôle une raquette pour rebondir une balle et détruire les blocs. Les blocs sont représentés par des rectangles colorés, la raquette est également un rectangle, et la balle est un cercle rouge. Vous pouvez jouer en utilisant les touches directionnelles du smartphone. Profitez du jeu!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Bien sûr! Voici un exemple de jeu de blocs, implémenté en tant que fichier HTML unique, avec JavaScript encadré par des balises de script. Cela peut être joué comme un jeu terminé.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jeu de Blocs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #gameboard {
      margin-top: 20px;
      border: 1px solid black;
      width: 200px;
      height: 400px;
      position: relative;
    }
    
    .block {
      width: 50px;
      height: 20px;
      background-color: #0095DD;
      position: absolute;
    }
    
    #paddle {
      width: 70px;
      height: 10px;
      background-color: #0095DD;
      position: absolute;
      bottom: 10px;
    }
    
    #ball {
      width: 10px;
      height: 10px;
      background-color: red;
      position: absolute;
    }
    
    #score {
      margin-top: 20px;
      font-size: 20px;
    }
    
    #message {
      margin-top: 50px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Jeu de Blocs</h1>
  <canvas id="gameboard"></canvas>
  <div id="score">Score: 0</div>
  <div id="message"></div>

// Définir les variables du jeu
    var paddleWidth = 70;
    var paddleHeight = 10;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var rightPressed = false;
    var leftPressed = false;
    var ballRadius = 5;
    var ballX = canvas.width / 2;
    var ballY = canvas.height - paddleHeight - ballRadius;
    var ballSpeedX = 2;
    var ballSpeedY = -2;
    var blockRowCount = 4;
    var blockColumnCount = 5;
    var blockWidth = 40;
    var blockHeight = 15;
    var blockPadding = 10;
    var blockOffsetTop = 30;
    var blockOffsetLeft = (canvas.width - (blockWidth + blockPadding) * blockColumnCount) / 2;
    var blocks = [];
    for (var c = 0; c < blockColumnCount; c++) {
      blocks[c] = [];
      for (var r = 0; r < blockRowCount; r++) {
        blocks[c][r] = { x: 0, y: 0, status: 1 };
      }
    }
    var score = 0;

// Gérer les entrées utilisateur
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = true;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = true;
      }
    }

function keyUpHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = false;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = false;
      }
    }

// Fonction de collision entre la balle et un bloc
    function collisionDetection() {
      for (var c = 0; c < blockColumnCount; c++) {
        for (var r = 0; r < blockRowCount; r++) {
          var block = blocks[c][r];
          if (block.status === 1) {
            if (
              ballX > block.x &&
              ballX < block.x + blockWidth &&
              ballY > block.y &&
              ballY < block.y + blockHeight
            ) {
              ballSpeedY = -ballSpeedY;
              block.status = 0;
              score++;
              if (score === blockRowCount * blockColumnCount) {
                document.getElementById("message").innerHTML = "Vous avez gagné!";
                setTimeout(function () {
                  document.location.reload();
                }, 2000);
              }
            }
          }
        }
      }
    }

// Dessiner les blocs sur le canvas
    function drawBlocks() {
      for (var c = 0; c < blockColumnCount; c++) {
        for (var r = 0; r < blockRowCount; r++) {
          if (blocks[c][r].status === 1) {
            var blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
            var blockY = r * (blockHeight + blockPadding) + blockOffsetTop;
            blocks[c][r].x = blockX;
            blocks[c][r].y = blockY;
            ctx.beginPath();
            ctx.rect(blockX, blockY, blockWidth, blockHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    }

// Dessiner la balle sur le canvas
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

// Dessiner la raquette sur le canvas
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Fonction de mise à jour du jeu
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawBlocks();
      drawBall();
      drawPaddle();
      collisionDetection();

// Déplacer la raquette
      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }

// Déplacer la balle
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Rebondir si la balle touche le mur gauche/droit ou le plafond
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY - ballRadius < 0) {
        ballSpeedY = -ballSpeedY;
      }

// Rebondir si la balle touche la raquette ou tombe en bas
      if (
        ballY + ballRadius > canvas.height - paddleHeight &&
        ballX > paddleX &&
        ballX < paddleX + paddleWidth
      ) {
        ballSpeedY = -ballSpeedY;
      } else if (ballY + ballRadius > canvas.height) {
        document.getElementById("message").innerHTML = "Game Over!";
        setTimeout(function () {
          document.location.reload();
        }, 2000);
      }

// Mettre à jour le score
      document.getElementById("score").innerHTML = "Score: " + score;

requestAnimationFrame(update);
    }

// Démarrer le jeu
    update();
  </script>
</body>
</html>
```