Crea un juego estilo Mario dónde tienes que salvar una pizza's game

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

No:23536

←

Prev Next

→

Crea un juego estilo Mario dónde tienes que salvar..ALL
Developer User10981｜Date and time 23/11/1 11:43:52
Build time 51.082 sec｜Game capacity 2.479KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<style>
    /* CSS Styles for the game */
    body {
        background-color: #c0c0c0;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    #gameCanvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
    
    .player {
        width: 50px;
        height: 50px;
        background-image: url('pictograma_mario.png');
        background-size: cover;
        position: absolute;
    }
    
    .pizza {
        width: 50px;
        height: 50px;
        background-image: url('pictograma_pizza.png');
        background-size: cover;
        position: absolute;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

window.onload = function() {
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

var framesPerSecond = 30;
        setInterval(updateGame, 1000/framesPerSecond);

canvas.addEventListener('keydown', handleKeyPress);
    }

function updateGame() {
        movePlayer();
        checkCollision();
        drawGraphics();
    }

function movePlayer() {
        if(playerX < canvas.width-50) {
            playerX += 5;
        }
    }

function handleKeyPress(event) {
        if(event.keyCode === 32) {
            movePlayer();
        }
    }

function checkCollision() {
        var playerRight = playerX + 50;
        var playerBottom = playerY + 50;
        var pizzaRight = pizzaX + 50;
        var pizzaBottom = pizzaY + 50;

if(playerRight > pizzaX && 
           playerX < pizzaRight && 
           playerBottom > pizzaY && 
           playerY < pizzaBottom) {
            alert("¡Has salvado la pizza!");
            resetGame();
        }
    }

function drawGraphics() {
        // Clear the entire canvas
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
        canvasContext.fillStyle = "#000000";
        canvasContext.fillRect(playerX, playerY, 50, 50);

// Draw the pizza
        canvasContext.fillStyle = "#FF0000";
        canvasContext.fillRect(pizzaX, pizzaY, 50, 50);
    }

function resetGame() {
        playerX = 50;
        playerY = 50;
    }
</script>
</body>
</html>