// Created by Karak10 window.addEventListener('load', (e)=>{ let canvas = document.querySelector('canvas'); let c = canvas.getContext('2d'); canvas.width = innerWidth; canvas.height = innerHeight; window.addEventListener('resize', (e)=>{ canvas.width = innerWidth; canvas.height = innerHeight; }); // the player's constructor let playerConstructor = class{ constructor(x, y, r, cl, velocity, maxSpeed){ this.x = x; this.y = y; this.cl = cl; this.r = r; this.velocity = velocity; this.maxSpeed = maxSpeed; } // draws the player draw(){ c.save(); c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r,0, Math.PI * 2); c.fill(); c.stroke(); c.restore; } update(){ // increases x with velocity.x and // y with velocity.y to // move the player around this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); } } // creates the player let player = new playerConstructor(canvas.width/2, canvas.height/2, 10, 'orange', {x: 0, y: 0}, 2); // joystick constructor let joyStickConstructor = class{ constructor(x, y, r, id){ this.x = x; this.y = y; this.r = r; this.id = id; this.x2 = x; this.y2 = y; this.distance = { x: 0, y: 0 } this.angle = 0; } // draws the joystick draw(){ c.save(); // draws the joystick's container c.fillStyle = 'grey'; c.globalAlpha = 0.3; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.globalAlpha = 1; c.stroke(); // draws the joystick if(this.id == 'shoot'){ c.fillStyle = 'red'; } c.beginPath(); c.arc(this.x2,this.y2, this.r/2, 0, Math.PI*3); c.fill(); c.stroke(); if(this.id == 'shoot'){ c.textAlign = "center"; c.textBaseLine = "middle"; c.font = 'normal 13px Arial'; c.fillStyle = "white"; c.fillText('Shoot', this.x2, this.y2 + 2); } if(this.id == 'move'){ c.textAlign = "center"; c.textBaseLine = "middle"; c.font = 'normal 13px Arial'; c.fillStyle = "white"; c.fillText('Move', this.x2, this.y2 + 2); } c.restore(); } update(player){ // checks if the horizontal // distance between touch and // the center of the joystick is greater // than this.r / 1.2 if(this.distance.x > this.r / 1.2){ // if true then sets distance.x // to this.r / 1.2 this.distance.x = this.r / 1.2; } // checks if the vertical distance between // the center of the joystick and the // touch is greater than this.r / 1.2 if(this.distance.y > this.r / 1.2){ // if true sets this.distance // to this.r / 1.2 this.distance.y = this.r / 1.2; } if(this.id == "move"){ // sets the x velocity of the player to be // his max speed multipled by the distance // the touch and the center of the joystick // devided by this.r / 1.2, the max distance // value that can be returned is equal to // this.r / 1.2, so if joystick is dragged // all the way to the right then the x // velocity of the player is set to // his max speed player.velocity.x = (player.maxSpeed * this.distance.x / this.r / 1.2) * Math.cos(this.angle); // does the same thing for the y velocity // of the player, but with the vertical // distance between the touch and the // center of the joystick instead player.velocity.y = (player.maxSpeed * this.distance.y / this.r / 1.2) * Math.sin(this.angle); } // changes the x2 to // the center of the container + // Math.cos(angle) multiplied by the // horizontal distance this.x2 = this.x + Math.cos(this.angle) * this.distance.x; // changes the y2 to // the center of the container + // Math.sin(angle) multiplied by the // vertical distance this.y2 = this.y + Math.sin(this.angle) * this.distance.y; // draws the joystick this.draw(); } } // code for the bullets // bullets constructor let bullet = class{ constructor(x, y, r, cl, velocity, mass){ this.x = x; this.y = y; this.r = r; this.cl = cl; this.velocity = velocity; this.mass = mass; this.opacity = 1; } draw(){ c.save(); c.globalAlpha = this.opacity; c.fillStyle = this.cl; c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.fill(); c.stroke(); c.restore(); } update(){ // updates the x and y position this.x += this.velocity.x; this.y += this.velocity.y; this.draw(); } } // bullets generator let bullets = new Array(); // variable that determines wether mouse is down or not let mousedown = false; // an object to save the mouse's position let mouse = { x: 0, y: 0 } // updates the mouse position as it moves around the canvas canvas.addEventListener('mousemove', (e)=>{ mouse.x = e.offsetX; mouse.y = e.offsetY; }); function shoot(e){ // prevents default behaviour e.preventDefault(); // sets mousedown to true mousedown = true; // sets an interval let interval = setInterval(()=>{ let r = 3; let cl = 'grey' let x = player.x; let y = player.y; let vx = mouse.x - x; let vy = mouse.y - y; // gets the angle formes by the player and the mouse let angle = Math.atan2(vy, vx); // if shoot JoyStick is used then sets angle // to be the angle formed by the center of // the joystick and the touch dragging it if(shootJoyStickActive) { angle = shootJoyStick.angle; } // uses the angle to set bullet velocities let velocity = { x: Math.cos(angle) * 4, y: Math.sin(angle) * 4 } let mass = 3; // creates bullets bullets.push(new bullet(x, y, r, cl, velocity, mass)); }, 200); // checks if mousedown is false to clear the interval above let interval2 = setInterval(()=>{ if(mousedown == false){ clearInterval(interval); clearInterval(interval2); } }, 1); } // event that triggers when mouse button is pushed down canvas.addEventListener('mousedown', shoot); // event that triggers when mouse button is released window.addEventListener('mouseup', (e)=>{ // prevents default behaviour e.preventDefault(); // sets mousedown to false mousedown = false; }); // creates the move joystick let r = 50; let y = canvas.height - r - 20; let x = r + 30; let joyStick = new joyStickConstructor(x,y,r, 'move'); // creates the shoot joystick let y2 = canvas.height - r - 20; let x2 = canvas.width - r - 30; let shootJoyStick = new joyStickConstructor(x2,y2,r, 'shoot'); // repositions joysticks if window changes size window.addEventListener('resize', ()=>{ shootJoyStick.y = canvas.height - r - 20; joyStick.y = canvas.height - r - 20; }); // variables that will let us know // wether joysticks are in use let shootJoyStickActive = false; let joyStickActive = false; // variables that will keep track of the // touch which drags each joystick let touchIndex; let touchIndex2; // variables that will keep track of the // position of the touches let touchPosition = null; let touchPosition2 = null; // function that returns true if touch passed // as it's parameter was made over the // move joystick function touchedMoveJoystick(touch){ return touch.clientX > joyStick.x - joyStick.r && touch.clientX < joyStick.x + joyStick.r && touch.clientY > joyStick.y - joyStick.r && touch.clientY < joyStick.y + joyStick.r; } // function that returns true if touch passed // as it's parameter was made over the // shoot joystick function touchedShootJoystick(touch){ return touch.clientX > shootJoyStick.x - shootJoyStick.r && touch.clientX < shootJoyStick.x + shootJoyStick.r && touch.clientY > shootJoyStick.y - shootJoyStick.r && touch.clientY < shootJoyStick.y + shootJoyStick.r; } // event that triggers when touch starts canvas.addEventListener("touchstart", (e)=>{ // makes an array of the touches let touchArray = Array.from(e.touches); // loops through each touch object touchArray.forEach((touch, i)=>{ // checks if touch was made over // move joystick if(touchedMoveJoystick(touch)){ // if true sets joyStickActive to true // touchIndex to the index of the touch // and touchPosition to touch.clientX joyStickActive = true; touchIndex = i; touchPosition = touch.clientX; } // checks if the touch was made over the // shoot joyatick else if(touchedShootJoystick(touch)){ // checks if player is already shooting if(shootJoyStickActive != true){ // runs the shoot function shoot(e); } // if true sets shootJoyStickActive to true, // touchIndex2 to touch's index and // touchPosition2 to touch.clientX shootJoyStickActive = true; touchIndex2 = i; touchPosition2 = touch.clientX; mousedown = true; } }); }); // triggers again and again as touch moves // around the screen canvas.addEventListener('touchmove', (e)=>{ // creates an array of all the touches let touchArray = Array.from(e.touches); // checks if move joystick is active if(joyStickActive){ // if true loops through all the touches touchArray.forEach((touch, i)=>{ // checks wether the distance between the // touch and the touchPosition set previously // is smaller than the radiusX formed by the // finger plush 10 if(Math.abs((touch.clientX - touchPosition)) < touch.radiusX + 10){ // if true sets touchIndex to the index of // the touch which passed the test touchIndex = i; } }); // tries the following code, since there is // a chance an error may occured if touch // cancelled for whatever reason or something // else happened try{ // sets touchPosition to the new clientX touchPosition = e.touches[touchIndex].clientX; // gets horizontal distance between the // center of the joystick and the touch let vx = e.touches[touchIndex].clientX - joyStick.x; // gets vertical distance between the // center of the joystick and the touch let vy = e.touches[touchIndex].clientY - joyStick.y; // sets the distance.x and distance.y of // joystick object to the distances // calculated above, but makes sure they // are given as positive values, direction // does not matter since we will // rotate the joyStick joyStick.distance.x = Math.abs(vx); joyStick.distance.y = Math.abs(vy); // calculates the angle formed by the // center of the joystick and the touch let angle = Math.atan2(vy, vx); // sets joystick.angle to the angle // we calculated above joyStick.angle = angle; } // if the code above throws an error // this code deactivates the joystick // and resets the variables catch{ joyStickActive = false; joyStick.distance.x = 0; joyStick.distance.y = 0; joyStick.angle = 0; touchPosition = 0; touchIndex = -1; } } // checks if shootJoyStickActive is true if(shootJoyStickActive){ // if true loops through all the touches touchArray.forEach((touch, i)=>{ // checks if the distance between the // touch.clientX and the touchPosition2 // that we set earlier is smaler than the // radiusX formed by the finger plush 10 if(Math.abs((touch.clientX - touchPosition2)) < touch.radiusX + 10){ // if true sets touchIndex to the index of // the touch which passed the test touchIndex2 = i; } }); // tries the following code, which may throw // errors under certain situations try{ // updates touchPosition2 to new // touch's position touchPosition2 = e.touches[touchIndex2].clientX; // calculates horizontal and // vertical distances between the // center of the shoot joystick and // the touch let vx = e.touches[touchIndex2].clientX - shootJoyStick.x; let vy = e.touches[touchIndex2].clientY - shootJoyStick.y; // sets the distance.x and distance.y // of the shoot joystick to the distances // calculated above but makes sure we // set them as positive values because // we don't want a direction, since we // will later use the angle to rotate it shootJoyStick.distance.x = Math.abs(vx); shootJoyStick.distance.y = Math.abs(vy); // calculates the angle of the vector let angle = Math.atan2(vy, vx); // sets the angle of the shootJoyStick to // the angle calculated above shootJoyStick.angle = angle; } // if code above threw an error this // diactivates the shoot joystick and // resets the variables catch{ shootJoyStickActive = false; shootJoyStick.distance.x = 0; shootJoyStick.distance.y = 0; shootJoyStick.angle = 0; touchPosition2 = 0; touchIndex2 = -1; mousedown = false; } } }); // triggers when a touch ends canvas.addEventListener('touchend', (e)=>{ if(e.cancelable){ e.preventDefault(); } // checks if the distance between the // touchPosition and the position of the // touch that ended were less than the // radiusX formed by the finger plush 10 if(Math.abs((e.changedTouches[0].clientX - touchPosition)) < e.changedTouches[0].radiusX){ // if true it deactivates the move // joyStick and resets the variables // linked to it joyStickActive = false; joyStick.distance.x = 0; joyStick.distance.y = 0; joyStick.angle = 0; touchPosition = 0; touchIndex = -1; } // checks if the distance between the // touchPosition2 and the position of the // touch that ended were less than the // radiusX formed by the finger plush 10 if(Math.abs((e.changedTouches[0].clientX - touchPosition2)) < e.changedTouches[0].radiusX){ // if true it deactivates the shoot // joyStick and resets the variables // linked to it shootJoyStickActive = false; shootJoyStick.distance.x = 0; shootJoyStick.distance.y = 0; shootJoyStick.angle = 0; touchPosition2 = 0; touchIndex2 = -1; mousedown = false; } }); // function that runs again and again let animate = function(){ c.clearRect(0, 0, canvas.width,canvas.height); bullets.forEach((bullet, i)=>{ // if bullets are outside the canvas // then they are removed if(bullet.x - bullet.r < 0 | bullet.x > canvas.width - bullet.r | bullet.y - bullet.r < 0 | bullet.y > canvas.height - bullet.r){ bullets.splice(i, 1); } bullet.update(); }); player.update(); joyStick.update(player); shootJoyStick.update(); requestAnimationFrame(animate); } // starts the animation animate(); });

Move and Shoot Joysticks (JavaScript canvas)