AI game creator

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

No:34923

103

←

Prev Next

→

3D vs 2D gameñ
Developer User3408｜Date and time 24/1/12 17:43:16
Build time 18.499 sec｜Game capacity 4.231KB｜

Script

Como programador, puedo crear un juego para smartphone utilizando tanto gráficos en 2D como en 3D. A continuación, te presento un ejemplo en JavaScript que implementa un juego en 2D utilizando pictogramas:

Este ejemplo muestra un juego simple donde controlas una pala con las teclas de flecha para golpear una pelota y evitar que caiga fuera del lienzo. Al usar el evento de teclado, puedes mover la pala hacia la derecha o hacia la izquierda para mantener la pelota rebotando. Este código utiliza el lienzo (canvas) HTML5 para dibujar los elementos del juego en un contexto 2D. Además, utiliza funciones para dibujar la pelota y la pala, detectar colisiones y actualizar el lienzo en cada fotograma. Puedes personalizar los colores y el tamaño de los elementos según tus preferencias. Recuerda que este es solo un ejemplo básico y puedes expandirlo y agregar más funcionalidades según tus necesidades. Espero que te resulte útil. ¡Diviértete programando tu propio juego en JavaScript!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Mi Juego en 2D</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Crear el lienzo del juego
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Variables de juego
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;
        var ballRadius = 10;
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var rightPressed = false;
        var leftPressed = false;

// Eventos de teclado
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
            if (event.key == "Right" || event.key == "ArrowRight") {
                rightPressed = true;
            } else if (event.key == "Left" || event.key == "ArrowLeft") {
                leftPressed = true;
            }
        }

function keyUpHandler(event) {
            if (event.key == "Right" || event.key == "ArrowRight") {
                rightPressed = false;
            } else if (event.key == "Left" || event.key == "ArrowLeft") {
                leftPressed = false;
            }
        }

// Dibujar la pelota
        function drawBall() {
            context.beginPath();
            context.arc(x, y, ballRadius, 0, Math.PI*2);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Dibujar la pala
        function drawPaddle() {
            context.beginPath();
            context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Detección de colisiones
        function collisionDetection() {
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy < ballRadius) {
                dy = -dy;
            } else if (y + dy > canvas.height - ballRadius) {
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    alert("¡Juego terminado!");
                    document.location.reload();
                }
            }
        }

// Actualizar el lienzo del juego
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            collisionDetection();

if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

x += dx;
            y += dy;
            requestAnimationFrame(draw);
        }

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

Este código utiliza el lienzo (canvas) HTML5 para dibujar los elementos del juego en un contexto 2D. Además, utiliza funciones para dibujar la pelota y la pala, detectar colisiones y actualizar el lienzo en cada fotograma. Puedes personalizar los colores y el tamaño de los elementos según tus preferencias.

Recuerda que este es solo un ejemplo básico y puedes expandirlo y agregar más funcionalidades según tus necesidades. Espero que te resulte útil. ¡Diviértete programando tu propio juego en JavaScript!