mouse - Canvas Coordinates -
so i'm new html/javascript. decided play around canvas , display tiles , mouse clicks. i'm trying mouse click, , turn tile user clicked on changed colors. problem way i'm getting user clicked converted onto tile coordinates. seems farther downwards right go less accurate gets too.
<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>fun canvas!!!</title> <style> canvas { position: relative; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; border:1px solid #000000; height: 100%; width: 100%; } </style> <script> // map related var m_itotalwidth; var m_itotalheight; var m_imapwidth = 60; var m_imapheight = 30; var m_itilewidth; var m_itileheight; var m_bcolorfull = new array(m_imapwidth); var m_ccolors = ['#ff0000', '#ff7700', '#ffff00', '#00ff00', '#1500ff', '#c700ff']; var m_cdefaultcolor = "#000"; var m_canvacontext; var m_canvas; var m_iborderlength = 1; // map color related var imin = 0; var imax = 255; var m_iprevx = 0; var m_iprevy = 0; // gamespeed var m_igamespeed = 60; var m_intervalid; document.addeventlistener("domcontentloaded", initialize, false); document.documentelement.style.overflowx = 'hidden'; // horizontal scrollbar hidden document.documentelement.style.overflowy = 'hidden'; function initialize() { m_intervalid = window.setinterval("gameloop();", m_igamespeed); // canvas context drawing m_canvascontext = document.getelementbyid("mycanvas").getcontext("2d"); setcanvassize(); m_canvas = document.getelementbyid("mycanvas"); document.addeventlistener('mousedown', getposition, false); (var x = 0; x < m_imapwidth; x++) { m_bcolorfull[x] = new array(m_imapheight); (var y = 0; y < m_imapheight; y++) { if (y == 0) painttile(x, y, "white", 2); m_bcolorfull[x][y] = false; } } drawmap(); gameloop(); } // runs functions required game work. function gameloop() { drawmap(); } // draws on canvas. function drawmap() { (var x = 0; x < m_imapwidth; x++) (var y = 1; y < m_imapheight; y++) { if (m_bcolorfull[x][y]) painttile(x, y, getrandomcolor(0, 255), 2); else painttile(x, y, m_cdefaultcolor, 2); } } // paints tile on screen, handles converting pixel tile. function painttile(x, y, color, borderthickness) { m_canvascontext.fillstyle = color; m_canvascontext.fillrect((x * m_itilewidth) + borderthickness, (y * m_itileheight) + borderthickness, m_itilewidth - (borderthickness * 2), m_itileheight - (borderthickness * 2)); } // handles clicks. function getposition(event) { var rect = m_canvas.getboundingclientrect(); var x = event.clientx - rect.left; var y = event.clienty - rect.top; x = math.round(x / m_itilewidth); y = math.round(y / m_itileheight); (var xindex = 0; xindex < m_imapwidth; xindex++) (var yindex = 0; yindex < 1; yindex++) painttile(xindex, yindex, "white", 0); writemessage(1, "black", x + "-" + y); m_bcolorfull[x][y] = !m_bcolorfull[x][y]; } // sets canvas big broswer size. function setcanvassize() { m_canvascontext.scale(1, 1); m_itilewidth = math.floor(m_canvascontext.canvas.width / m_imapwidth);//math.floor(window.innerwidth / m_imapwidth); m_itileheight = math.floor(m_canvascontext.canvas.height / m_imapheight); //math.floor(window.innerheight / m_imapheight); //m_canvascontext.canvas.width = (m_itilewidth * m_imapwidth); //m_canvascontext.canvas.height = (m_itileheight * m_imapheight); } function writemessage(starttile, color, message) { m_canvascontext.font = '16pt calibri'; m_canvascontext.fillstyle = color; m_canvascontext.filltext(message, starttile * m_itilewidth, 16); } /*********************************************************************************************************/ /*usefull functions*/ function getrandomcolor(imin, imax) { //return m_ccolors[getrandomnumber(0, m_ccolors.length)]; // creating random number between imin , imax var r = getrandomnumber(imin, imax) var g = getrandomnumber(imin, imax) var b = getrandomnumber(imin, imax) // going decimal hex var hexr = r.tostring(16); var hexg = g.tostring(16); var hexb = b.tostring(16); // making sure single character values prepended "0" if (hexr.length == 1) hexr = "0" + hexr; if (hexg.length == 1) hexg = "0" + hexg; if (hexb.length == 1) hexb = "0" + hexb; // creating hex value concatenatening string values var hexcolor = "#" + hexr + hexg + hexb; homecoming hexcolor.touppercase(); } function getrandomnumber(imin, imax) { homecoming math.floor((math.random() * (imax - imin)) + imin); } </script> </head> <body> <canvas id="mycanvas" width="1000" height="500" style="border:1px solid #000000;"> </canvas> </body> </html>
i've did already: http://jsfiddle.net/saturnix/rjd3r/
and explained in detail here: https://ijosephblog.wordpress.com/2012/05/09/implementing-conways-game-of-life-in-html5-canvas-with-javascript/
there's much more stuff need, here i've made simpler version: http://jsfiddle.net/dtmrt/
this chunk of code demo above converts mouse coordinates array index.
var j = math.floor((g.mousex / (dim + spacing))); var = math.floor(g.mousey / (dim + spacing)); grid[j][i] = "mouse passing on here!"; where dim dimension of tile, spacing distance between tiles (you can set zero) , g.mousex/g.mousey mouse coordinates.
you need tiles in array of arrays, did this:
var grid = new array(grid_width); (var j = 0; j<grid_width; j++){ grid[j] = new array(grid_height); }; where grid_width , grid_height number of rows , columns of tiles.
canvas mouse coordinates
No comments:
Post a Comment