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>
4

2 回答 2

0

我已经这样做了：http: //jsfiddle.net/Saturnix/rJD3r/

并在这里详细解释：https ://ijosephblog.wordpress.com/2012/05/09/implementing-conways-game-of-life-in-html5-canvas-with-javascript/

您真正需要的东西还有很多，所以在这里我制作了一个更简单的版本：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 将是瓦片的行数和列数。

于 2013-02-10T22:39:40.120 回答
0

这段代码对我有用：

update = function(){
canvas.onmousedown=function(){
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;

alert("X 位置："+ posX +" Y 位置：" + posY);`

};
setInterval(update,100);

对你起作用吗？

于 2013-09-16T14:10:56.507 回答