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

No:4011

2456

←

Prev Next

→

In my dreams, taiyaki and shrimp chocolates have a..ALL
Developer User3589｜Date and time 23/6/27 2:01:25
Build time 31.659 sec｜Game capacity 2.949KB｜

Script

了解しました。以下が私が作成したJavaScriptゲームです。

JavaScriptゲーム

スマホを傾けてボールを操作して、ゴールまで進めよう！

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下が私が作成したJavaScriptゲームです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptゲーム</title>
  </head>
  <body>
    <h1>JavaScriptゲーム</h1>
    <p>スマホを傾けてボールを操作して、ゴールまで進めよう！</p>
    <canvas id="myCanvas" width="320" height="480"></canvas>
    <script>
      // Canvas要素を取得する
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      
      // ボールの初期位置と大きさを設定する
      var x = canvas.width/2;
      var y = canvas.height-30;
      var ballRadius = 10;
      
      // ボールの移動量を設定する
      var dx = 2;
      var dy = -2;
      
      // バーの初期位置と大きさを設定する
      var paddleHeight = 10;
      var paddleWidth = 75;
      var paddleX = (canvas.width-paddleWidth)/2;
      
      // タッチイベントを取得する
      canvas.addEventListener("touchmove", touchMoveHandler, false);
      
      // タッチイベントでバーを操作する
      function touchMoveHandler(e) {
        var touchX = e.touches[0].clientX - canvas.offsetLeft;
        if (touchX > 0 && touchX < canvas.width) {
          paddleX = touchX - paddleWidth/2;
        }
      }
      
      // ボールを描画する
      function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // バーを描画する
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // ゲームオーバー時にアラートを表示する
      function gameOver() {
        alert("ゲームオーバー");
        document.location.reload();
      }
      
      // ゲームを描画する
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        
        // ボールが左右に反射する
        if (x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
          dx = -dx;
        }
        
        // ボールが上に反射する
        if (y + dy < ballRadius) {
          dy = -dy;
        }
        // ボールが下に落下した場合
        else if (y + dy > canvas.height-ballRadius) {
          // バーとボールの当たり判定を確認する
          if (x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
          }
          else {
            gameOver();
          }
        }
        
        x += dx;
        y += dy;
      }
      
      // 10ミリ秒ごとにゲームを描画する
      setInterval(draw, 10);
    </script>
  </body>
</html>