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

No:567

399

←

Prev Next

→

air hockey before you play there’s a text that say..ALL
Developer User2996｜Date and time 23/6/15 20:43:45
Build time 54.028 sec｜Game capacity 4.815KB｜

Script

Emoji Air Hockey

Instructions:
Use your finger to move the paddle and hit the emoji puck. First to 5 points wins!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Air Hockey</title>
  <style>
    canvas {
      border: 2px solid black;
      touch-action: none;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
  <h1 style="text-align:center; font-size: 3rem;">Emoji Air Hockey</h1>
  <h2 style="text-align:center; font-size: 2rem">Instructions:<br>Use your finger to move the paddle and hit the emoji puck. First to 5 points wins!</h2>
  <canvas width="600" height="400"></canvas>
  <script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    // Variables
    const paddleHeight = 100;
    const paddleWidth = 20;
    const ballRadius = 20;
    let playerScore = 0;
    let computerScore = 0;
    
    // Paddle Object (Player)
    const player = {
      x: 0,
      y: canvas.height/2 - paddleHeight/2,
      width: paddleWidth,
      height: paddleHeight,
      color: 'black',
      score: 0
    }
    
    // Paddle Object (Computer)
    const computer = {
      x: canvas.width - paddleWidth,
      y: canvas.height/2 - paddleHeight/2,
      width: paddleWidth,
      height: paddleHeight,
      color: 'black',
      score: 0
    }
    
    // Ball Object
    const ball = {
      x: canvas.width/2,
      y: canvas.height/2,
      radius: ballRadius,
      speed: 5,
      velocityX: 5,
      velocityY: 5,
      color: 'red'
    }
    
    // Draw Function
    function draw() {
      // Clear the Canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw Player Paddle
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
      
      // Draw Computer Paddle
      ctx.fillStyle = computer.color;
      ctx.fillRect(computer.x, computer.y, computer.width, computer.height);
      
      // Draw Ball
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
      ctx.fillStyle = ball.color;
      ctx.fill();
      ctx.closePath();
      
      // Draw Scores
      ctx.font = '2rem Arial';
      ctx.fillText(player.score, canvas.width/4, canvas.height/5);
      ctx.fillText(computer.score, 3*canvas.width/4, canvas.height/5);
      
      // Update
      update();
    }
    
    // Update Function
    function update() {
      // Move Paddles
      canvas.addEventListener('touchmove', function(event) {
        let mousePos = getTouchPos(canvas, event);
        player.y = mousePos.y - (paddleHeight/2);
      });
      
      // Move Ball
      ball.x += ball.velocityX;
      ball.y += ball.velocityY;
      
      // Collision Detection (Player Paddle)
      if(ball.x - ball.radius < player.x + player.width && ball.y + ball.radius > player.y && ball.y - ball.radius < player.y + player.height && ball.velocityX > 0) {
        ball.velocityX = -ball.velocityX;
        let deltaY = ball.y - (player.y + player.height/2);
        ball.velocityY = deltaY * 0.2;
      }
      
      // Collision Detection (Computer Paddle)
      if(ball.x + ball.radius > computer.x && ball.y + ball.radius > computer.y && ball.y - ball.radius < computer.y + computer.height && ball.velocityX > 0) {
        ball.velocityX = -ball.velocityX;
        let deltaY = ball.y - (computer.y + computer.height/2);
        ball.velocityY = deltaY * 0.2;
      }
      
      // Wall Collision (Top or Bottom)
      if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
        ball.velocityY = -ball.velocityY;
      }
      
      // Wall Collision (Left or Right)
      if(ball.x - ball.radius < 0) {
        computer.score++;
        resetBall();
      } else if(ball.x + ball.radius > canvas.width) {
        player.score++;
        resetBall();
      }
    }
    
    // Reset Ball Function
    function resetBall() {
      ball.x = canvas.width/2;
      ball.y = canvas.height/2;
      ball.velocityX = -ball.velocityX;
      ball.velocityY = -ball.velocityY;
    }
    
    // Get Touch Position on Canvas
    function getTouchPos(canvas, event) {
      let rect = canvas.getBoundingClientRect();
      return {
        x: event.touches[0].clientX - rect.left,
        y: event.touches[0].clientY - rect.top
      };
    }
    
    // Game Loop
    function gameLoop() {
      draw();
      requestAnimationFrame(gameLoop);
    }
    
    // Start Game
    function startGame() {
      gameLoop();
    }
    
    // Event Listener
    window.addEventListener('load', function() {
      document.body.appendChild(canvas);
    });
  </script>
  <button style="margin: 2rem; font-size: 2rem; padding: 1rem 2rem; background-color: blue; color: white; border: none; border-radius: 10px;" onclick="startGame()">Start</button>
</body>
</html>

Emoji Air Hockey

Instructions:Use your finger to move the paddle and hit the emoji puck. First to 5 points wins!

Instructions:
Use your finger to move the paddle and hit the emoji puck. First to 5 points wins!