Crea un gioco shooting star's game

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

No:44702

119

←

Prev Next

→

Crea un gioco shooting star
Developer User19399｜Date and time 24/2/19 0:49:00
Build time 8.903 sec｜Game capacity 2.522KB｜

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>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');

const player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            color: 'blue',
            speed: 10
        };

const bullets = [];
        const bulletSpeed = 5;

let shooting = false;

function drawPlayer() {
            context.fillStyle = player.color;
            context.fillRect(player.x, player.y, player.width, player.height);
        }

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

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

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

function shootBullet() {
            bullets.push({
                x: player.x + player.width / 2 - 2.5,
                y: player.y
            });
        }

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

drawPlayer();
            drawBullets();

if (shooting) {
                shootBullet();
            }

updateBullets();

requestAnimationFrame(gameLoop);
        }

document.addEventListener('keyup', event => {
            if (event.key === ' ') {
                shooting = false;
            }
        });

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