Crea un gioco shooting star's game

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

No:44700

117

←

Prev Next

→

Crea un gioco shooting star
Developer User19399｜Date and time 24/2/19 0:46:14
Build time 10.978 sec｜Game capacity 3.101KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Gioco Shooting Star</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const player = { x: 300, y: 360, size: 20 };

const bullets = [];
        const stars = [];

let score = 0;

function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.size, player.size);
        }

function drawBullets() {
            ctx.fillStyle = 'red';
            bullets.forEach(bullet => {
                ctx.fillRect(bullet.x, bullet.y, 5, 10);
            });
        }

function drawStars() {
            ctx.fillStyle = 'yellow';
            stars.forEach(star => {
                ctx.beginPath();
                ctx.moveTo(star.x, star.y);
                ctx.lineTo(star.x + 5, star.y + 20);
                ctx.lineTo(star.x - 5, star.y + 20);
                ctx.closePath();
                ctx.fill();
            });
        }

function updateBullets() {
            bullets.forEach(bullet => {
                bullet.y -= 5;
            });

bullets.forEach((bullet, index) => {
                if (bullet.y < 0) {
                    bullets.splice(index, 1);
                }
            });
        }

function updateStars() {
            stars.forEach(star => {
                star.y += 2;
            });

stars.forEach((star, index) => {
                if (star.y > 400) {
                    stars.splice(index, 1);
                }
            });
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
            drawBullets();
            drawStars();
            updateBullets();
            updateStars();
            checkCollision();

requestAnimationFrame(gameLoop);
        }

window.addEventListener('keydown', (e) => {
            if (e.key === ' ' && bullets.length < 3) {
                bullets.push({ x: player.x + player.size / 2, y: player.y });
            }
        });

setInterval(() => {
            stars.push({ x: Math.random() * 600, y: 0 });
        }, 1000);

gameLoop();
    </script>
</body>
</html>