AI game creator

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

No:45370

←

Prev Next

→

0>Puzzle
Developer WinnerWiener1332｜Date and time 24/2/20 13:54:11
Build time 10.781 sec｜Game capacity 2.546KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puzzle Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const gridSize = 100;
        const tiles = [
            {x: 0, y: 0},
            {x: 100, y: 0},
            {x: 200, y: 0},
            {x: 0, y: 100},
            {x: 100, y: 100},
            {x: 200, y: 100},
            {x: 0, y: 200},
            {x: 100, y: 200},
            {x: 200, y: 200}
        ];

const emptyTile = {x: 200, y: 200};

function drawTiles() {
            for (let i = 0; i < tiles.length; i++) {
                const tile = tiles[i];
                ctx.fillStyle = 'red';
                ctx.fillRect(tile.x, tile.y, gridSize, gridSize);
            }
        }

function drawEmptyTile() {
            ctx.fillStyle = 'white';
            ctx.fillRect(emptyTile.x, emptyTile.y, gridSize, gridSize);
        }

function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawTiles();
            drawEmptyTile();
        }

drawGame();

canvas.addEventListener('click', function(event) {
            const clickedTile = {
                x: Math.floor(event.offsetX / gridSize) * gridSize,
                y: Math.floor(event.offsetY / gridSize) * gridSize
            };

moveTile(clickedTile);
            drawGame();
        });
    </script>
</body>
</html>