【キャラ着せかえシミュレーター】メモ帳でつくる楽しいおしゃれ遊び！

【キャラ着せかえシミュレーター】メモ帳でつくる楽しいおしゃれ遊び！
1. ◆ どんなゲーム？
2. ◆ ChatGPTへのプロンプト例
◆ メモ帳に貼るコード（UTF-8で保存）
◆ あそびかた
◆ まとめ

【キャラ着せかえシミュレーター】メモ帳でつくる楽しいおしゃれ遊び！

こんにちは！今日は、ボタンをクリックするだけでキャラの服や髪型が変わる、
かわいくて楽しい「キャラ着せかえゲーム」を作ってみましょう🎨
使うのは、パソコンのメモ帳とブラウザだけです！

◆ どんなゲーム？

中央にキャラ（顔つきの〇）が表示されていて、
ボタンを押すと「服」や「髪型」のデザインが変わるよ！
自分だけのコーディネートができる👗✨
キャラ着せかえゲーム

◆ ChatGPTへのプロンプト例

小学生向けの「キャラ着せかえゲーム」をHTMLとJavaScriptで作ってください。服と髪型をボタンで切り替えられるようにして、画像はシンプルな図形や色で表現してください。メモ帳で保存して、クリックして遊べるようにしてください。

◆ メモ帳に貼るコード（UTF-8で保存）

html

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>キャラ着せかえ</title>

  <style>

    body {

      text-align: center;

      font-family: sans-serif;

      padding-top: 30px;

    }

    #character {

      position: relative;

      width: 200px;

      height: 300px;

      margin: 0 auto;

    }

    .part {

      position: absolute;

      width: 100%;

      height: 100%;

    }

    #face {

      background: #ffe0bd;

      border-radius: 50%;

      width: 100px;

      height: 100px;

      margin: 0 auto;

      position: relative;

      top: 30px;

    }

    .hair {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translateX(-50%);

      width: 110px;

      height: 60px;

      border-radius: 50% 50% 0 0;

      background-color: brown;

    }

    .clothes {

      position: absolute;

      top: 130px;

      left: 50%;

      transform: translateX(-50%);

      width: 120px;

      height: 150px;

      background-color: lightblue;

      border-radius: 20px;

    }

    button {

      margin: 5px;

      font-size: 1em;

    }

  </style>

</head>

<body>

  <h1>キャラ着せかえシミュレーター</h1>

  <div id="character">

    <div id="face"></div>

    <div id="hair" class="hair"></div>

    <div id="clothes" class="clothes"></div>

  </div>

  <div>

    <button onclick="changeHair()">髪型チェンジ</button>

    <button onclick="changeClothes()">服チェンジ</button>

  </div>
  <script>

    const hairColors = ["brown", "black", "orange", "pink"];

    const clothesColors = ["lightblue", "lightgreen", "yellow", "purple"];

    let hairIndex = 0;

    let clothesIndex = 0;
    function changeHair() {

      hairIndex = (hairIndex + 1) % hairColors.length;

      document.getElementById("hair").style.backgroundColor = hairColors[hairIndex];

    }

function changeClothes() { clothesIndex = (clothesIndex + 1) % clothesColors.length; document.getElementById("clothes").style.backgroundColor = clothesColors[clothesIndex]; } </script> </body> </html>