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

No:7135

2130

←

Prev Next

→

Horror Puzzle! Complete the puzzle by tearing apar..ALL
Developer User3589｜Date and time 23/7/5 19:42:15
Build time 25.462 sec｜Game capacity 4.242KB｜

Script

了解しました。以下にホラーパズルゲームの実装例を示します。

ホラーパズル！

恐怖の文字をバラバラにしてパズルをクリアしよう

この実装では、「ホラーパズル！」というタイトルと、ランダムに並んだ文字のパズルが表示されます。パズルの文字をクリックすると、クリックした文字と空のスペースが入れ替わります。全ての文字が正しい順序に並んでいる時にパズルクリアとなり、お祝いのアラートが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下にホラーパズルゲームの実装例を示します。

```html
<html>
<head>
 <style>
 body {
 text-align: center;
 font-size: 36px;
 font-family: 'Arial', sans-serif;
 }
 
 .puzzle-container {
 display: inline-block;
 position: relative;
 margin: 20px;
 }
 
 .piece {
 display: inline-block;
 background-color: #ff6600;
 color: white;
 padding: 10px;
 border-radius: 5px;
 margin: 5px;
 cursor: pointer;
 transition: transform 0.3s ease;
 }
 
 .piece:hover {
 transform: scale(1.1);
 }
 
 .piece.correct {
 background-color: #008000;
 }
 </style>
</head>
<body>
 <h1>ホラーパズル！</h1>
 <div id="puzzleContainer" class="puzzle-container">
 恐
 怖
 の
 文
 字
 を
 バ
 ラ
 バ
 ラ
 に
 し
 て
 パ
 ズ
 ル
 を
 ク
 リ
 ア
 し
 よ
 う
 </div>
 
 <script>
 // パズルの配列を作成
 const puzzlePieces = Array.from(document.getElementsByClassName('piece'));
 
 // パズルの文字列をシャッフルする関数
 function shufflePuzzle() {
 for (let i = puzzlePieces.length - 1; i > 0; i--) {
 const j = Math.floor(Math.random() * (i + 1));
 [puzzlePieces[i].innerText, puzzlePieces[j].innerText] = [puzzlePieces[j].innerText, puzzlePieces[i].innerText];
 }
 }
 
 // パズルが正解かどうかを判定する関数
 function checkPuzzle() {
 const correctOrder = "恐怖の文字をバラバラにしてパズルをクリアしよう！";
 const currentOrder = puzzlePieces.map(piece => piece.innerText).join('');
 if (currentOrder === correctOrder) {
 puzzlePieces.forEach(piece => piece.classList.add('correct'));
 setTimeout(() => {
 alert('パズルをクリアしました！');
 }, 500);
 }
 }
 
 // ゲーム開始時にシャッフルされたパズルを表示する
 window.onload = function() {
 shufflePuzzle();
 };
 
 // パズルをクリックした時に入れ替える
 puzzlePieces.forEach(piece => {
 piece.addEventListener('click', () => {
 const currentIndex = puzzlePieces.indexOf(piece);
 const emptyIndex = puzzlePieces.findIndex(piece => piece.innerText === '');
 if (currentIndex === emptyIndex + 1 || currentIndex === emptyIndex - 1 || Math.abs(currentIndex - emptyIndex) === 5) {
 [piece.innerText, puzzlePieces[emptyIndex].innerText] = [puzzlePieces[emptyIndex].innerText, piece.innerText];
 }
 checkPuzzle();
 });
 });
 </script>
</body>
</html>
```