iOS device tilt operation is now supported by swiping by management and to some extent's game

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

No:6775

119

←

Prev Next

→

iOS device tilt operation is now supported by swip..ALL
Developer User3898｜Date and time 23/7/3 16:08:20
Build time 39.229 sec｜Game capacity 3.285KB｜

Script

了解しました。以下はスマホで遊べるシンプルなブロック崩しのゲームです。

このプログラムはスマホの傾きを検知してパドルを左右に操作し、ボールを跳ね返させるブロック崩しのゲームです。ボールがブロックに当たると、ブロックが削除されてボールの反射が発生します。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下はスマホで遊べるシンプルなブロック崩しのゲームです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ブロック崩し</title>
  <style>
    /* ゲーム画面のスタイル */
    #game {
      width: 320px;
      height: 480px;
      border: 2px solid black;
      position: relative;
      margin: 0 auto;
    }

/* パドルのスタイル */
    #paddle {
      width: 100px;
      height: 20px;
      background-color: black;
      position: absolute;
      bottom: 10px;
      left: 110px;
    }

/* ボールのスタイル */
    #ball {
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
      position: absolute;
      bottom: 45px;
      left: 150px;
    }

/* ブロックのスタイル */
    .block {
      width: 50px;
      height: 20px;
      background-color: red;
      position: absolute;
      top: 50px;
      left: 85px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="block"></div>
    <div class="block" style="top: 80px;"></div>
    <div class="block" style="top: 110px;"></div>
    <div class="block" style="top: 140px;"></div>
    <div class="block" style="top: 170px;"></div>
  </div>

function handleOrientation(event) {
      var x = event.gamma; // 左右の傾き
      var y = event.beta; // 上下の傾き

// パドルを移動する
      var paddle = document.getElementById("paddle");
      paddle.style.left = (150 + x * 3) + "px";
    }

// ボールの物理モデルとブロックの衝突判定
    setInterval(function() {
      var ball = document.getElementById("ball");

// ボールの座標と速度
      var x = parseInt(ball.style.left);
      var y = parseInt(ball.style.bottom);
      var dx = 2;
      var dy = 2;

// ボールを移動する
      ball.style.left = (x + dx) + "px";
      ball.style.bottom = (y + dy) + "px";

// ボールが画面の端に当たった場合、方向を反転する
      if (x + dx > 310 || x + dx < 0) {
        dx = -dx;
      }
      if (y + dy > 470 || y + dy < 0) {
        dy = -dy;
      }

// ボールとブロックの衝突判定
      var blocks = document.getElementsByClassName("block");
      for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i];
        if (collision(ball, block)) {
          block.parentNode.removeChild(block);
          dy = -dy;
        }
      }
    }, 10);

// オブジェクト同士の衝突判定
    function collision(a, b) {
      var aRect = a.getBoundingClientRect();
      var bRect = b.getBoundingClientRect();

return (aRect.left <= bRect.right && aRect.right >= bRect.left && aRect.top <= bRect.bottom && aRect.bottom >= bRect.top);
    }
  </script>
</body>
</html>
```