AI game creator

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

No:34872

←

Prev Next

→

Game the spiderman
Developer User13377｜Date and time 24/1/12 2:23:32
Build time 28.209 sec｜Game capacity 5.415KB｜

Script

Este código es un juego simple de Spiderman implementado en un solo archivo HTML. El juego se controla utilizando las teclas de dirección en un dispositivo móvil y se utiliza una imagen de Spiderman y elementos gráficos básicos para crear la interfaz del juego. El objetivo del juego es disparar una telaraña para eliminar a los enemigos que descienden desde la parte superior de la pantalla y acumular puntos. La puntuación se muestra en la parte superior izquierda del lienzo.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Spiderman Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Crear el objeto de Spiderman
var spiderman = {
    x: canvas.width / 2,
    y: canvas.height - 75,
    width: 50,
    height: 75,
    speed: 5
};

// Crear variables para el control del movimiento
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

// Crear variables para el control del juego
var score = 0;
var gameover = false;

// Crear objeto de la telaraña
var web = {
    x: 0,
    y: 0,
    width: 5,
    height: 20,
    speed: 10,
    fired: false
};

// Cargar la imagen de Spiderman
var spidermanImg = new Image();
spidermanImg.src = "spiderman.png";

// Cargar el sonido de la telaraña
var webSound = new Audio();
webSound.src = "web.wav";

// Detectar las teclas presionadas
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

// Función para manejar la tecla presionada
function keyDownHandler(event) {
    event.preventDefault();
    if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = true;
    } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = true;
    } else if (event.key === "Up" || event.key === "ArrowUp") {
        upPressed = true;
    } else if (event.key === "Down" || event.key === "ArrowDown") {
        downPressed = true;
    } else if (event.key === " ") {
        fireWeb();
    }
}

// Función para manejar la tecla soltada
function keyUpHandler(event) {
    event.preventDefault();
    if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = false;
    } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = false;
    } else if (event.key === "Up" || event.key === "ArrowUp") {
        upPressed = false;
    } else if (event.key === "Down" || event.key === "ArrowDown") {
        downPressed = false;
    }
}

// Función para dibujar a Spiderman en el lienzo
function drawSpiderman() {
    ctx.drawImage(spidermanImg, spiderman.x, spiderman.y, spiderman.width, spiderman.height);
}

// Función para dibujar la telaraña
function drawWeb() {
    if (web.fired) {
        ctx.beginPath();
        ctx.rect(web.x, web.y, web.width, web.height);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.closePath();
    }
}

// Función para lanzar la telaraña
function fireWeb() {
    if (!web.fired) {
        web.x = spiderman.x + spiderman.width / 2 - web.width / 2;
        web.y = spiderman.y - web.height;
        web.fired = true;
        webSound.currentTime = 0;
        webSound.play();
    }
}

// Función para detectar la colisión entre la telaraña y los enemigos
function collisionDetection() {
    if (web.fired) {
        if (web.x >= enemy.x && web.x <= enemy.x + enemy.width && web.y <= enemy.y + enemy.height) {
            score += 10;
            web.fired = false;
            enemy.reset();
            web.y = 0;
        }
    }
}

// Objeto Enemigo
var enemy = {
    x: 0,
    y: 0,
    width: 50,
    height: 50,
    speed: 3,

// Función para mover al enemigo
    move: function() {
        this.y += this.speed;
        if (this.y > canvas.height) {
            this.reset();
            score -= 10;
        }
    },

// Función para reiniciar la posición del enemigo en la parte superior
    reset: function() {
        this.x = Math.random() * (canvas.width - this.width);
        this.y = 0;
    },

// Función para dibujar al enemigo en el lienzo
    draw: function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    }
};

// Función principal que actualiza y dibuja el juego
function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSpiderman();
    drawWeb();
    enemy.draw();
    enemy.move();
    collisionDetection();

if (rightPressed && spiderman.x < canvas.width - spiderman.width) {
        spiderman.x += spiderman.speed;
    } else if (leftPressed && spiderman.x > 0) {
        spiderman.x -= spiderman.speed;
    } else if (upPressed && spiderman.y > 0) {
        spiderman.y -= spiderman.speed;
    } else if (downPressed && spiderman.y < canvas.height - spiderman.height) {
        spiderman.y += spiderman.speed;
    }

ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Puntuación: " + score, 10, 30);

if (!gameover) {
        requestAnimationFrame(drawGame);
    }
}

// Iniciar el juego
drawGame();

</script>
</body>
</html>
```