Crea il gioco di pong's game

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

No:27822

←

Prev Next

→

Crea il gioco di pong
Developer User13856｜Date and time 23/12/9 8:16:44
Build time 25.619 sec｜Game capacity 4.242KB｜

Script

Ecco il codice per creare un semplice gioco di Pong utilizzando JavaScript all'interno di un singolo file HTML. Il gioco è ottimizzato per funzionare su dispositivi smartphone e utilizza pictogrammi per rappresentare le palline e le racchette.

Salva questo codice all'interno di un file HTML con l'estensione ".html" e aprilo con un browser per giocare a Pong! Usa le frecce su e giù per muovere la racchetta sinistra su uno smartphone. Buon divertimento!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        #playground {
            width: 100%;
            height: 400px;
            background-color: black;
            position: relative;
        }

.paddle {
            width: 10px;
            height: 60px;
            background-color: white;
            position: absolute;
        }

#leftPaddle {
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

#rightPaddle {
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

.ball {
            width: 20px;
            height: 20px;
            background-color: white;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="playground">
        <div id="leftPaddle" class="paddle"></div>
        <div id="rightPaddle" class="paddle"></div>
        <div id="ball" class="ball"></div>
    </div>

var paddleHeight = leftPaddle.offsetHeight;
        var paddleSpeed = 7;

var ballSize = ball.offsetWidth;
        var ballSpeedX = 3;
        var ballSpeedY = 3;
        var ballDirectionX = 1;
        var ballDirectionY = 1;

// Aggiorna il gioco ad ogni frame
        function updateGame() {
            updatePaddlePosition();
            updateBallPosition();

requestAnimationFrame(updateGame);
        }

// Aggiorna la posizione delle racchette
        function updatePaddlePosition() {
  const viewHeight = document.documentElement.clientHeight;
  const paddleTop = parseInt(leftPaddle.style.top);
  const paddleBottom =
    paddleTop + paddleHeight;
  var updatedTop = paddleTop;

if (paddleTop > 0 && upPressed) {
    updatedTop = paddleTop - paddleSpeed;
  }
  if (paddleBottom < viewHeight && downPressed) {
    updatedTop = paddleTop + paddleSpeed;
  }

leftPaddle.style.top = `${updatedTop}px`;
}

// Aggiorna la posizione della pallina
function updateBallPosition() {
  const playgroundWidth = playground.offsetWidth;
  const playgroundHeight = playground.offsetHeight;
  const ballLeft = parseInt(ball.style.left);
  const ballTop = parseInt(ball.style.top);

// Verifica collisione con i bordi verticali
  if (ballTop <= 0 || ballTop >= playgroundHeight - ballSize) {
    ballDirectionY *= -1;
  }

// Verifica collisione con racchetta sinistra
  if (
    ballLeft <= paddleWidth &&
    ballTop + ballSize >= paddleTop &&
    ballTop <= paddleBottom
  ) {
    ballDirectionX *= -1;
  }

// Verifica collisione con racchetta destra
  if (
    ballLeft + ballSize >=
      playgroundWidth - paddleWidth &&
    ballTop + ballSize >= paddleTop &&
    ballTop <= paddleBottom
  ) {
    ballDirectionX *= -1;
  }

// Aggiorna la posizione della pallina
  ball.style.left = `${
    ballLeft + ballSpeedX * ballDirectionX
  }px`;
  ball.style.top = `${
    ballTop + ballSpeedY * ballDirectionY
  }px`;
}

// Listener per i tasti
var upPressed = false;
var downPressed = false;

document.addEventListener('keydown', function (event) {
  if (event.key === 'ArrowUp') {
    upPressed = true;
  }

if (event.key === 'ArrowDown') {
    downPressed = true;
  }
});

document.addEventListener('keyup', function (event) {
  if (event.key === 'ArrowUp') {
    upPressed = false;
  }

if (event.key === 'ArrowDown') {
    downPressed = false;
  }
});

// Avvia il gioco
updateGame();
    </script>
</body>
</html>
```