Simulador de piano de 1901's game

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

No:28616

←

Prev Next

→

Simulador de piano de 1901
Developer User14167｜Date and time 23/12/13 10:54:29
Build time 23.686 sec｜Game capacity 2.14KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Simulador de Piano de 1901</title>
</head>
<body>
    <canvas id="pianoCanvas" width="800" height="400"></canvas>
    <script>
        // Get the canvas element
        const canvas = document.getElementById("pianoCanvas");
        const ctx = canvas.getContext("2d");

// Load the piano image
        const pianoImg = new Image();
        pianoImg.src = "piano_image.png";

// Variables to track the piano keys
        let pianoKeys = {
            "C": false,
            "D": false,
            "E": false,
            "F": false,
            "G": false,
            "A": false,
            "B": false
        };

// Function to handle key press events
        function handleKeyPress(event) {
            const key = event.key.toUpperCase();
            if (key in pianoKeys) {
                pianoKeys[key] = true;
            }
        }

// Function to handle key release events
        function handleKeyRelease(event) {
            const key = event.key.toUpperCase();
            if (key in pianoKeys) {
                pianoKeys[key] = false;
            }
        }

// Add event listeners for key press and key release events
        window.addEventListener("keydown", handleKeyPress);
        window.addEventListener("keyup", handleKeyRelease);

// Function to draw the piano on the canvas
        function drawPiano() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(pianoImg, 0, 0);

ctx.font = "30px Arial";
            ctx.fillStyle = "white";

// Draw the status of each piano key
            Object.keys(pianoKeys).forEach(function (key, index) {
                const x = 70 + (index * 50);
                const y = 320;

ctx.fillText(key, x, y);

if (pianoKeys[key]) {
                    ctx.fillRect(x - 10, y - 40, 20, 50);
                }
            });

requestAnimationFrame(drawPiano);
        }

// Start the game by drawing the piano on the canvas
        drawPiano();
    </script>
</body>
</html>