User Input

Part 3: User Input mouse listener in Canvas

We need to set up a canvas

<html>
<body>

<canvas style="background-color:pink;" width="800" height="400" id="myCanvas"></canvas>

<script>

canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");

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

We will now need to get a background and a Sprite

var background = new Image();
background.src = "https://mrhorvathcompclasses.in/Canvas/CMS.jpeg";

var char = new Image();
char.src = "https://mrhorvathcompclasses.in/Canvas/char.png"

We will now need build variables and a mouse handler for movement

var CharX=300;
var CharY=300;

document.addEventListener("mousemove", mouseMoveHandler);

function mouseMoveHandler(event){

CharX = event.pageX - canvas.offsetLeft - char.width/4;
CharY = event.pageY - canvas.offsetTop - char.height/4;

}

We will now need build gameloop & draw

function draw(){

ctx.drawImage(background,0,0,canvas.width,canvas.height);
ctx.drawImage(char, CharX, CharY, 200, 100);
}

function gameLoop(){draw();}

var desiredFrameRate = 30;
var delay = 1000/desiredFrameRate;
setInterval(gameLoop,delay);

Hit ctrl-S to save and you are good to go.

Use mouse to move character