Mausjagt mit Canvas

Der Mauszeiger wird von einer Katze verfolgt. Ein Beispiel mit JavaScript: Canvas.
Klicke aufs Bild!

<style>

/* Mausjagt mit Canvas */



div#border {

 width: 700px;

 height: 550px;

 margin: Auto;

 border: 25px solid transparent;

 border-radius: 50px;

 user-select: none;



 /* Rahmen Hintergrundbild: Korbgeflecht */

 background: linear-gradient(45deg, #DCA 12%, transparent 0, transparent 88%, #DCA 0),

 linear-gradient(135deg, transparent 37%, #A85 0, #A85 63%, transparent 0),

 linear-gradient(45deg, transparent 37%, #DCA 0, #DCA 63%, transparent 0) #753;

 background-size: 20px 20px;

}



div#canvasContainer {

 width: 750px;

 height: 650px;

 margin: Auto;



 /* Maus */

 cursor: url("img/mouse1.png"), auto;

}



canvas#myCanvas {



 /* Hintergrundbild: Mauer */

 background-color: Silver;

 background-image: linear-gradient(335deg, #B00 23px, transparent 23px),

 linear-gradient(155deg, #D00 23px, transparent 23px),

 linear-gradient(335deg, #B00 23px, transparent 23px),

 linear-gradient(155deg, #D00 23px, transparent 23px);

 background-size: 58px 58px;

 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;

}

</style>



<div id="border">

<div id="canvasContainer">

  <canvas id="myCanvas" width="700px" height="550px"></canvas>

</div>

</div>



<script>

// Mausjagt mit Canvas



const canvas = document.querySelector("#myCanvas");

const ctx = canvas.getContext("2d");

const image = new Image();

// Katze

image.src = "img/cat1.png";



var canvasPos = getPosition(canvas),

 widthO = 120,

 heightO = 90,

 mouseX = 350,

 mouseY = 275,

 xPos = 0,

 yPos = 0,

 dX = 0,

 dY = 0,

 num = 0;



// EventListener hinzufügen

canvas.addEventListener("mousemove", setMousePosition, false);



canvas.addEventListener("click", () => {



 // Maus und Katzenbilder beim klicken tauschen

 num = (num == 0) ? 1 : 0;

 image.src = "img/cat" + num + ".png";

 document.getElementById("canvasContainer").style.cursor = "url(img/mouse" + num + ".png), auto";

});



window.addEventListener("scroll", updatePosition, false);

window.addEventListener("resize", updatePosition, false);



// Mauzeiger Position setzen

function setMousePosition(e) {

 mouseX = e.clientX - canvasPos.x;

 mouseY = e.clientY - canvasPos.y;

}



// Animation

function animate() {

 dX = mouseX - xPos;

 dY = mouseY - yPos;



 xPos += (dX / 10);

 yPos += (dY / 10);



 // Canvas löschen

 ctx.clearRect(0, 0, canvas.width, canvas.height);



 // Bild zeichnen

 ctx.drawImage(image,

   xPos - (widthO / 2) - 4,

   yPos - (heightO / 2),

   widthO,

   heightO);



 // Neue Animation ausführen

 requestAnimationFrame(animate);

}

animate();



function updatePosition() {

 canvasPos = getPosition(canvas);

}



// Position innerhalb der Seite (beim scrollen oder Änderung der Fenstergröße) ermitteln

function getPosition(el) {

 var xPos = 0, yPos = 0;



 while (el) {

   if (el.tagName == "BODY") {

     var xScroll = el.scrollLeft || document.documentElement.scrollLeft;

     var yScroll = el.scrollTop || document.documentElement.scrollTop;



     xPos += (el.offsetLeft - xScroll + el.clientLeft);

     yPos += (el.offsetTop - yScroll + el.clientTop);

   }

   else {

     xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);

     yPos += (el.offsetTop - el.scrollTop + el.clientTop);

   }



   el = el.offsetParent;

 }

 return {

   x: xPos,

   y: yPos

 };

}

</script>