ピタゴラスイッチ's game | AI game creator

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

No:31860

77

ピタゴラスイッチ
Developer User15254｜Date and time 23/12/28 17:15:27
Build time 41.435 sec｜Game capacity 4.445KB｜

了解です。以下にピタゴラスイッチと呼ばれるゲームの実装例を示します。このゲームでは、ブロックをタップすることで連鎖的にブロックが消えていく仕組みです。

このコードをHTMLファイルに保存して開くと、スマホで操作可能なピタゴラスイッチのゲームがプレイできます。ブロックをタップすると、同じ色のブロックが4つ以上隣り合っている場合、そのブロックが消えます。連鎖的にブロックが消えていく様子を楽しんでください。

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

了解です。以下にピタゴラスイッチと呼ばれるゲームの実装例を示します。このゲームでは、ブロックをタップすることで連鎖的にブロックが消えていく仕組みです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ピタゴラスイッチ</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        const blockWidth = 40;
        const blockHeight = 40;
        const columns = Math.floor(canvas.width / blockWidth);
        const rows = Math.floor((canvas.height - blockHeight) / blockHeight);

let grid = [];
        let cascade = false;
        
        // 初期化
        function init() {
            for (let col = 0; col < columns; col++) {
                grid[col] = [];
                for (let row = 0; row < rows; row++) {
                    grid[col][row] = {
                        color: getRandomColor(),
                        visible: true
                    };
                }
            }
            draw();
        }
        
        // ゲームを開始する
        function start() {
            cascade = true;
            checkCascade();
        }
        
        // 画面をクリアする
        function clear() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        // グリッドを描画する
        function draw() {
            clear();
            
            for (let col = 0; col < columns; col++) {
                for (let row = 0; row < rows; row++) {
                    const block = grid[col][row];
                    
                    if (block.visible) {
                        ctx.fillStyle = block.color;
                        ctx.fillRect(col * blockWidth, row * blockHeight, blockWidth, blockHeight);
                    }
                }
            }
        }
        
        // クリックされた座標を取得する
        function getCursorPosition(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            const col = Math.floor(x / blockWidth);
            const row = Math.floor(y / blockHeight);
            
            return { col, row };
        }
        
        // クリックされた座標のブロックを非表示にする
        function handleClick(event) {
            if (!cascade) return;
            
            const { col, row } = getCursorPosition(event);
            grid[col][row].visible = false;
            
            checkCascade();
        }
        
        // ピタゴラスイッチの連鎖をチェックする
        function checkCascade() {
            cascade = false;
            
            for (let col = 0; col < columns; col++) {
                for (let row = 0; row < rows; row++) {
                    const block = grid[col][row];
                    
                    if (block.visible) {
                        if (block.color === grid[col][row + 1]?.color
                            && block.color === grid[col + 1]?.[row]?.color
                            && block.color === grid[col + 1]?.[row + 1]?.color) {
                            block.visible = false;
                            cascade = true;
                        }
                    }
                }
            }
            
            if (cascade) {
                checkCascade();
            } else {
                draw();
            }
        }
        
        // ランダムな色を取得する
        function getRandomColor() {
            const colors = ["red", "blue", "green", "yellow", "orange", "purple"];
            return colors[Math.floor(Math.random() * colors.length)];
        }
        
        init();
        canvas.addEventListener("click", handleClick);
    </script>
</body>
</html>
```

このコードをHTMLファイルに保存して開くと、スマホで操作可能なピタゴラスイッチのゲームがプレイできます。ブロックをタップすると、同じ色のブロックが4つ以上隣り合っている場合、そのブロックが消えます。連鎖的にブロックが消えていく様子を楽しんでください。