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

No:6441

105

←

Prev Next

→

Decorate your bookshelf! You can decorate your roo..ALL
Developer User3589｜Date and time 23/7/2 13:10:50
Build time 23.669 sec｜Game capacity 2.033KB｜

Script

了解しました。以下にプログラムの例を示します。

本棚を飾ろう！

このプログラムは、本のリストを表示し、クリックすると本を選択・非選択できるようになっています。本の選択状態は背景色で表示されます。ただし、このプログラムは完全なゲームではなく、本棚の装飾に寄せた部分的なゲーム化となっています。必要に応じて改良や追加の機能を行ってください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にプログラムの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<title>本棚を飾ろう！</title>
<style>
  body {
    background-color: #FDE3A7;
    text-align: center;
  }

h1 {
    font-family: Arial, sans-serif;
    font-size: 28px;
    color: #8A4B08;
    margin-top: 50px;
  }

#shelf {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
  }

.book {
    width: 100px;
    height: 150px;
    background-color: #FFF;
    border: 2px solid #8A4B08;
    margin: 10px;
    padding-top: 10px;
    cursor: pointer;
  }

.selected {
    background-color: #FFA500;
  }
</style>
</head>
<body>
<h1>本棚を飾ろう！</h1>
<div id="shelf"></div>
<script>
  // 本のリスト（仮のデータ）
  const books = [
    { title: "小説A", emoji: "📕" },
    { title: "小説B", emoji: "📗" },
    { title: "小説C", emoji: "📘" },
    { title: "小説D", emoji: "📙" },
    { title: "小説E", emoji: "📔" },
    { title: "小説F", emoji: "📚" }
  ];

// 初期表示
  const shelf = document.getElementById("shelf");
  for (let i = 0; i < books.length; i++) {
    const book = document.createElement("div");
    book.classList.add("book");
    book.innerHTML = books[i].emoji;
    book.addEventListener("click", () => selectBook(book.classList));
    shelf.appendChild(book);
  }

// 本を選択・非選択
  function selectBook(classList) {
    if (classList.contains("selected")) {
      classList.remove("selected");
    } else {
      classList.add("selected");
    }
  }
</script>
</body>
</html>
```

このプログラムは、本のリストを表示し、クリックすると本を選択・非選択できるようになっています。本の選択状態は背景色で表示されます。

ただし、このプログラムは完全なゲームではなく、本棚の装飾に寄せた部分的なゲーム化となっています。必要に応じて改良や追加の機能を行ってください。