AI game creator

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

No:47288

←

Prev Next

→

Piano
Developer User18896｜Date and time 24/2/28 0:07:17
Build time 7.028 sec｜Game capacity 1.519KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Piano Game</title>
</head>
<body>
    <canvas id="pianoCanvas" width="400" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('pianoCanvas');
        const ctx = canvas.getContext('2d');
        
        const pianoKeys = [
            { color: 'white', x: 0, y: 0, width: 50, height: 400 },
            { color: 'white', x: 50, y: 0, width: 50, height: 400 },
            { color: 'black', x: 65, y: 0, width: 30, height: 200 },
            { color: 'white', x: 100, y: 0, width: 50, height: 400 },
            // Add more keys here
        ];
        
        function drawPiano() {
            for (let key of pianoKeys) {
                ctx.fillStyle = key.color;
                ctx.fillRect(key.x, key.y, key.width, key.height);
                ctx.strokeStyle = 'black';
                ctx.strokeRect(key.x, key.y, key.width, key.height);
            }
        }
        
        drawPiano();
        
        canvas.addEventListener('touchstart', function(event) {
            const x = event.touches[0].clientX - canvas.offsetLeft;
            const y = event.touches[0].clientY - canvas.offsetTop;
            
            for (let key of pianoKeys) {
                if (x >= key.x && x <= key.x + key.width && y >= key.y && y <= key.y + key.height) {
                    console.log('Pressed key color: ' + key.color);
                    break;
                }
            }
        });
    </script>
</body>
</html>
```