CEDEC AWARDS Games that can be taken's game

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

No:5749

1051

←

Prev Next

→

CEDEC AWARDS Games that can be taken
Developer User3840｜Date and time 23/6/30 18:39:29
Build time 29.996 sec｜Game capacity 3.237KB｜

Script

了解しました。以下は、スマートフォンで遊べるHTMLゲームの例です。

この例では、ボールが跳ね返りながらパドルを操作して壁を壊すブロック崩しのゲームを実装しています。スマートフォンのブラウザで上記のHTMLを実行すると、ゲームが起動し、パドルを左右に動かすことができます。坂道に当たるとボールが反射し、ボールが画面の下に落ちるとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下は、スマートフォンで遊べるHTMLゲームの例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      window.onload = function() {
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;
        var ballRadius = 10;
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;
        
        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 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 {
              alert("ゲームオーバー");
              document.location.reload();
            }
          }
          
          if(rightPressed && paddleX < canvas.width-paddleWidth) {
            paddleX += 7;
          }
          else if(leftPressed && paddleX > 0) {
            paddleX -= 7;
          }
          
          x += dx;
          y += dy;
        }
        
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        
        function keyDownHandler(e) {
          if(e.key === "Right" || e.key === "ArrowRight") {
            rightPressed = true;
          }
          else if(e.key === "Left" || e.key === "ArrowLeft") {
            leftPressed = true;
          }
        }
        
        function keyUpHandler(e) {
          if(e.key === "Right" || e.key === "ArrowRight") {
            rightPressed = false;
          }
          else if(e.key === "Left" || e.key === "ArrowLeft") {
            leftPressed = false;
          }
        }
        
        setInterval(draw, 10);
      };
    </script>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
  </body>
</html>
```