0
Donc, je suis nouveau en HTML/Javascript. J'ai donc décidé de jouer avec la toile et d'afficher les carreaux et d'obtenir des clics de souris. Ce que j'essaye de faire est d'obtenir le clic de souris, et tournez la tuile que l'utilisateur a cliqué dessus pour être changé des couleurs. Le problème est la façon dont j'obtiens où l'utilisateur a cliqué pour être converti en coordonnées de tuiles. Il semble que plus je vais à droite, moins c'est précis.Toiles Coordonnées
<!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>
Je fais quelque chose de très similaire mais j'ai le même problème et aucune de ces réponses n'a aidé. J'ai littéralement tout essayé. – Kerndog73