firework(s) manufacturer's game

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

No:9149

146

←

Prev Next

→

firework(s) manufacturer
Developer User4271｜Date and time 23/7/21 17:50:09
Build time 33.807 sec｜Game capacity 3.541KB｜

Script

以下は、HTMLファイルに実装された花火メーカーのサンプルコードです。

このコードでは、スマホで操作可能な花火メーカーが実装されています。指をタッチしてドラッグすると花火が打ち上がります。花火は画面に描画され、時間と共に消えていきます。また、花火の色や大きさはランダムに設定されます。

←

Prev　Next

→ 　

Back　

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

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

以下は、HTMLファイルに実装された花火メーカーのサンプルコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>花火メーカー</title>
    <style>
        #canvas {
            touch-action: none;
            background-color: black;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        // キャンバス要素の取得
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

// タッチイベントのリスナーを追加
        canvas.addEventListener('touchstart', handleTouchStart);
        canvas.addEventListener('touchmove', handleTouchMove);
        canvas.addEventListener('touchend', handleTouchEnd);

// 花火の配列
        let fireworks = [];

// 花火を作成する関数
        function createFirework(x, y) {
            const firework = {
                x: x,
                y: y,
                speed: Math.random() * 2 + 1,
                radius: Math.random() * 3 + 1,
                color: getRandomColor(),
                angle: Math.random() * Math.PI * 2
            };
            fireworks.push(firework);
        }

// ランダムな色を取得する関数
        function getRandomColor() {
            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

// タッチの開始時の処理
        function handleTouchStart(event) {
            const touch = event.touches[0];
            createFirework(touch.pageX, touch.pageY);
        }

// タッチの移動時の処理
        function handleTouchMove(event) {
            event.preventDefault();
            const touch = event.touches[0];
            createFirework(touch.pageX, touch.pageY);
        }

// タッチの終了時の処理
        function handleTouchEnd(event) {
            event.preventDefault();
        }

// アニメーションの更新処理
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < fireworks.length; i++) {
                const firework = fireworks[i];
                firework.x += Math.cos(firework.angle) * firework.speed;
                firework.y += Math.sin(firework.angle) * firework.speed;
                firework.speed *= 0.99;
                firework.radius -= 0.1;

ctx.beginPath();
                ctx.arc(firework.x, firework.y, firework.radius, 0, Math.PI * 2);
                ctx.fillStyle = firework.color;
                ctx.fill();

if (firework.radius <= 0) {
                    fireworks.splice(i, 1);
                    i--;
                }
            }

requestAnimationFrame(update);
        }

// 初期化処理
        function init() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            update();
        }

// 初期化処理の実行
        init();
    </script>
</body>
</html>
```