0
Итак, я новичок в Html/Javascript. Поэтому я решил поиграть с холстом и отобразить плитки и получить щелчки мыши. То, что я пытаюсь сделать, это щелкнуть мышью и повернуть плитку, на которую пользователь нажал, чтобы изменить цвета. Проблема заключается в том, как я получаю, когда пользователь щелкнул, чтобы преобразовать в координаты плитки. Кажется, что чем дальше, тем лучше.Холст Координаты
<!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 will be hidden
document.documentElement.style.overflowY = 'hidden';
function initialize() {
m_IntervalID = window.setInterval("gameLoop();", m_iGameSpeed);
// Get canvas context for drawing
m_CanvasContext = document.getElementById("myCanvas").getContext("2d");
setCanvasSize();
m_Canvas = document.getElementById("myCanvas");
document.addEventListener('mousedown', getPosition, false);
for (var x = 0; x < m_iMapWidth; x++) {
m_bColorFull[x] = new Array(m_iMapHeight);
for (var y = 0; y < m_iMapHeight; y++)
{
if (y == 0)
paintTile(x, y, "white", 2);
m_bColorFull[x][y] = false;
}
}
drawMap();
gameLoop();
}
// Runs all the functions required for the game to work.
function gameLoop() {
drawMap();
}
// Draws everything on the canvas.
function drawMap() {
for (var x = 0; x < m_iMapWidth; x++)
for (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 a tile on the screen, handles converting pixel to 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);
for (var xIndex = 0; xIndex < m_iMapWidth; xIndex++)
for (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 the canvas as big as the 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 a random number between iMin and iMax
var r = getRandomNumber(iMin, iMax)
var g = getRandomNumber(iMin, iMax)
var b = getRandomNumber(iMin, iMax)
// going from decimal to hex
var hexR = r.toString(16);
var hexG = g.toString(16);
var hexB = b.toString(16);
// making sure single character values are prepended with a "0"
if (hexR.length == 1)
hexR = "0" + hexR;
if (hexG.length == 1)
hexG = "0" + hexG;
if (hexB.length == 1)
hexB = "0" + hexB;
// creating the hex value by concatenatening the string values
var hexColor = "#" + hexR + hexG + hexB;
return hexColor.toUpperCase();
}
function getRandomNumber(iMin, iMax) {
return 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>
Я делаю что-то очень похожее, но у меня такая же проблема, и ни один из этих ответов не помог. Я буквально все пробовал. – Kerndog73