Connect three Tetris style game with geometric gems.'s game

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

No:24618

←

Prev Next

→

Connect three Tetris style game with geometric gem..ALL
Developer Bardly｜Date and time 23/11/10 12:51:34
Build time 87.922 sec｜Game capacity 4.807KB｜

Script

Sure! Here's an example of a simplified implementation of a "Connect Three" game using JavaScript and HTML. Please note that due to the limitations of the text-based environment, certain features like pictograms and smartphone operation cannot be included. However, you can interact with the game by clicking on the gems with your mouse. Here's the code for the single HTML file:

To play the game, save the above code in a file with a `.html` extension (e.g., `connect-three-game.html`) and open it in a web browser. You will see a grid representing the game board filled with various colored gems. Click on a gem to select it and remove the connected gems of the same color. Keep in mind that this is a simplified version of the game, lacking features like scoring, levels, and animations, but it should give you a starting point for building a more complete game.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Here's the code for the single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Connect Three Game</title>
    <style>
        /* Define styles for the game board and gems */
        #game-board {
            display: grid;
            grid-template-columns: repeat(6, 50px);
            grid-template-rows: repeat(6, 50px);
            gap: 5px;
            width: 320px;
            margin: 0 auto;
        }

.gem {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }

.red {
            background-color: red;
        }

.green {
            background-color: green;
        }

.blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

let gameBoard = [];

// Generate the game board with empty slots
        for (let row = 0; row < boardSize; row++) {
            gameBoard[row] = [];
            for (let col = 0; col < boardSize; col++) {
                gameBoard[row][col] = null;
            }
        }

// Create a new gem at the given position
        function createGem(row, col) {
            const gemColor = gemColors[Math.floor(Math.random() * gemColors.length)];
            gameBoard[row][col] = gemColor;

const gemElement = document.createElement('div');
            gemElement.className = `gem ${gemColor}`;
            gemElement.addEventListener('click', () => {
                selectGem(row, col);
            });

const gameBoardElement = document.getElementById('game-board');
            gameBoardElement.appendChild(gemElement);
        }

// Select a gem to connect with its neighbors
        function selectGem(row, col) {
            const selectedGem = gameBoard[row][col];
            if (selectedGem) {
                const connectedGems = [];

// Check left neighbor
                if (col > 0 && gameBoard[row][col - 1] === selectedGem) {
                    connectedGems.push({ row, col: col - 1 });
                }

// Check right neighbor
                if (col < boardSize - 1 && gameBoard[row][col + 1] === selectedGem) {
                    connectedGems.push({ row, col: col + 1 });
                }

// Check top neighbor
                if (row > 0 && gameBoard[row - 1][col] === selectedGem) {
                    connectedGems.push({ row: row - 1, col });
                }

// Check bottom neighbor
                if (row < boardSize - 1 && gameBoard[row + 1][col] === selectedGem) {
                    connectedGems.push({ row: row + 1, col });
                }

if (connectedGems.length > 0) {
                    connectedGems.push({ row, col });
                    removeConnectedGems(connectedGems);
                }
            }
        }

// Remove the connected gems from the board
        function removeConnectedGems(connectedGems) {
            for (const gem of connectedGems) {
                gameBoard[gem.row][gem.col] = null;
                const gemElement = document.querySelector(`.gem:nth-child(${gem.row * boardSize + gem.col + 1})`);
                gemElement.parentNode.removeChild(gemElement);
            }
        }

// Initialize the game board with gems
        function initializeGame() {
            for (let row = 0; row < boardSize; row++) {
                for (let col = 0; col < boardSize; col++) {
                    createGem(row, col);
                }
            }
        }

// Start the game
        initializeGame();
    </script>
</body>
</html>
```

Keep in mind that this is a simplified version of the game, lacking features like scoring, levels, and animations, but it should give you a starting point for building a more complete game.