所以我是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>
答案 0 :(得分：0)
我已经这样做了：http://jsfiddle.net/Saturnix/rJD3r/
你真正需要的东西还有很多东西，所以我在这里做了一个更简单的版本：http://jsfiddle.net/DTMRt/
上面演示的这段代码将鼠标坐标转换为数组索引。
var j = Math.floor((g.mouseX / (dim + spacing)));
var i = Math.floor(g.mouseY / (dim + spacing));
grid[j][i] = "mouse is passing over here!";
其中dim是图块的尺寸，spacing是图块之间的距离（您可以将其设置为零），g.mouseX / g.mouseY是鼠标坐标。
你需要把所有的牌都放在一个阵列数组中，我这样做了：
var grid = new Array(grid_width);
for (var j = 0; j<grid_width; j++){
grid[j] = new Array(grid_height);
};
其中grid_width和grid_height将是tile的行数和列数。
答案 1 :(得分：0)
此代码对我有用：
update = function(){
canvas.onmousedown=function(){
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
警告（＆＃34; X位置：＆＃34; + posX +＆＃34; Y位置：＆＃34; + posY）;`
};
setInterval(update,100);
它对你有用吗？