Javascript - Point object towards mouse

Question

I'm trying to get this player character to point towards the mouse pointer, but it doesn't move at all. I have no idea where to start, can somebody please help me?

Here is the full code:

The part which I need help with is in the updatevalues() function in the player object (javascript)

 var canvas = document.getElementById("tanks-canvas"); var game = canvas.getContext("2d"); canvas.height = screen.height / 1.175; canvas.width = screen.width / 1.05; game.translate(canvas.width / 2, canvas.height / 2); clear(); txt(0, 0, "Loading...", "100px georgia", "rgb(0, 0, 0)"); var mousex = 0; var mousey = 0; var angle; var mode = "menu"; var key = []; var scale = 1; for (i = 0; i <= 255; i += 1) { key[i] = false; } /* Class Definition: */ // Bodies: var circle_body = { x: 0, y: 0, radius: 100, draw: function() { this.setvals(); circ(this.x, this.y, this.radius, "rgb(0, 150, 255)"); }, setvals: function() { this.radius = 25 * scale; } }; // Turrents: var rect_turrent = { x: 0, y: 0, width: 0, height: 0, offset: 0, draw: function() { this.setvals(); rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)"); }, setvals: function() { this.offset = 35 * scale; this.width = 30 * scale; this.height = 15 * scale; } }; // Classes: var base = { draw: function() { rect_turrent.draw(); circle_body.draw(); } }; /* Functions & Objects */ function txt(x, y, content, font, color) { game.fillStyle = color; game.textAlign = "center"; game.font = font; game.fillText(content, x, y); } function rect(x, y, width, height, color) { x -= width / 2; y -= height / 2; game.fillStyle = color; game.strokeStyle = color.black; game.fillRect(x, y, width, height); game.strokeRect(x, y, width, height); } function img(x, y, img) { x -= img.width / 2; y -= img.height / 2; game.drawImage(img, x, y); } function circ(x, y, radius, color) { game.fillStyle = color; game.strokeStyle = color.black; game.beginPath(); game.arc(x, y, radius, 0, Math.PI * 2); game.fill(); game.stroke(); } function clear() { rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)"); } /* IMPORTANT: Player Character: */ var player = { // Variables x: 0, y: 0, type: "base", angle: 0, autorotate: false, // Functions update: function() { this.updatevalues(); game.save(); game.rotate(this.angle); this.draw(); game.restore(); txt(0, -100, "Mouse x: " + mousex + " | Mouse y: " + mousey + " | Angle: " + this.angle, "20px georgia", "rgb(0, 0, 0)"); }, draw: function() { if (this.type == "base") { base.draw(); } }, updatevalues: function() { this.offsetY = mousex - this.x; this.offsetX = mousey - this.y; this.angle = Math.atan(mousex / mousey); } }; function menu() { player.update(); } function update() { if (mode == "menu") { menu(); } clear(); player.update(); } /* Intervals: */ game.interval = setInterval(update, 50); /* Event Listeners */ document.addEventListener("keydown", function(event) { for (i = 0; i <= 255; i++) { if (event.keyCode == i) { key[i] = true; } } }); document.addEventListener("keyup", function(event) { for (i = 0; i <= 255; i++) { key[i] = false; } }); document.addEventListener("mousemove", function(event) { mousex = event.offsetX - (canvas.width / 2); mousey = (canvas.height / 2) - event.offsetY; }); 

 /* Everything */ * { transition: 1s; } body { background-color: rgb(100, 100, 100); } /* Flexbox: */ .flex-container { display: flex; flex-direction: column; padding: 5vw; } #header { flex-direction: row; background-color: rgb(200, 0, 0); } #main { background-color: rgb(200, 150, 50); } #navbar { z-index: 1; overflow: hidden; background-color: rgb(200, 200, 200); position: fixed; top: 0; width: 100% } /* Images */ img { display: block; margin-left: auto; margin-right: auto; } .imgcontainer { position: relative; width: 50% } .imgoverlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 100, 200, 0.75); overflow: hidden; width: 100%; height: 0; } .imgtext { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(200, 200, 200, 0.75); } .imgcontainer:hover .imgoverlay { height: 100%; } .image { width: 100%; height: auto; } /* Navigation Menu */ .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.75); overflow-x: hidden; padding-top: 5vw; } /* The navigation menu links */ .sidenav a { padding: 1vw 1vw 1vw 4vw; text-decoration: none; overflow-x: hidden; font-size: 2vw; color: rgba(150, 150, 150, 0.75); display: block; } /* When you mouse over the navigation links, change their color */ .sidenav a:hover { color: rgb(255, 255, 255); } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 1vw; font-size: 5vw; margin-left: 50px; } /* Styles: */ h1 { font: 10vw courier; color: rgb(0, 0, 200); text-align: center; padding: none; } h2 { font: 9vw courier; color: rgb(0, 0, 150); text-align: center; padding: none; } h3 { font: 8vw courier; color: rgb(0, 0, 150); text-align: center; padding: none; } h4 { font: 7vw courier; color: rgb(0, 0, 150); text-align: center; padding: none; } h5 { font: 6vw courier; color: rgb(0, 0, 150); text-align: center; padding: none; } h6 { font: 5vw courier; color: rgb(0, 0, 150); text-align: center; padding: none; } p { font: 2vw georgia; color: rgb(0, 100, 0); text-align: justify; } /* Other */ .link { color: rgb(150, 150, 150); } .link:hover { color: rgb(255, 255, 255); } code { font-family: courier; } canvas { padding: none; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; display: block; background-color: rgb(255, 255, 255); border: 5px solid rgb(0, 0, 0); } 

 <!DOCTYPE html> <html> <head> <title>Game Goods</title> <link rel="stylesheet" href="style.css"> <script src="functions.js"></script> </head> <body> <!-- Game --> <canvas id="tanks-canvas"></canvas> <script src="tanks-script.js"></script> </body> </html> 

(If you run it, hit "full page", or it won't work.)

Edit 10-30-18: I've changed the code according to Helder's answer. At least the mousex works now...

Edit 10-31-18: I changed mousex and mousey to also be at coordinates 0, 0 when the mouse is at the middle. The canvas works like a coordinate plane now. I also added debugging text (you can see it if you run the snippet).

Answer 1

Your calculations for the angle are incorrect, take a look at this sample...

This is by no means the exact solution but should get you moving on the right direction, I'm only using mousex in my calculation.

 var canvas = document.getElementById("tanks-canvas"); var game = canvas.getContext("2d"); canvas.height = canvas.width = 170; game.translate(canvas.width / 2, canvas.height / 2); clear(); var mousex = 0; var mousey = 0; var angle; var mode = "menu"; var key = []; var scale = 1; for (i = 0; i <= 255; i += 1) { key[i] = false; } var player = { x: 0, y: 0, type: "base", angle: 0, autorotate: false, update: function() { this.updatevalues(); game.save() game.rotate(this.angle); this.draw(); game.restore(); }, updatevalues: function() { this.offsetY = mousex - this.x; this.offsetX = mousey - this.y; this.angle = 360 * Math.sin(mousex/30000); }, draw: function() { if (this.type == "base") { base.draw(); } } }; /* Class Definition: */ // Bodies: var circle_body = { x: 0, y: 0, radius: 100, draw: function() { this.setvals(); circ(this.x, this.y, this.radius, "rgb(0, 150, 255)"); }, setvals: function() { this.radius = 25 * scale; } }; // Turrents: var rect_turrent = { x: 0, y: 0, width: 0, height: 0, offset: 0, draw: function() { this.setvals(); rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)"); }, setvals: function() { this.offset = 35 * scale; this.width = 30 * scale; this.height = 15 * scale; } }; // Classes: var base = { draw: function() { rect_turrent.draw(); circle_body.draw(); } }; /* Functions & Objects */ function rect(x, y, width, height, color) { x -= width / 2; y -= height / 2; game.fillStyle = color; game.strokeStyle = color.black; game.fillRect(x, y, width, height); game.strokeRect(x, y, width, height); } function circ(x, y, radius, color) { game.fillStyle = color; game.strokeStyle = color.black; game.beginPath(); game.arc(x, y, radius, 0, Math.PI * 2); game.fill(); game.stroke(); } function clear() { rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)"); } function update() { clear(); player.update(); } game.interval = setInterval(update, 50); document.addEventListener("mousemove", function(event) { mousex = event.offsetX; mousey = event.offsetY; }); 

 <canvas id="tanks-canvas"></canvas> 

Answer 2

I found out the formula with help from my math teacher & a different question.

The formula is

Math.atan2(-y, x);