爽快パズルゲーム
クリックして、同じ色のタイルを隣接するタイルと交換してください。
以下が、JavaScriptを用いた爽快パズルゲームの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>爽快パズルゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 20px;
}
h1 {
margin-bottom: 30px;
}
#game-board {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 5px;
overflow: hidden;
}
.game-tile {
flex-basis: 32.5%;
margin: 1%;
background-color: #FDB813;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.game-tile.selected {
background-color: #FF5722;
}
</style>
</head>
<body>
<h1>爽快パズルゲーム</h1>
<p id="instructions">クリックして、同じ色のタイルを隣接するタイルと交換してください。</p>
<div id="game-board">
<div class="game-tile" data-color="red"></div>
<div class="game-tile" data-color="orange"></div>
<div class="game-tile" data-color="yellow"></div>
<div class="game-tile" data-color="green"></div>
<div class="game-tile" data-color="blue"></div>
<div class="game-tile" data-color="purple"></div>
</div>
<script>
// ゲームボードのタイルを操作するためのコード
var selectedTile; // 最後に選択されたタイル
var gameTiles = document.querySelectorAll('.game-tile'); // ゲームボードのタイル
// クリックイベントをタイルに追加
for (var i = 0; i < gameTiles.length; i++) {
gameTiles[i].addEventListener('click', function() {
if (this === selectedTile) {
// 既に選択されている場合は何もしない
return;
} else if (!selectedTile) {
// 最初のタイルの場合、選択状態に設定し、背景色を変更する
selectedTile = this;
selectedTile.classList.add('selected');
} else {
// 選択された2つのタイルを交換する
var temp = this.style.backgroundColor;
this.style.backgroundColor = selectedTile.style.backgroundColor;
selectedTile.style.backgroundColor = temp;
// タイルの選択状態をリセットする
selectedTile.classList.remove('selected');
selectedTile = null;
}
});
}
// ゲームの開始時にタイルをランダムに並び替える
function shuffleTiles() {
var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
for (var i = 0; i < gameTiles.length; i++) {
var randomIndex = Math.floor(Math.random() * colors.length);
gameTiles[i].style.backgroundColor = colors[randomIndex];
gameTiles[i].setAttribute('data-color', colors[randomIndex]);
colors.splice(randomIndex, 1);
}
}
shuffleTiles();
</script>
</body>
</html>
```
このパズルゲームは、6つの異なる色のタイルを持つ正方形のゲームボードで構成されています。ユーザーは、クリックしてタイルを選択し、隣接するタイルと交換することができます。ゴールは、タイルを同じ色でグループ化し、ボード全体を単一の色で塗りつぶすことです。
このゲームには、シンプルで使いやすいインターフェイスが付属しており、ユーザーは容易にゲームをプレイできます。パズルの難易度は、タイルを並べ替える方法によって異なるため、多くのプレイヤーに適しています。このゲームは、楽しくて興味深い視覚的な体験を提供し、ユーザーが長時間遊び続けることができるように設計されています。