可愛いキャラが沢山出てくる可愛い着せ替えゲーム's game

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

No:16382

←

Prev Next

→

可愛いキャラが沢山出てくる可愛い着せ替えゲーム
Developer User4906｜Date and time 23/9/17 22:16:20
Build time 31.109 sec｜Game capacity 2.878KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>可愛い着せ替えゲーム</title>
</head>
<body>
  <div id="game-container" style="text-align: center;"></div>

getHtml() {
        return `<img src="${this.imageUrl}" alt="${this.name}" width="200" height="200">`;
      }
    }

// ゲーム内のキャラクターたち
    const characters = [
      new Character("キャラクター1", "キャラクター1の画像のURL"),
      new Character("キャラクター2", "キャラクター2の画像のURL"),
      new Character("キャラクター3", "キャラクター3の画像のURL"),
      // 他のキャラクターも追加する
    ];

// 着せ替えゲームのクラス
    class DressUpGame {
      constructor(containerId, characters) {
        this.container = document.getElementById(containerId);
        this.characters = characters;

this.currentCharacterIndex = 0;
        this.render();
      }

changeCharacter(direction) {
        this.currentCharacterIndex += direction;

// インデックスが範囲外の場合はループする
        if (this.currentCharacterIndex < 0) {
          this.currentCharacterIndex = this.characters.length - 1;
        } else if (this.currentCharacterIndex >= this.characters.length) {
          this.currentCharacterIndex = 0;
        }

this.render();
      }

render() {
        this.container.innerHTML = this.characters[this.currentCharacterIndex].getHtml();
      }
    }

// ゲームのインスタンスを作成して実行
    const dressUpGame = new DressUpGame("game-container", characters);

// スマホのタッチ操作に対応する
    document.addEventListener("touchstart", handleTouchStart, false);
    document.addEventListener("touchmove", handleTouchMove, false);

let x1 = null;
    let y1 = null;

function handleTouchStart(event) {
      const touch = event.touches[0];
      x1 = touch.clientX;
      y1 = touch.clientY;
    }

function handleTouchMove(event) {
      if (!x1 || !y1) {
        return;
      }

const touch = event.touches[0];
      const x2 = touch.clientX;
      const y2 = touch.clientY;

const xDiff = x2 - x1;
      const yDiff = y2 - y1;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
        if (xDiff > 0) {
          dressUpGame.changeCharacter(-1); // 左にスワイプされた場合、前のキャラクターに切り替える
        } else {
          dressUpGame.changeCharacter(1); // 右にスワイプされた場合、次のキャラクターに切り替える
        }
      }

x1 = null;
      y1 = null;
    }
  </script>
</body>
</html>