Crea un juego 2d bien cencillo's game

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

No:33328

←

Prev Next

→

Crea un juego 2d bien cencillo
Developer User15735｜Date and time 24/1/3 16:41:28
Build time 43.072 sec｜Game capacity 3.576KB｜

Script

¡Claro! Voy a crear un juego 2D muy simple en un solo archivo HTML utilizando JavaScript. El objetivo del juego será recolectar pictogramas tocándolos en la pantalla de un teléfono inteligente. Aquí está el código:

Este código crea un lienzo en pantalla completa donde se generarán pictogramas aleatorios cada segundo. El jugador puede tocar los pictogramas en la pantalla para eliminarlos y aumentar su puntuación. La puntuación se muestra en la esquina superior izquierda de la pantalla. Recuerda reemplazar "emozi_himawari.png" con la ruta real al pictograma que deseas utilizar. Puedes cambiar el tamaño y el estilo del lienzo ajustando los valores en la sección de estilos CSS. ¡Espero que disfrutes jugando este sencillo juego 2D en tu teléfono inteligente!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Mi Juego 2D</title>
    <style>
      #gameCanvas {
        width: 100%;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Clase Pictograma
      class Pictograma {
        constructor(x, y, image) {
          this.x = x;
          this.y = y;
          this.image = new Image();
          this.image.src = image;
        }

draw() {
          ctx.drawImage(this.image, this.x, this.y, 50, 50);
        }
      }

// Función para generar pictogramas aleatorios
      function generarPictogramas() {
        var x = Math.random() * (canvas.width - 50);
        var y = Math.random() * (canvas.height - 50);
        var image = "ruta_al_pictograma.png";

var pictograma = new Pictograma(x, y, image);
        pictograms.push(pictograma);
      }

// Función para dibujar los pictogramas en el lienzo
      function dibujarPictogramas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

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

// Función para manejar los toques en la pantalla
      function touchHandler(e) {
        var touch = e.changedTouches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;

// Comprobar si se tocó un pictograma
        for (var i = 0; i < pictograms.length; i++) {
          var pictograma = pictograms[i];
          if (
            x > pictograma.x &&
            x < pictograma.x + 50 &&
            y > pictograma.y &&
            y < pictograma.y + 50
          ) {
            pictograms.splice(i, 1); // Eliminar pictograma tocado
            score++; // Incrementar la puntuación
            break;
          }
        }
      }

// Función para actualizar y mostrar la puntuación
      function mostrarPuntuacion() {
        document.getElementById("score").innerHTML = "Puntuación: " + score;
      }

// Evento para iniciar el juego
      window.onload = function () {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

setInterval(generarPictogramas, 1000); // Generar nuevos pictogramas cada segundo
        setInterval(dibujarPictogramas, 10); // Actualizar lienzo cada 10 milisegundos
        canvas.addEventListener("touchstart", touchHandler, false);
        mostrarPuntuacion();
      };
    </script>
  </body>
</html>
```

Recuerda reemplazar "ruta_al_pictograma.png" con la ruta real al pictograma que deseas utilizar. Puedes cambiar el tamaño y el estilo del lienzo ajustando los valores en la sección de estilos CSS.

¡Espero que disfrutes jugando este sencillo juego 2D en tu teléfono inteligente!