Atari Pong and 4 Balls for all devices's game

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

No:17060

←

Prev Next

→

Atari Pong and 4 Balls for all devices
Developer User7570｜Date and time 23/9/22 7:25:37
Build time 28.058 sec｜Game capacity 3.317KB｜

Script

Sure! Here's an example of a simple game that combines elements of Atari Pong and 4 Balls using JavaScript. The game can be played on any device, including smartphones. I will provide the code as a single HTML file enclosed in script tags.

To play the game on a smartphone, you can open the HTML file in a mobile web browser. The game allows you to control the paddle by swiping up and down on the screen. The objective is to hit the ball with the paddle and prevent it from escaping the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Atari Pong & 4 Balls</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
    body {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Paddle properties
    const paddleWidth = 10;
    const paddleHeight = 80;
    let paddle1Y = canvas.height / 2 - paddleHeight / 2;
    let paddle2Y = canvas.height / 2 - paddleHeight / 2;

// Ball properties
    const ballSize = 10;
    let ballX = canvas.width / 2 - ballSize / 2;
    let ballY = canvas.height / 2 - ballSize / 2;
    let ballSpeedX = 2;
    let ballSpeedY = 2;

// Game loop
    function gameLoop() {
      movePaddle();
      moveBall();
      drawElements();
      requestAnimationFrame(gameLoop);
    }

// Move the paddles based on user input (touch events)
    function movePaddle() {
      canvas.addEventListener("touchmove", function (evt) {
        let touchY = evt.touches[0].clientY - canvas.getBoundingClientRect().top;
        paddle1Y = touchY - paddleHeight / 2;
      });
    }

// Move the ball and handle collisions with paddles and walls
    function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Collisions with paddles
      if (
        ballX < paddleWidth &&
        ballY > paddle1Y &&
        ballY < paddle1Y + paddleHeight
      ) {
        ballSpeedX = -ballSpeedX;
      }
      if (
        ballX + ballSize > canvas.width - paddleWidth &&
        ballY > paddle2Y &&
        ballY < paddle2Y + paddleHeight
      ) {
        ballSpeedX = -ballSpeedX;
      }

// Collisions with walls
      if (ballY < 0 || ballY + ballSize > canvas.height) {
        ballSpeedY = -ballSpeedY;
      }

// Reset ball position
      if (ballX < 0 || ballX + ballSize > canvas.width) {
        ballX = canvas.width / 2 - ballSize / 2;
        ballY = canvas.height / 2 - ballSize / 2;
        ballSpeedX = -ballSpeedX;
        ballSpeedY = -ballSpeedY;
      }
    }

// Draw the paddles and balls
    function drawElements() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#000000";

// Draw paddles
      ctx.fillRect(0, paddle1Y, paddleWidth, paddleHeight);
      ctx.fillRect(
        canvas.width - paddleWidth,
        paddle2Y,
        paddleWidth,
        paddleHeight
      );

// Draw balls
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballSize, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```