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

No:10657

←

Prev Next

→

Chrono Trigger 2
Developer User4559｜Date and time 23/8/1 15:43:21
Build time 20.754 sec｜Game capacity 2.718KB｜

Script

了解です。以下に実装例を示します。

クロノトリガー２

スマホ操作でキャラクターを操作して冒険しよう！

この例では、クリックした位置とキャラクターの位置の差を基にキャラクターを移動させる処理が実装されています。キャラクターはスマホ画面内で上下左右に移動することができます。キャラクターの画像には絵文字の「:smiling_face:」を使用していますが、必要に応じて他の絵文字やキャラクター画像に変更することも可能です。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>クロノトリガー２</title>
</head>
<body>
  <h1>クロノトリガー２</h1>
  <p>スマホ操作でキャラクターを操作して冒険しよう！</p>
  
  <script>
    // ゲームの処理を記述する

// キャラクターの初期位置
    let characterX = 0;
    let characterY = 0;

// キャラクターの移動
    function moveCharacter(direction) {
      if (direction === 'up') {
        characterY -= 10;
      } else if (direction === 'down') {
        characterY += 10;
      } else if (direction === 'left') {
        characterX -= 10;
      } else if (direction === 'right') {
        characterX += 10;
      }

// キャラクターの位置を更新
      document.getElementById('character').style.top = characterY + 'px';
      document.getElementById('character').style.left = characterX + 'px';
    }

// ゲーム画面をクリックした時の処理
    function handleClick(event) {
      // クリックされた座標
      const clickX = event.pageX;
      const clickY = event.pageY;
      
      // キャラクターとクリック座標の差を計算し、移動方向を判断
      const diffX = clickX - characterX;
      const diffY = clickY - characterY;
      if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          moveCharacter('right');
        } else {
          moveCharacter('left');
        }
      } else {
        if (diffY > 0) {
          moveCharacter('down');
        } else {
          moveCharacter('up');
        }
      }
    }

// ゲーム画面をクリックした時にhandleClickを呼び出す
    document.getElementById('game-screen').addEventListener('click', handleClick);
    
  </script>

#character {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
    }
  </style>

<div id="game-screen">
    <img id="character" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/smiling-face_1f600.png">
  </div>
</body>
</html>
```

この例では、クリックした位置とキャラクターの位置の差を基にキャラクターを移動させる処理が実装されています。キャラクターはスマホ画面内で上下左右に移動することができます。

キャラクターの画像には絵文字の「:smiling_face:」を使用していますが、必要に応じて他の絵文字やキャラクター画像に変更することも可能です。