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

No:892

136

Hair Explosion
Developer User3182｜Date and time 23/6/17 22:04:42
Build time 72.828 sec｜Game capacity 8.386KB｜

髪の毛が爆発するゲームは、プレーヤーが特定の色の髪の毛を3つ以上並べて消すようにするパズルゲームです。以下は、実際のプログラムの例です。

髪の毛が爆発するゲーム

同じ色の髪の毛を3つ以上並べて消そう！

スコア: 0

このゲームは、プレーヤーが同じ色の髪の毛を3つ以上並べて消すことでスコアを獲得するパズルゲームです。プレイヤーは、マウスまたはタッチスクリーンで髪の毛をクリックして選択します。選択した髪の毛の周りに同じ色の髪の毛があれば、それらが爆発してスコアを獲得することができます。爆発した髪の毛の上にあった髪の毛は、空白のスペースを埋めるために下に落ち、新しい髪の毛がランダムに生成されます。ゲームは、盤面のすべてのスペースが髪の毛で埋まっているか、またはプレイヤーがリセットボタンをクリックしてゲームを再開するまで続きます。

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

髪の毛が爆発するゲームは、プレーヤーが特定の色の髪の毛を3つ以上並べて消すようにするパズルゲームです。以下は、実際のプログラムの例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>髪の毛が爆発するゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

#game-container {
            margin: 0 auto;
            width: 90%;
            max-width: 800px;
            text-align: center;
        }

#game-board {
            display: inline-block;
        }

.hair {
            display: inline-block;
            width: 50px;
            height: 50px;
            font-size: 40px;
            line-height: 50px;
            margin: 5px;
            cursor: pointer;
        }

.hair.color-1 {
            color: red;
        }

.hair.color-2 {
            color: blue;
        }

.hair.color-3 {
            color: yellow;
        }

.hair.color-4 {
            color: green;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <h1>髪の毛が爆発するゲーム</h1>
        <p>同じ色の髪の毛を3つ以上並べて消そう！</p>
        <div id="game-board"></div>
        <p>スコア: <span id="score">0</span></p>
        <button id="reset-button">リセット</button>
    </div>

<script>
        const boardSize = 10;
        const colors = ['color-1', 'color-2', 'color-3', 'color-4'];
        const hairElements = [];

let board = [];
        let score = 0;

function initializeBoard() {
            for (let i = 0; i < boardSize; i++) {
                board[i] = [];
                for (let j = 0; j < boardSize; j++) {
                    board[i][j] = colors[Math.floor(Math.random() * colors.length)];
                }
            }
        }

function renderBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    const hairElement = document.createElement('div');
                    hairElement.className = `hair ${board[i][j]}`;
                    hairElement.dataset.x = j;
                    hairElement.dataset.y = i;
                    hairElement.addEventListener('click', handleHairClick);
                    gameBoard.appendChild(hairElement);
                    hairElements.push(hairElement);
                }
                gameBoard.appendChild(document.createElement('br'));
            }
        }

function handleHairClick() {
            const hair = this;
            const x = parseInt(hair.dataset.x);
            const y = parseInt(hair.dataset.y);
            const color = board[y][x];

const hairGroup = getHairGroup(x, y, color);

if (hairGroup.length >= 3) {
                hairGroup.forEach(hair => {
                    hair.classList.add('exploding');
                    setTimeout(() => {
                        hair.remove();
                        score += 10;
                        document.getElementById('score').innerText = score;
                    }, 500);
                });

fillEmptySpaces();
            }
        }

function getHairGroup(x, y, color) {
            const hairGroup = [];

function traverse(x, y) {
                if (x < 0 || x >= boardSize || y < 0 || y >= boardSize) {
                    return;
                }

const hair = hairElements.find(hair => hair.dataset.x === x.toString() && hair.dataset.y === y.toString());

if (hair && !hairGroup.includes(hair) && hair.classList.contains(color)) {
                    hairGroup.push(hair);
                    traverse(x - 1, y);
                    traverse(x + 1, y);
                    traverse(x, y - 1);
                    traverse(x, y + 1);
                }
            }

traverse(x, y);
            return hairGroup;
        }

function fillEmptySpaces() {
            for (let column = 0; column < boardSize; column++) {
                for (let row = boardSize - 1; row >= 0; row--) {
                    if (!board[row][column]) {
                        const aboveHair = hairElements.find(hair => hair.dataset.x === column.toString() && hair.dataset.y === (row - 1).toString());

if (aboveHair) {
                            const color = aboveHair.classList[1];
                            const hairElement = document.createElement('div');
                            hairElement.className = `hair ${color}`;
                            hairElement.dataset.x = column;
                            hairElement.dataset.y = row;
                            hairElement.addEventListener('click', handleHairClick);
                            const gameBoard = document.getElementById('game-board');
                            gameBoard.insertBefore(hairElement, aboveHair.nextSibling);
                            hairElements.splice(hairElements.indexOf(aboveHair) + 1, 0, hairElement);
                            board[row][column] = color;
                            aboveHair.dataset.y = row + 1;
                        } else {
                            board[row][column] = colors[Math.floor(Math.random() * colors.length)];
                            const color = board[row][column];
                            const hairElement = document.createElement('div');
                            hairElement.className = `hair ${color}`;
                            hairElement.dataset.x = column;
                            hairElement.dataset.y = row;
                            hairElement.addEventListener('click', handleHairClick);
                            const gameBoard = document.getElementById('game-board');
                            gameBoard.insertBefore(hairElement, gameBoard.firstChild);
                            hairElements.unshift(hairElement);
                        }
                    }
                }
            }

checkForNewGroups();
        }

function checkForNewGroups() {
            let foundGroup = false;

for (let i = 0; i < hairElements.length; i++) {
                const hair = hairElements[i];

if (hair.classList.contains('exploding')) {
                    continue;
                }

const x = parseInt(hair.dataset.x);
                const y = parseInt(hair.dataset.y);
                const color = hair.classList[1];

const hairGroup = getHairGroup(x, y, color);

if (hairGroup.length >= 3) {
                    foundGroup = true;
                    break;
                }
            }

if (foundGroup) {
                fillEmptySpaces();
            } else {
                if (hairElements.length === boardSize * boardSize) {
                    alert('ゲーム終了！あなたのスコアは' + score + '点です！');
                }
                return;
            }
        }

function resetGame() {
            board = [];
            score = 0;
            hairElements.length = 0;
            initializeBoard();
            renderBoard();
        }

document.getElementById('reset-button').addEventListener('click', resetGame);

initializeBoard();
        renderBoard();
        checkForNewGroups();
    </script>
</body>
</html>

このゲームは、プレーヤーが同じ色の髪の毛を3つ以上並べて消すことでスコアを獲得するパズルゲームです。プレイヤーは、マウスまたはタッチスクリーンで髪の毛をクリックして選択します。選択した髪の毛の周りに同じ色の髪の毛があれば、それらが爆発してスコアを獲得することができます。爆発した髪の毛の上にあった髪の毛は、空白のスペースを埋めるために下に落ち、新しい髪の毛がランダムに生成されます。ゲームは、盤面のすべてのスペースが髪の毛で埋まっているか、またはプレイヤーがリセットボタンをクリックしてゲームを再開するまで続きます。