Music tiles .tiles play musical notes's game

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

No:47216

←

Prev Next

→

Music tiles .tiles play musical notes
Developer User18896｜Date and time 24/2/27 18:17:03
Build time 7.599 sec｜Game capacity 1.696KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Music Tiles</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

class Tile {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
                this.note = new Audio('note.mp3');
            }

draw() {
                const ctx = document.getElementById('gameCanvas').getContext('2d');
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, tileWidth, tileHeight);
            }

playNote() {
                this.note.play();
            }
        }

function createTiles() {
            for (let i = 0; i < 4; i++) {
                let tile = new Tile(i * tileWidth, 450);
                tiles.push(tile);
            }
        }

function drawTiles() {
            tiles.forEach(tile => {
                tile.draw();
            });
        }

function handleTouch(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

tiles.forEach(tile => {
                if (touchX >= tile.x && touchX <= tile.x + tileWidth && touchY >= tile.y && touchY <= tile.y + tileHeight) {
                    tile.playNote();
                }
            });
        }

createTiles();
        drawTiles();

document.getElementById('gameCanvas').addEventListener('touchstart', handleTouch);
    </script>
</body>
</html>