Un juego donde podamos dibujar como si fuera paint y haya formas pre hechas y se pueda mover y girar lo dibujado y las formas pre hechas y poner colores y poder cambiar las formas pre hechas's game

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

No:22699

147

←

Prev Next

→

Un juego donde podamos dibujar como si fuera paint..ALL
Developer User3408｜Date and time 23/10/24 7:40:08
Build time 51.973 sec｜Game capacity 3.548KB｜

Script

Aquí tienes un ejemplo de cómo podría ser el código en HTML y JavaScript para el juego que describes:

Este código crea un lienzo (canvas) en el que se pueden dibujar formas predefinidas, como cuadrados, círculos y triángulos. Se pueden elegir diferentes colores y se pueden mover y rotar las formas dibujadas y las formas predefinidas. Para jugar, solo tienes que abrir este archivo HTML en un navegador web en tu smartphone, seleccionar una forma y un color, y luego usar tu dedo para dibujar en el lienzo. Puedes mover las formas arrastrándolas y rotarlas tocándolas y girándolas con los dedos. Espero que esto te sea útil para tu juego de dibujo. ¡Diviértete jugando!

←

Prev　Next

→ 　

Back　

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

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

Aquí tienes un ejemplo de cómo podría ser el código en HTML y JavaScript para el juego que describes:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Juego de Dibujo</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

function startGame() {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var currentShape;
      var shapes = [];

canvas.addEventListener("mousedown", startDrawing);
      canvas.addEventListener("mousemove", draw);
      canvas.addEventListener("mouseup", stopDrawing);

var shapesToDraw = {
        square: { image: "🟥", width: 50, height: 50 },
        circle: { image: "⚫", radius: 25 },
        triangle: { image: "🔺", size: 50 }
      };

function startDrawing(event) {
        var shapeType = document.getElementById("shape").value;
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

currentShape = {
          type: shapeType,
          x: x,
          y: y,
          angle: 0
        };

if (shapesToDraw[shapeType]) {
          shapes.push(currentShape);
        }
      }

function draw(event) {
        if (currentShape) {
          var x = event.pageX - canvas.offsetLeft;
          var y = event.pageY - canvas.offsetTop;

currentShape.x = x;
          currentShape.y = y;

context.clearRect(0, 0, canvas.width, canvas.height);
          shapes.forEach(function(shape) {
            drawShape(shape);
          });
        }
      }

function stopDrawing() {
        currentShape = null;
      }

function drawShape(shape) {
        context.save();
        context.translate(shape.x, shape.y);
        context.rotate(shape.angle * Math.PI / 180);

if (shape.type === "square") {
          context.fillStyle = document.getElementById("color").value;
          context.fillRect(0, 0, shapesToDraw[shape.type].width, shapesToDraw[shape.type].height);
        } else if (shape.type === "circle") {
          context.fillStyle = document.getElementById("color").value;
          context.beginPath();
          context.arc(0, 0, shapesToDraw[shape.type].radius, 0, 2 * Math.PI);
          context.fill();
        } else if (shape.type === "triangle") {
          context.fillStyle = document.getElementById("color").value;
          context.beginPath();
          context.moveTo(0, -shapesToDraw[shape.type].size / 2);
          context.lineTo(shapesToDraw[shape.type].size / 2, shapesToDraw[shape.type].size / 2);
          context.lineTo(-shapesToDraw[shape.type].size / 2, shapesToDraw[shape.type].size / 2);
          context.closePath();
          context.fill();
        }

context.restore();
      }
    }
  </script>
</body>
</html>
```

Para jugar, solo tienes que abrir este archivo HTML en un navegador web en tu smartphone, seleccionar una forma y un color, y luego usar tu dedo para dibujar en el lienzo. Puedes mover las formas arrastrándolas y rotarlas tocándolas y girándolas con los dedos.

Espero que esto te sea útil para tu juego de dibujo. ¡Diviértete jugando!