JS auf Canvas gezeichnetes Bild per klick verschieben

Patrick24 · 19. Dezember 2019

hey,

mein programm zeichnet mit drawImage() bilder auf ein canvas
jetzt möchte ich per js regiestrieren wenn ein bild angeklickt wird
dann soll das Programm warten bis das nächste angeklickt wird
danach soll das bild das zuerst angeklickt wird zum bild das als zweites angeklickt wurde verschoben werden

mit mouseOver und dann onmouseclick hab ich es schon versucht
geht aber nicht

lg
patrick

Andreas_ · 19. Dezember 2019

How do I add a simple onClick event handler to a canvas element?

Patrick24 · 20. Dezember 2019

Mache gerade erstmal ein Menü so wie ich später das mit den Bildern machen werde
jetzt folgendes problem
Uncaught ReferenceError: mouse is not defined
at HTMLCanvasElement.onmousemove (spiel.html:11)

HTML:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Solitäre</title>
</head>
<body>
<div id='game_object' style='position: relative'>
<canvas width='1585px' height='775px' id='background_canvas' style='background: darkgreen; position: absolute; top: 0px; left: 0px;'></canvas>
<canvas width='1585px' height='775px' id='main_canvas' style='background: darkgreen; position: absolute; top: 0px; left: 0px;' onmousemove='mouse("move", event)' onmouseclick='mouse("click", event)>Leider kann dieser Browser das Spiel nicht ausführen!</canvas>
</div>
<script type="text/javascript" src='spiel.js'></script>
</body>
</html>

JS

Javascript:

function menu()
{
main_menu_buttons = ["Start", "Optionen"];
for (i = 0; i < main_menu_buttons.length; i++)
{
  drawX = 650;
  drawY = 250 + i*130;
  height = 70;
  width = 200;
  main_ctx.drawImage(buttons,drawX,drawY,width,height);
  main_ctx.fillStyle = "white";
  main_ctx.font = "30px Arial";
  main_ctx.textAlign = "center";
  main_ctx.textBaseline = 'middle';
  main_ctx.fillText(main_menu_buttons[i], drawX + width / 2, drawY + height / 2);

  if (buttons_status[i] == undefined)
  {
   buttons_status[i] = "normal";
   buttons_drawX[i] = drawX;
   buttons_drawY[i] = drawY;
   buttons_height[i] = height;
   buttons_width[i] = width;
  }
}
}



function mouse(type, e)
{
 var x = e.pageX - document.getElementById('game_object').offsetLeft;
 var y = e.pageY - document.getElementById('game_object').offsetTop;

 for (i = 0; i < buttons_status.length; i++)
 {
  if ( x <= buttons_drawX[i] + buttons_width[i] && x >= buttons_drawX[i] && y <= buttons_drawY[i] + buttons_height[i] && y >= buttons_drawY[i]) 
  {
   if (type = 'move')
    buttons_status[i] = "hover";
   else
    buttons_status[i] = "click";
   } 
   else
    buttons_status[i] = "normal";
  }
 }
}
}

bei js hab ich jetzt nur den code der fürs menü gebraucht wird reingemacht

wo liegt der fehler?

lg
patrick

Andreas_ · 22. Dezember 2019

Du greifst in den Funktionen auf Variablen zu, die vorher nicht deklariert wurden. Zum Beispiel "main_ctx" und "buttons_status".

Auch würde ich die Zuweisungen an "onmousemove" und "onmousover" in der Javascript-Datei machen, das erleichtert die Fehlersuche.

Patrick24 · 22. Dezember 2019

wie in meinem beitrag auch steht habe ich nur den menü code gepostet
die arrays und main_ctx werden davor natürlich deklariert
das problem habe ich aber eh schon behoben ^^

Andreas_ · 22. Dezember 2019

Wenn Du nicht einmal die notwendigen Code-Teile postest, dann kann Dir keiner helfen.

Patrick24 · 22. Dezember 2019

wiegesagt hat sich eh gelöst

Suche

JS auf Canvas gezeichnetes Bild per klick verschieben

Patrick24

Cadet 2nd Year

Andreas_

Commander

Patrick24

Cadet 2nd Year

Andreas_

Commander

Patrick24

Cadet 2nd Year

Andreas_

Commander

Patrick24

Cadet 2nd Year