Plataform Game For Kids's game

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

No:36550

←

Prev Next

→

Plataform Game For Kids
Developer User16822｜Date and time 24/1/17 23:07:33
Build time 15.378 sec｜Game capacity 3.154KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>

<head>
  <title>Plataforma para Niños</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

canvas {
      background-color: #f0f0f0;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

var platformWidth = 80;
      var platformHeight = 15;
      var platformX = canvas.width / 2 - platformWidth / 2;
      var platformY = canvas.height - platformHeight - 10;
      var platformSpeed = 5;

var ballRadius = 10;
      var ballX = canvas.width / 2;
      var ballY = platformY - ballRadius;
      var ballSpeedX = 3;
      var ballSpeedY = -3;

var leftPressed = false;
      var rightPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

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

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

function drawPlatform() {
        ctx.beginPath();
        ctx.rect(platformX, platformY, platformWidth, platformHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

function collisionDetection() {
        if (
          ballX + ballRadius > platformX &&
          ballX - ballRadius < platformX + platformWidth &&
          ballY + ballRadius > platformY &&
          ballY - ballRadius < platformY + platformHeight
        ) {
          ballSpeedY = -ballSpeedY;
        }
      }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

collisionDetection();
        drawBall();
        drawPlatform();

if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
          ballSpeedX = -ballSpeedX;
        }

if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
          ballSpeedY = -ballSpeedY;
        }

if (leftPressed && platformX > 0) {
          platformX -= platformSpeed;
        } else if (rightPressed && platformX < canvas.width - platformWidth) {
          platformX += platformSpeed;
        }

ballX += ballSpeedX;
        ballY += ballSpeedY;

requestAnimationFrame(draw);
      }

draw();
    };
  </script>
</body>

</html>