// Which interaction occurred for logic checks const INTERACTION = { 'left_click' : 0 , 0 : 'left_click' ,'right_click' : 1 , 1 : 'right_click' }; // Mouse data const MOUSE = { down : false ,x : 0 ,y : 0 ,button : [0,0,0] // Left, Middle, Right }; // Keypress data const KEYPRESS = { w : 0 ,a : 0 ,s : 0 ,d : 0 ,shift : 0 } // MOUSE // https://stackoverflow.com/a/29957988 canvas.addEventListener('mousedown', function(event) { MOUSE.button[event.button] = 1; // Button down bool MOUSE.down = true; }); canvas.addEventListener('mouseup', function(event) { MOUSE.button[event.button] = 0; // Button not down bool MOUSE.down = false; }); canvas.addEventListener('mouseout', function(event) { MOUSE.down = false; }); canvas.addEventListener('mousemove', function(event) { MOUSE.x = event.pageX - canvasLeft; MOUSE.y = event.pageY - canvasTop; }); // Left click canvas.addEventListener('click', function(event) { entityInteractionCheck( event.pageX - canvasLeft, event.pageY - canvasTop, INTERACTION.left_click ); }); // Right click canvas.addEventListener('contextmenu', function(event) { event.preventDefault(); entityInteractionCheck( event.pageX - canvasLeft, event.pageY - canvasTop, INTERACTION.right_click ); }); // Check if something has been clicked (via position) // Allows to pass an entity OR an area to check function clickableCheck(cursorX,cursorY,entity = null, area = null){ if(entity == null && area == null){ return false; } if(entity != null){ // Set area to size/pos of entity area = { 'x': position[entity].x, 'y': position[entity].y, 'width': size[entity].width, 'height': size[entity].height } } // Collision detection between clicked offset and clickableItems // https://stackoverflow.com/a/9880302 if( cursorY > area['y'] && cursorY < area['y'] + area['height'] && cursorX > area['x'] && cursorX < area['x'] + area['width'] ) { return true; } return false; } // KEYBOARD window.addEventListener("keydown", onKeyDown, false); window.addEventListener("keyup", onKeyUp, false); function onKeyDown(event) { if(event.shiftKey){ KEYPRESS.shift = true; } var keyCode = event.keyCode; switch (keyCode) { case 87: KEYPRESS.w = true; break; case 65: KEYPRESS.a = true; break; case 83: KEYPRESS.s = true; break; case 68: KEYPRESS.d = true; break; } } function onKeyUp(event) { if(event.shiftKey){ KEYPRESS.shift = false; } var keyCode = event.keyCode; switch (keyCode) { case 87: KEYPRESS.w = false; break; case 65: KEYPRESS.a = false; break; case 83: KEYPRESS.s = false; break; case 68: KEYPRESS.d = false; break; } } // HELPERS (Should be for all) function entityInteractionCheck(x,y,interaction){ // Loop the entities that are interactable // I.e. Have size, and positions console.log('Interaction: '+INTERACTION[interaction]); console.log('Positions; X: '+x+' Y: '+y); for (const [entity] of Object.entries(size)) { // If there's no position (or size), skip if(position[entity] === undefined){ continue; } // If the X/Y of cursor isn't within the shape's bounds can't interact if(!clickableCheck(x,y,entity)){ continue; } console.log('Entity: '+entity); console.log('Entities Total live: '+entityLive); console.log('Entities Total overall: '+entityCount); switch (interaction) { case INTERACTION.left_click: break; default: break; } } }