<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Jeu.css">
  </head>
  <body>

    <canvas id="canvas" width="400" height="400"
    style="border-color: 'black'; border-width: 3px; border-style: solid">
      </canvas>
<br>
  <button type="button"onclick="dessiner()"><img src="Start.jpg"></button>

<script type="text/javascript">


  var canvas = document.getElementById("canvas");

  var contexte = canvas.getContext("2d");

  var x

  var y

function ghost(){

ghost= new Image();
ghost.src = "ghost.jpg";
ghost.onload = function(){
contexte.drawImage(ghost,x,y,20,20)

}};

x = 32 +(Math.random() * (400-64));
y = 32 +(Math.random() * (400-64));

function dessiner(){

  ghost()
};




  </script>
  </body>
</html>

Mi objetivo con este código es hacer que la imagen "ghost.jpg" aparezca aleatoriamente en el lienzo cada vez que presione el botón. El problema surge cuando intento presionar el botón varias veces. Esperaba que la imagen comenzara a aparecer en todas partes, pero solo funciona la primera vez y muestra la imagen una vez.

1
Mathew Wizman 12 oct. 2019 a las 19:39

4 respuestas

La mejor respuesta

Aunque las funciones dessiner() y ghost.onload() se llaman varias veces, a sus variables x y y se les asignan valores aleatorios solo una vez, ya que están definidas en el ámbito global .

Entonces, la imagen se genera cada vez que hace clic, pero ... está en la misma posición cada vez.

Una forma de abordar el problema sería asignar valores X e Y dentro de su ghost.onload(), o simplemente usando 32 +(Math.random() * (400-64)) directamente como parámetros para su función drawImage().

1
lzbernardo 12 oct. 2019 a las 16:50

Esto debería hacer el truco para ti.

En primer lugar: tenía una variable ghost dentro de la función ghost (), por lo que cuando la función se ejecuta por primera vez, la variable ghost se establece, por lo tanto, la función ghost () ya no es válida como función, por lo que debe cambiar var ghost a var ghos. En segundo lugar, debe borrar el lienzo y obtenga las variables x e y nuevamente antes de volver a dibujar el lienzo en funtion ghost ()

        var canvas = document.getElementById("canvas");
        var contexte = canvas.getContext("2d");

        function ghost(){
            var x = 32 +(Math.random() * (400-64));
            var y = 32 +(Math.random() * (400-64));
            ghos= new Image();
            ghos.src = "icon.png";
            ghos.onload = function(){
            // Store the current transformation matrix of canvas
            contexte.save();

            // Use the identity matrix while clearing the canvas
            contexte.setTransform(1, 0, 0, 1, 0, 0);
            contexte.clearRect(0, 0, canvas.width, canvas.height);

            // Restore the transform
            contexte.restore();
            contexte.drawImage(ghos,x,y,20,20)
            canvas.rem
        }};

        function dessiner(){
            ghost();
        }
0
Mamman Abdulbasit 12 oct. 2019 a las 18:23

Hay algunos problemas con la forma en que se escribe el código.

La variable ghost no está precedida por un let o un var ha convertido a ghost en una variable global. Esto significa que la primera vez que hace clic en dessiner, ghost se llama a la función, pero luego, en esa función, el fantasma se reasigna a una imagen y luego fallan todos los intentos adicionales de llamar a una imagen. Esto en la consola de su navegador mostrará un error en el segundo clic en adelante diciendo Uncaught TypeError: ghost is not a function, esto se puede solucionar simplemente agregando un 'let' antes de su declaración de ghost

function ghost() {
  let ghost = new Image();
  ghost.src = "ghost.png";
  ghost.onload = function(){
      contexte.drawImage(image,x,y,20,20)
  };
}

Después de esto, no habrá más errores, pero aún se encontrará con el hecho de que el número de imágenes no aumenta cuando hace clic en el botón. En realidad, la imagen se genera pero se coloca exactamente sobre el lugar donde la última imagen daba la ilusión de que nada había cambiado. Esto se debe a que sus valores x y y son los mismos cada vez que genera una nueva imagen. Esto se puede solucionar moviendo la creación de su x y y en la función de carga como esta y deshaciéndose de otras declaraciones de x y y

function ghost() {
  let ghost = new Image();
  ghost.src = "ghost.png";
  ghost.onload = function(){
    let x = 32 +(Math.random() * (400-64));
    let y = 32 +(Math.random() * (400-64));
    contexte.drawImage(image,x,y,20,20)
  };
}

En este punto, si se detiene, la imagen aparecerá en puntos aleatorios después de cada clic, pero la imagen anterior permanecerá. Si desea deshacerse de la imagen anterior, todo lo que debe hacer es borrar el lienzo antes de dibujar la nueva imagen.

function dessiner() {
  contexte.clearRect(0, 0, canvas.width, canvas.height);
  ghost();
} 

¡Y eso es todo!

0
Burhanuddin Salman 12 oct. 2019 a las 17:23
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Jeu.css">
  </head>
  <body>

    <canvas id="canvas" width="400" height="400"
    style="border-color: 'black'; border-width: 3px; border-style: solid">
      </canvas>
<br>
  <button type="button"onclick="dessiner()"><img style="width:24px; height:24px;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/star-icon.png"></button>

<script type="text/javascript">

var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x;
var y;

function ghost(){
  var image = new Image();
  image.src = "https://cdn1.iconfinder.com/data/icons/halloween-1/128/42-512.png";
  image.onload = function(){
      contexte.drawImage(image,x,y,20,20)
  };
};

function dessiner(){
contexte.clearRect(0, 0, canvas.width, canvas.height); //if you don't want to clear the canvar just comment this line ;) and you ll have ghostss all around
  x = 32 +(Math.random() * (400-64));
  y = 32 +(Math.random() * (400-64));
  ghost()
};




  </script>
  </body>
</html>
0
example 12 oct. 2019 a las 16:51