Un juego de disparos completo de alta calidad con un personaje con forma de rana con un arma donde le dispara a unos NPC con forma de patos's game

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

No:36347

←

Prev Next

→

Un juego de disparos completo de alta calidad con ..ALL
Developer User16793｜Date and time 24/1/17 14:45:56
Build time 24.682 sec｜Game capacity 6.813KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Disparos</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

var frog;
        var ducks = [];
        var bullets = [];

var score = 0;

var keys = {};

// Clase para el personaje principal
        class Frog {
            constructor() {
                this.x = 400;
                this.y = 300;
                this.width = 50;
                this.height = 50;
                this.color = "green";
            }

draw() {
                canvasContext.fillStyle = this.color;
                canvasContext.fillRect(this.x, this.y, this.width, this.height);
            }

shoot() {
                var bullet = new Bullet(this.x + this.width / 2, this.y);
                bullets.push(bullet);
            }
        }

// Clase para los NPCs (patos)
        class Duck {
            constructor() {
                this.x = Math.floor(Math.random() * 750) + 25;
                this.y = Math.floor(Math.random() * 550) + 25;
                this.radius = 20;
                this.color = "yellow";
                this.velocityX = Math.random() * 5 - 2.5;
                this.velocityY = Math.random() * 5 - 2.5;
            }

draw() {
                canvasContext.beginPath();
                canvasContext.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
                canvasContext.fillStyle = this.color;
                canvasContext.fill();
                canvasContext.lineWidth = 2;
                canvasContext.strokeStyle = "black";
                canvasContext.stroke();
            }

update() {
                this.x += this.velocityX;
                this.y += this.velocityY;

// Rebotar en los bordes del canvas
                if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {
                    this.velocityX *= -1;
                }
                if (this.y + this.radius >= canvas.height || this.y - this.radius <= 0) {
                    this.velocityY *= -1;
                }
            }
        }

// Clase para las balas disparadas por el personaje principal
        class Bullet {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = 5;
                this.color = "red";
                this.velocityY = -10;
            }

update() {
                this.y += this.velocityY;
            }
        }

// Función para iniciar el juego
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

frog = new Frog();

for (var i = 0; i < 10; i++) {
                var duck = new Duck();
                ducks.push(duck);
            }

document.addEventListener("keydown", function(event) {
                keys[event.code] = true;
            });

document.addEventListener("keyup", function(event) {
                keys[event.code] = false;
            });

setInterval(updateGame, 30);
        }

// Función para dibujar en el canvas
        function draw() {
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

frog.draw();

for (var i = 0; i < ducks.length; i++) {
                ducks[i].draw();
            }

for (var i = 0; i < bullets.length; i++) {
                bullets[i].draw();
            }

// Mostrar puntaje
            canvasContext.font = "20px Arial";
            canvasContext.fillStyle = "white";
            canvasContext.fillText("Puntaje: " + score, 10, 30);
        }

// Función para actualizar el juego
        function updateGame() {
            if (keys["ArrowUp"]) {
                frog.y -= 10;
            }
            if (keys["ArrowDown"]) {
                frog.y += 10;
            }
            if (keys["ArrowLeft"]) {
                frog.x -= 10;
            }
            if (keys["ArrowRight"]) {
                frog.x += 10;
            }
            if (keys["Space"]) {
                frog.shoot();
            }

for (var i = 0; i < ducks.length; i++) {
                ducks[i].update();

// Detectar colisión entre una bala y un pato
                for (var j = 0; j < bullets.length; j++) {
                    if (collides(ducks[i], bullets[j])) {
                        ducks.splice(i, 1);
                        bullets.splice(j, 1);
                        score++;
                        break;
                    }
                }

// Detectar colisión entre el personaje principal y un pato
                if (collides(frog, ducks[i])) {
                    gameOver();
                    return;
                }
            }

for (var i = 0; i < bullets.length; i++) {
                bullets[i].update();

// Eliminar balas que salen del canvas
                if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                }
            }

draw();
        }

// Función para detectar colisiones entre objetos
        function collides(obj1, obj2) {
            var distanceX = obj1.x - obj2.x;
            var distanceY = obj1.y - obj2.y;
            var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
            
            return distance < obj1.width / 2 + obj2.radius || distance < obj2.radius / 2 + obj1.width;
        }

// Función para mostrar el mensaje de game over
        function gameOver() {
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

canvasContext.font = "bold 50px Arial";
            canvasContext.fillStyle = "red";
            canvasContext.fillText("GAME OVER", 275, 250);

canvasContext.font = "30px Arial";
            canvasContext.fillStyle = "white";
            canvasContext.fillText("Puntaje: " + score, 350, 300);
        }

// Iniciar el juego al cargar la página
        window.onload = function() {
            startGame();
        };
    </script>
</body>
</html>