0

i am making an online basic game based on using the world map and the user could interact with it by mouse clicking only no keyboard inputs or whatsoever i wish to know how could i detect where the user clicked exactly and how to indicate special points in the map so i could use them later for my outputs if it's possible using only Javascript and html

  • Yes it is possible. You can find good ressources for learning javascript under tags / javascript / info – Jonas Wilms Mar 29 '18 at 17:31
  • You should put more specific problems here and dont expect people to write youre code. To answer the question you should look up some logging/clicking frameworks that do this for you. take a look at https://stackoverflow.com/questions/18713415/user-activity-tracking-or-logging-with-javascript – Nick Prozee Mar 29 '18 at 17:32
  • The SO page "How to get the position of a Click?" might be a good place to start. – Observer Mar 29 '18 at 17:33
  • Maybe this will help you: https://stackoverflow.com/questions/23744605/javascript-get-x-and-y-coordinates-on-mouse-click – Benjamin J. Mar 29 '18 at 17:36
  • Thanks now i can see how to detect the mouse exact position but i'm wondering about the map part should i make it a simple image and then change it later each time the user interact with it like a friend of mine suggested or there is an easier way to do so, i'm sorry everyone i'm not really asking for the code itself i'm just confused since i never made a game and don't even know where to start –  Mar 29 '18 at 17:45
  • The idea is that this "map" would have special different colors each time the user click on a special part of it so making different images and output a different one seems like allot of work and could be avoided somehow –  Mar 29 '18 at 17:47

1 Answers1

0

This detect where the user clicked and then you execute to control the flow of the program!

Ok use a canvas element such as

<canvas id=“map” width=“200” height=“400”></canvas>

Then in javascript do something as

var canvas = document.getElementById(“map”);
var ctx = canvas.getContext(“2d”);
canvas.addEventListener(“mousedown”,onDown,false);
function onDown(event) {
var clickx = event.pageX;
var clicky = event.pageY;
//enter command to run when clicked and use clickx and
//clicky for controling depending on where they clicked
}

Hopefully that helps and is easy enough you can learn more about canvas and other things about that at www.w3schools.com

Jacob Morris
  • 544
  • 4
  • 18