Punish the slime The slime is line-drawn by JavaScript. When you touch the slime, the area is concaved.'s game

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

No:5866

465

←

Prev Next

→

Punish the slime The slime is line-drawn by JavaSc..ALL
Developer もちきなこ｜Date and time 23/7/1 0:41:13
Build time 22.736 sec｜Game capacity 2.398KB｜

Script

了解です。以下は、スマホで操作可能なスライムをぷにぷにするゲームの実装例です。

このプログラムでは、緑色のスライムが表示され、スライムに指で触れると凹みます。指がスライムの半径以下の範囲にある場合、スライムが凹む効果があります。指が離れるとスライムが元に戻る仕組みです。

←

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">
  <title>スライムをぷにぷに！</title>
  <style>
    .slime {
      width: 200px;
      height: 200px;
      background-color: green;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="slime"></div>

slime.addEventListener('touchmove', function(e) {
      e.preventDefault(); // スライド時に画面がスクロールしないようにする

var touch = e.touches[0]; // 最初のタッチポイントのみ取得

// タッチポイントの座標を取得
      var touchX = touch.clientX;
      var touchY = touch.clientY;

// スライム要素の中心座標を取得
      var slimeRect = slime.getBoundingClientRect();
      var slimeCenterX = slimeRect.left + slime.offsetWidth / 2;
      var slimeCenterY = slimeRect.top + slime.offsetHeight / 2;

// タッチポイントとスライムの中心座標の距離を計算
      var distance = Math.sqrt(Math.pow(touchX - slimeCenterX, 2) + Math.pow(touchY - slimeCenterY, 2));

// 距離がスライムの半径以下の場合、タッチポイントに対応するスライムの要素を凹ます
      if (distance <= slime.offsetWidth / 2) {
        var dx = touchX - slimeCenterX;
        var dy = touchY - slimeCenterY;
        var angle = Math.atan2(dy, dx) * (180 / Math.PI);
        slime.style.transform = 'rotate(' + angle + 'deg)';
        slime.style.width = (slime.offsetWidth * 0.8) + 'px';
        slime.style.height = (slime.offsetHeight * 0.8) + 'px';
      }
    })

slime.addEventListener('touchend', function() {
      // スライムの凹みを元に戻す
      slime.style.transform = 'rotate(0deg)';
      slime.style.width = '200px';
      slime.style.height = '200px';
    });
  </script>
</body>
</html>
```