Movie maker simulator's game

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

No:26758

←

Prev Next

→

Movie maker simulator
Developer Rowdagriff｜Date and time 23/12/2 10:48:04
Build time 29.205 sec｜Game capacity 2.58KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f3f3f3;
        margin: 0;
        padding: 0;
    }

.header {
        padding: 20px;
        background-color: #333;
        color: #fff;
        text-align: center;
    }

#canvasContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 50px);
    }

#canvas {
        border: 1px solid #999;
        background-color: #fff;
    }

.button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .button:hover {
        background-color: #555;
    }
</style>
</head>
<body>
    <div class="header">
        <h1>Movie Maker Simulator</h1>
    </div>
    <div id="canvasContainer">
        <canvas id="canvas" width="400" height="400"></canvas>
    </div>

// Pictograms
        const filmIcon = '🎞️';
        const cameraIcon = '📷';
        const clapboardIcon = '🎬';

// Game state
        let filmCount = 0;
        let cameraCount = 0;
        let clapboardCount = 0;

// Main game loop
        function gameLoop() {
            drawGame();
        }

// Draw the game on canvas
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '48px Arial';
            ctx.fillStyle = '#333';
            ctx.fillText(filmIcon + ' ' + filmCount, 50, 100);
            ctx.fillText(cameraIcon + ' ' + cameraCount, 50, 200);
            ctx.fillText(clapboardIcon + ' ' + clapboardCount, 50, 300);
        }

// Event listeners for user input
        canvas.addEventListener('click', handleClick);

function handleClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

if (x > 50 && x < 250 && y > 50 && y < 150) {
                filmCount++;
            } else if (x > 50 && x < 250 && y > 150 && y < 250) {
                cameraCount++;
            } else if (x > 50 && x < 250 && y > 250 && y < 350) {
                clapboardCount++;
            }
        }

// Start the game
        gameLoop();
    </script>
</body>
</html>