AI game creator

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

No:9843

←

Prev Next

→

Coffee arcade game
Developer User4435｜Date and time 23/7/28 4:35:59
Build time 20.177 sec｜Game capacity 3.663KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Coffee Juego de Arcade</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script>
        // variables del juego
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var count = 0;
        var maxCount = 10;
        var score = 0;
        var speed = 2;
        var gameOver = false;
        
        // cargar imágenes
        var coffeeImage = new Image();
        coffeeImage.src = "ruta_de_la_imagen_del_café.png";
        var cupImage = new Image();
        cupImage.src = "ruta_de_la_imagen_de_la_taza.png";
        
        // objeto taza
        var cup = {
            x: canvas.width / 2 - 25,
            y: canvas.height - 75,
            width: 50,
            height: 50
        };
        
        // objeto café
        var coffee = {
            x: Math.random() * (canvas.width - 50),
            y: 0,
            width: 50,
            height: 50
        };
        
        // función principal para dibujar en el canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            if (!gameOver) {
                // dibujar taza
                ctx.drawImage(cupImage, cup.x, cup.y, cup.width, cup.height);
                
                // dibujar café
                ctx.drawImage(coffeeImage, coffee.x, coffee.y, coffee.width, coffee.height);
            } else {
                ctx.font = "30px Arial";
                ctx.fillStyle = "black";
                ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
            }
            
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 10, 30);
        }
        
        // función para actualizar la posición del café
        function update() {
            if (!gameOver) {
                coffee.y += speed;
                
                if (coffee.y > canvas.height) {
                    coffee.x = Math.random() * (canvas.width - 50);
                    coffee.y = 0;
                    score++;
                }
                
                // verificar si la taza y el café se superponen
                if (cup.x < coffee.x + coffee.width &&
                   cup.x + cup.width > coffee.x &&
                   cup.y < coffee.y + coffee.height &&
                   cup.y + cup.height > coffee.y) {
                    gameOver = true;
                }
                
                if (count >= maxCount) {
                    speed += 0.5;
                    count = 0;
                } else {
                    count++;
                }
            }
        }
        
        // función para manejar los eventos táctiles
        function handleTouch(e) {
            var touch = e.touches[0];
            
            if (touch.pageX < cup.x + cup.width / 2) {
                cup.x -= 10;
            } else if (touch.pageX > cup.x + cup.width / 2) {
                cup.x += 10;
            }
        }
        
        // agregar evento táctil al canvas
        canvas.addEventListener("touchstart", handleTouch, false);
        
        // bucle principal del juego
        function gameLoop() {
            draw();
            update();
            
            if (!gameOver) {
                requestAnimationFrame(gameLoop);
            }
        }
        
        // iniciar el juego
        gameLoop();
    </script>
</body>
</html>