AI game creator

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

No:16328

←

Prev Next

→

实验室
Developer User7236｜Date and time 23/9/17 9:49:14
Build time 40.171 sec｜Game capacity 4.815KB｜

Script

实验室游戏

实验室1

实验室2

实验室3

实验室4

实验室5

实验室6

←

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>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #f1f1f1;
        font-family: Arial, sans-serif;
      }

.game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      }

.title {
        font-size: 24px;
        margin-bottom: 20px;
      }

.start-button,
      .reset-button {
        padding: 10px 20px;
        border: none;
        border-radius: 3px;
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        margin-bottom: 10px;
        cursor: pointer;
      }

.reset-button {
        background-color: #dc3545;
      }

.item-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 300px;
      }

.item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        border-radius: 5px;
        border: 2px solid #007bff;
        margin: 10px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

.item img {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
      }

.item.active {
        background-color: #007bff;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <div class="title">实验室游戏</div>
      <button class="start-button">开始游戏</button>
      <div class="item-container">
        <div class="item" data-item="1">
          <img src="pictogram1.png">
          实验室1
        </div>
        <div class="item" data-item="2">
          <img src="pictogram2.png">
          实验室2
        </div>
        <div class="item" data-item="3">
          <img src="pictogram3.png">
          实验室3
        </div>
        <div class="item" data-item="4">
          <img src="pictogram4.png">
          实验室4
        </div>
        <div class="item" data-item="5">
          <img src="pictogram5.png">
          实验室5
        </div>
        <div class="item" data-item="6">
          <img src="pictogram6.png">
          实验室6
        </div>
      </div>
      <button class="reset-button">重新开始</button>
    </div>

// 保存当前选中的实验室
      let activeItem = null;

// 启动游戏逻辑
      function startGame() {
        // 随机选择一个实验室作为目标
        const targetItemIndex = Math.floor(Math.random() * itemContainers.length);
        const targetItem = itemContainers[targetItemIndex];
        targetItem.classList.add('active');

// 监听实验室点击事件
        itemContainers.forEach(item => {
          item.addEventListener('click', handleItemClick);
        });
      }

// 实验室点击事件处理
      function handleItemClick(event) {
        const currentItem = event.target.closest('.item');
        
        // 如果实验室已经被选中或游戏已结束，则不进行任何操作
        if (currentItem.classList.contains('active') || activeItem === null) {
          return;
        }

// 判断点击的实验室是否为目标实验室
        if (currentItem === activeItem) {
          currentItem.classList.add('active');
          alert('恭喜你，找到了目标实验室！游戏结束。');
        } else {
          alert('很抱歉，你没有找到目标实验室。再试一次吧！');
        }
      }

// 重新开始游戏逻辑
      function resetGame() {
        // 移除所有实验室的选中状态
        itemContainers.forEach(item => {
          item.classList.remove('active');
        });

// 取消实验室点击事件监听
        itemContainers.forEach(item => {
          item.removeEventListener('click', handleItemClick);
        });

// 清空当前选中的实验室
        activeItem = null;
      }

// 监听开始游戏按钮点击事件
      startButton.addEventListener('click', () => {
        startGame();
      });

// 监听重新开始按钮点击事件
      resetButton.addEventListener('click', () => {
        resetGame();
      });
    </script>
  </body>
</html>