AIと作る100のゲーム実験室　　　　　　　　（*＾v＾*）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sea Glass Sorter - Morning Window</title>
<style>
  body {
    /* 明るい窓辺と木目のテーブルをイメージした背景 */
    background: linear-gradient(135deg, #e8f0f2 0%, #f4f1ea 40%, #dcd3c6 100%);
    color: #333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    min-height: 100vh;
  }
  h1 {
    font-size: 26px;
    margin-bottom: 5px;
    color: #4a5c66;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
  }
  p {
    margin-top: 0;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
  #game-container {
    position: relative;
    width: 600px;
    height: 600px;
    /* 英字新聞のベース色 */
    background-color: #f9f7f1;
    /* 窓からの斜めの光と、CSSで生成した英字新聞の模様を重ねる */
    background-image: 
      linear-gradient(115deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.02) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cstyle%3E text { font-family: 'Times New Roman', serif; font-size: 11px; fill: %23444; opacity: 0.25; } %3C/style%3E%3Ctext x='10' y='20'%3ELorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%3C/text%3E%3Ctext x='10' y='35'%3EUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.%3C/text%3E%3Ctext x='10' y='50'%3EDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.%3C/text%3E%3Ctext x='10' y='65'%3EExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.%3C/text%3E%3Ctext x='10' y='80'%3ECurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra,%3C/text%3E%3Ctext x='10' y='95'%3Eest eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.%3C/text%3E%3Ctext x='10' y='110'%3EDuis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper,%3C/text%3E%3Ctext x='10' y='125'%3Eligula eu tempor congue, eros est euismod turpis, id dictum felis elit sed libero. Quisque rhoncus.%3C/text%3E%3Ctext x='10' y='140'%3EThe quick brown fox jumps over the lazy dog. A journey of a thousand miles begins with a single step.%3C/text%3E%3Ctext x='10' y='155'%3ETo be, or not to be, that is the question. All that glitters is not gold. Actions speak louder than words.%3C/text%3E%3Ctext x='10' y='170'%3EPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.%3C/text%3E%3Ctext x='10' y='185'%3EProin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.%3C/text%3E%3Ctext x='10' y='200'%3ESuspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend.%3C/text%3E%3Ctext x='10' y='215'%3EUt nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla.%3C/text%3E%3Ctext x='10' y='230'%3EDonec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus,%3C/text%3E%3Ctext x='10' y='245'%3Ein luctus urna elit sit amet in. Etiam nec purus sit amet lectus blandit tincidunt. Phasellus id risus.%3C/text%3E%3Ctext x='10' y='260'%3EThe sea glass shines brightly when the morning sun hits it from the window. Beautiful colors scattered on paper.%3C/text%3E%3Ctext x='10' y='275'%3ECollecting these pieces requires patience and a good eye. The reward is a peaceful mind and a sense of order.%3C/text%3E%3Ctext x='10' y='290'%3EAenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.%3C/text%3E%3Ctext x='10' y='305'%3EAliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.%3C/text%3E%3Ctext x='10' y='320'%3EQuisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.%3C/text%3E%3Ctext x='10' y='335'%3ENam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,%3C/text%3E%3Ctext x='10' y='350'%3Esit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.%3C/text%3E%3Ctext x='10' y='365'%3EMaecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.%3C/text%3E%3Ctext x='10' y='380'%3EEtiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.%3C/text%3E%3C/svg%3E");
    background-size: cover, 400px 400px;
    border: 1px solid #d4cbb8; /* 新聞紙のフチのような細い線 */
    border-radius: 4px;
    overflow: hidden;
    /* 新聞紙が浮いているような柔らかな影 */
    box-shadow: 10px 15px 30px rgba(0,0,0,0.1), inset 0 0 40px rgba(0,0,0,0.03);
  }
  .zone-guide {
    position: absolute;
    color: rgba(0, 0, 0, 0.2); /* 背景が明るいので文字は暗く */
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    font-family: 'Times New Roman', serif;
  }
  #guide-tl { top: 20px; left: 20px; }
  #guide-tr { top: 20px; right: 20px; }
  #guide-bl { bottom: 20px; left: 20px; }
  #guide-br { bottom: 20px; right: 20px; }
  
  #center-zone {
    position: absolute;
    top: 150px;
    left: 150px;
    width: 300px;
    height: 300px;
    border: 2px dashed rgba(180, 130, 0, 0.4);
    border-radius: 50%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #center-zone span {
    color: rgba(180, 130, 0, 0.4);
    font-size: 20px;
    font-weight: bold;
    font-family: 'Times New Roman', serif;
  }
  .seaglass {
    position: absolute;
    cursor: grab;
    /* ★マスターの隠し味：透かし効果！下の新聞の文字がガラスを透過して見えます */
    mix-blend-mode: multiply; 
    opacity: 0.85;
    /* ガラス特有のフチのハイライトと影を表現 */
    box-shadow: 2px 3px 6px rgba(0,0,0,0.15), inset -2px -2px 6px rgba(255,255,255,0.6), inset 2px 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .seaglass:active {
    cursor: grabbing;
    opacity: 0.95;
    box-shadow: 4px 6px 12px rgba(0,0,0,0.2), inset -1px -1px 4px rgba(255,255,255,0.8);
  }
  #ui-panel {
    margin-top: 25px;
    text-align: center;
  }
  button {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    background-color: #5b7b7a; /* アンティークなブルーグリーン */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transition: all 0.2s;
    margin: 0 10px;
    letter-spacing: 1px;
  }
  button:hover { background-color: #4a6665; transform: translateY(-1px); box-shadow: 0 6px 8px rgba(0,0,0,0.15); }
  button:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  
  #retry-btn { background-color: #c48b62; }
  #retry-btn:hover { background-color: #a87652; }
  #result-msg {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    min-height: 24px;
    color: #444; /* 背景に合わせて暗めの色に */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
  }
</style>
</head>
<body>
<h1>SEA GLASS SORTER</h1>
<p>左ドラッグで移動、右クリックで回転。新聞の上のガラスを綺麗に仕分けよう。</p>
<div id="game-container">
  <div class="zone-guide" id="guide-tl">White</div>
  <div class="zone-guide" id="guide-tr">Green</div>
  <div class="zone-guide" id="guide-bl">Light Blue</div>
  <div class="zone-guide" id="guide-br">Brown</div>
  <div id="center-zone"><span>Rare Colors</span></div>
</div>
<div id="ui-panel">
  <button onclick="finishGame()">仕分け完了 (FINISH)</button>
  <button id="retry-btn" onclick="initGame()">リトライ (RETRY)</button>
  <div id="result-msg"></div>
</div>
<script>
  const container = document.getElementById('game-container');
  const glassPieces = [];
  let zIndexCounter = 10;
  // 明るい背景で映えるように、色のlightness(明るさ)を微調整
  const colors = [
    { type: 'white', baseHue: 0, sat: '0%', lightMin: 75, lightMax: 90, rare: false },
    { type: 'green', baseHue: 100, sat: '40%', lightMin: 50, lightMax: 70, rare: false },
    { type: 'lightblue', baseHue: 195, sat: '50%', lightMin: 55, lightMax: 80, rare: false },
    { type: 'brown', baseHue: 30, sat: '45%', lightMin: 35, lightMax: 55, rare: false },
    { type: 'yellow', baseHue: 45, sat: '70%', lightMin: 55, lightMax: 75, rare: true },
    { type: 'darkblue', baseHue: 220, sat: '60%', lightMin: 40, lightMax: 60, rare: true },
    { type: 'deepgreen', baseHue: 170, sat: '65%', lightMin: 30, lightMax: 50, rare: true },
    { type: 'red', baseHue: 0, sat: '70%', lightMin: 50, lightMax: 70, rare: true },
    { type: 'purple', baseHue: 280, sat: '50%', lightMin: 55, lightMax: 75, rare: true },
    { type: 'pink', baseHue: 330, sat: '60%', lightMin: 65, lightMax: 85, rare: true }
  ];
  function randomBorderRadius() {
    const r = () => Math.floor(Math.random() * 40 + 30);
    return `${r()}% ${r()}% ${r()}% ${r()}% / ${r()}% ${r()}% ${r()}% ${r()}%`;
  }
  function createGlass(colorDef) {
    const el = document.createElement('div');
    el.className = 'seaglass';
    
    const size = Math.floor(Math.random() * 25) + 20;
    el.style.width = size + 'px';
    el.style.height = (size * (Math.random() * 0.4 + 0.8)) + 'px';
    
    const lightness = Math.floor(Math.random() * (colorDef.lightMax - colorDef.lightMin)) + colorDef.lightMin;
    el.style.backgroundColor = `hsl(${colorDef.baseHue}, ${colorDef.sat}, ${lightness}%)`;
    el.style.borderRadius = randomBorderRadius();
    let x = Math.random() * (600 - size - 20) + 10;
    let y = Math.random() * (600 - size - 20) + 10;
    let rotation = Math.random() * 360;
    el.style.left = x + 'px';
    el.style.top = y + 'px';
    el.style.transform = `rotate(${rotation}deg)`;
    const glassData = { el, colorType: colorDef.type, isRare: colorDef.rare, x, y, rotation, size };
    glassPieces.push(glassData);
    container.appendChild(el);
    setupInteractions(el, glassData);
  }
  function setupInteractions(el, data) {
    let isDragging = false;
    let startX, startY, initialX, initialY;
    el.addEventListener('mousedown', (e) => {
      if (e.button !== 0) return;
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      initialX = data.x;
      initialY = data.y;
      el.style.zIndex = zIndexCounter++;
    });
    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      data.x = initialX + dx;
      data.y = initialY + dy;
      
      data.x = Math.max(0, Math.min(data.x, 600 - el.offsetWidth));
      data.y = Math.max(0, Math.min(data.y, 600 - el.offsetHeight));
      el.style.left = data.x + 'px';
      el.style.top = data.y + 'px';
    });
    document.addEventListener('mouseup', () => {
      isDragging = false;
    });
    el.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      data.rotation += 22.5;
      el.style.transform = `rotate(${data.rotation}deg)`;
    });
  }
  container.addEventListener('contextmenu', e => e.preventDefault());
  function initGame() {
    glassPieces.forEach(glass => glass.el.remove());
    glassPieces.length = 0;
    document.getElementById('result-msg').innerText = '';
    
    colors.forEach(color => {
      const count = color.rare ? 2 : 15; 
      for (let i = 0; i < count; i++) {
        createGlass(color);
      }
    });
  }
  function finishGame() {
    let score = 0;
    let perfect = true;
    glassPieces.forEach((glass, index) => {
      const cx = glass.x + glass.el.offsetWidth / 2;
      const cy = glass.y + glass.el.offsetHeight / 2;
      const distFromCenter = Math.hypot(cx - 300, cy - 300);
      if (glass.isRare) {
        if (distFromCenter <= 150) {
          score += 100;
        } else {
          score -= 50; perfect = false;
        }
      } else {
        let currentZone = '';
        if (cx < 300 && cy < 300) currentZone = 'white';
        else if (cx >= 300 && cy < 300) currentZone = 'green';
        else if (cx < 300 && cy >= 300) currentZone = 'lightblue';
        else if (cx >= 300 && cy >= 300) currentZone = 'brown';
        if (distFromCenter <= 150) {
          score -= 30; perfect = false;
        } else if (glass.colorType === currentZone) {
          score += 50;
        } else {
          score -= 30; perfect = false;
        }
      }
      for (let j = index + 1; j < glassPieces.length; j++) {
        const other = glassPieces[j];
        const ocx = other.x + other.el.offsetWidth / 2;
        const ocy = other.y + other.el.offsetHeight / 2;
        const dist = Math.hypot(cx - ocx, cy - ocy);
        const minSafeDist = (glass.size + other.size) * 0.45;
        
        if (dist < minSafeDist) {
          score -= 20;
          perfect = false;
        }
      }
    });
    const msgEl = document.getElementById('result-msg');
    if (perfect && score > 0) {
      msgEl.innerText = `素晴らしい根気です！スコア: ${score}点 (PERFECT!)`;
      msgEl.style.color = '#2d7a4d'; /* 明るい背景に合わせて濃い緑に */
    } else {
      msgEl.innerText = `スコア: ${score}点 (重なりやゾーン違いに注意して再調整できます)`;
      msgEl.style.color = '#a05c17'; /* オレンジ系で少し目立たせる */
    }
  }
  initGame();
</script>
</body>
</html>