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

No:51937

115

←

Prev Next

→

Level maker
Developer User21691｜Date and time 24/3/17 3:54:26
Build time 9.537 sec｜Game capacity 2.228KB｜

Script

Level Maker Game

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Level Maker Game</title>
<style>
    body { 
        font-family: Arial, sans-serif;
        text-align: center;
    }
    canvas {
        border: 2px solid black;
        margin: 20px auto;
    }
</style>
</head>
<body>
<h1>Level Maker Game</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let grid = [];
    let gridSize = 20;
    
    canvas.addEventListener('mousedown', (e) => {
        let rect = canvas.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        
        let gridX = Math.floor(x / gridSize);
        let gridY = Math.floor(y / gridSize);
        
        if(grid[gridY][gridX] === 0){
            grid[gridY][gridX] = 1;
        } else {
            grid[gridY][gridX] = 0;
        }
        
        drawGrid();
    });
    
    function initGrid(){
        for(let i=0; i<canvas.height/gridSize; i++){
            let row = [];
            for(let j=0; j<canvas.width/gridSize; j++){
                row.push(0);
            }
            grid.push(row);
        }
    }
    
    function drawGrid(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        for(let i=0; i<grid.length; i++){
            for(let j=0; j<grid[i].length; j++){
                if(grid[i][j] === 1){
                    ctx.fillStyle = 'black';
                    ctx.fillRect(j * gridSize, i * gridSize, gridSize, gridSize);
                }
            }
        }
        
        for(let i=0; i<canvas.width/gridSize; i++){
            ctx.beginPath();
            ctx.moveTo(i * gridSize, 0);
            ctx.lineTo(i * gridSize, canvas.height);
            ctx.stroke();
        }
        for(let i=0; i<canvas.height/gridSize; i++){
            ctx.beginPath();
            ctx.moveTo(0, i * gridSize);
            ctx.lineTo(canvas.width, i * gridSize);
            ctx.stroke();
        }
    }
    
    initGrid();
    drawGrid();
</script>
</body>
</html>
```