AI game creator

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

No:9399

132

←

Prev Next

→

tardigrades
Developer User4351｜Date and time 23/7/24 13:04:24
Build time 20.057 sec｜Game capacity 2.308KB｜

Script

了解。以下に、スマートフォンで遊べるゲームのサンプルプログラムを記述します。このゲームでは、ユーザーがクマムシを操作し、ゴールまで導くことが目的です。
html

🐻

このプログラムでは、画面上のクマムシ（🐻）をスワイプすることで移動させることができます。クマムシは画面内で自由に移動できますが、画面外には出られません。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解。以下に、スマートフォンで遊べるゲームのサンプルプログラムを記述します。このゲームでは、ユーザーがクマムシを操作し、ゴールまで導くことが目的です。

``` html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #game {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #EEE;
      }
      #bearmushi {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        font-size: 4rem;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <span id="bearmushi">🐻</span>
    </div>

function handleTouchStart(e) {
        e.preventDefault();
        var touch = e.touches[0];
        startX = touch.clientX;
        startY = touch.clientY;
      }

function handleTouchMove(e) {
        e.preventDefault();
        if (!startX || !startY) {
          return;
        }

var touch = e.touches[0];
        var deltaX = touch.clientX - startX;
        var deltaY = touch.clientY - startY;
        startX = touch.clientX;
        startY = touch.clientY;

var rect = bearmushi.getBoundingClientRect();
        var newX = rect.left + deltaX;
        var newY = rect.top + deltaY;

if (newX >= 0 && newX <= game.clientWidth - rect.width) {
          bearmushi.style.left = newX + 'px';
        }
        if (newY >= 0 && newY <= game.clientHeight - rect.height) {
          bearmushi.style.bottom = newY + 'px';
        }
      }

function handleTouchEnd(e) {
        e.preventDefault();
        startX = null;
        startY = null;
      }

game.addEventListener('touchstart', handleTouchStart, { passive: false });
      game.addEventListener('touchmove', handleTouchMove, { passive: false });
      game.addEventListener('touchend', handleTouchEnd, { passive: false });
    </script>
  </body>
</html>
```