Question

我在画布上制作称为点的游戏。这是游戏的维基： https://en.wikipedia.org/wiki/Dots_(game) 我有绘制多边形的问题，有人可以podskozat如何实现它？提前致谢

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>

<body>

<canvas  id="my_canvas" width= 520px  height="520px" style="display:block; margin: 0 auto; background-image: url(2.png)"></canvas>
<h2 id="player1">0</h2>
<h2 id="player2">0</h2>
</body>
<script>


function draw()
{
    try
    {
        var elem = document.getElementById("my_canvas");
        var ctx = elem.getContext("2d");
        // Var
        var polygon = 520;                 //max pixel
        var max_points = 14;               //max points
        var pixel = 40;                    //size of point in pixel
        var counter = 0;                   // counter
        var n =14; var m =14;

        // Array
        var points = new Array();          // points
        var pointX = new Array();          // point for X
        var pointY = new Array();          // point for Y
        var pos_pt = new Array(n);         // value of every point
        for(var i =0; i<n;i++)
        {pos_pt[i] = new Array(m);}
        for(var i = 0; i < n; i++)
        {
            for(var j = 0; j < m; j++)
            {
                pos_pt[i][j]= 0;
            }
        }
        // sing position of points
        for(var i =0 ;i < max_points; i++)
        {
            points[i] = pixel*i;
        }
        // drawing line
        for (var i = 0; i <= polygon; i = i + pixel)
        {
            //draw X line
            ctx.moveTo(0, i);
            ctx.lineTo(polygon, i);
            ctx.stroke();
            // draw Y line
            ctx.moveTo(i, 0);
            ctx.lineTo(i, polygon);
            ctx.stroke();
        }
        //drawing points massive points[i][j]
        for(var i = 0 ; i<max_points;i++)
        {
            for(var j = 0 ; j<max_points;j++)
            {
                ctx.beginPath();
                ctx.arc(points[i],points[j],5,0,2*Math.PI);
                ctx.stroke();
            }
        }
        // drawing on click
         ctx.canvas.addEventListener('click', function(event)
        {
            var mouseX = event.clientX - ctx.canvas.offsetLeft;
            var mouseY = event.clientY - ctx.canvas.offsetTop;
            var interval = 7;
            for (var i = 0; i < max_points; i++)
            {
                for (var j = 0; j < max_points; j++)
                {
                    if(mouseX < (i*pixel)+interval && mouseX > (i*pixel)-interval && mouseY < (j*pixel)+interval && mouseY>(j*pixel)-interval)
                    {
                        ctx.beginPath();

                        if(counter % 2 == 0 && pos_pt[i][j] != 2 && pos_pt[i][j] != 1)
                        {
                            ctx.arc(points[i],points[j],12,0,2*Math.PI);
                            ctx.fillStyle = 'blue';
                            ctx.fill();
                            ctx.stroke();
                            counter++;
                            pos_pt[i][j] =1;
                            ctx.fillStyle = 'red';
                            ctx.font ="16px serif";
                            pointX.push(i);
                            pointY.push(j);
                            ctx.fillText(pos_pt[i][j],points[i]-3.5,points[j]+3.5);
                                                    }
                        else if(counter % 2 != 0 && pos_pt[i][j] != 2 && pos_pt[i][j] != 1)
                        {
                            ctx.arc(points[i],points[j],12,0,2*Math.PI);
                            ctx.fillStyle = 'red';
                            ctx.fill();
                            ctx.stroke();
                            counter++;
                            pos_pt[i][j] = 2;
                            ctx.fillStyle = 'blue';
                            ctx.font ="16px serif";
                            ctx.fillText(pos_pt[i][j],points[i]-3.5,points[j]+3.5);
                        }
                        else
                        {
                            alert("the something go wrong");
                        }
                        // drawing blue polygon
                        var player = pos_pt[i][j];
                        console.log(player);
                        if(pos_pt[i][j]==1)
                        {
                            if(player +1 == 2 && player -1 == 2)
                            {
                                console.log("ok");
                            }
                        }
                        console.log(i,j,pos_pt[i][j]);
                        console.log(i+1,j,pos_pt[i+1][j]);
                        console.log(i-1,j,pos_pt[i-1][j]);
                        console.log(i,j+1,pos_pt[i][j+1]);
                        console.log(i,j-1,pos_pt[i][j-1]);
                    }
                }
            }
        });
        //end of try
    }
    catch (e)                               //error
    {
        alert("the something go wrong");
    }
}

window.addEventListener('load',function(event){
   draw();
});
</script>

</html>















<!--
ctx.beginPath();
                                ctx.fillStyle = "rgba(0,0,255,0.5)";
                                for (var m = 0; m < 3; m++) {
                                    console.log(pointX[m]);
                                    ctx.moveTo(pointX[m] * pixel, pointY[m] * pixel);
                                    ctx.lineTo(pointX[m + 2] * pixel, pointY[m + 2] * pixel);
                                    ctx.lineTo(pointX[m + 1] * pixel, pointY[m + 1] * pixel);
                                    ctx.lineTo(pointX[0] * pixel, pointY[0] * pixel);
                                }
                                                            ctx.closePath();
                            ctx.fill();

＆＃13;

Answer 1

绘制虚线多边形时遇到问题？ ...

以下是您的代码的重构：

使用plays数组来保存所有用户的播放

使用polys数组来保存所有用户的已完成多边形。 polys []中的每个元素（element == polygon）都是来自plays数组的索引数组，在连接时形成多边形，

重复使用一个绘图功能绘制所有点。

带注释的代码和演示（为简单起见，您的网格已被删除）：

// canvas vars var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; // general vars var PI2=Math.PI*2; // game vars var cellWidth=20; var cellHeight=20; var dotRadius=4; var plays=[]; var polys=[]; // test plays addPlay(5,1,'red'); addPlay(4,3,'blue'); addPlay(1,1,'red'); addPlay(4,2,'blue'); addPlay(2,1,'red'); addPlay(5,2,'blue'); addPlay(3,1,'red'); addPlay(6,2,'blue'); addPlay(2,2,'red'); addPlay(7,2,'blue'); addPlay(1,2,'red'); addPlay(8,2,'blue'); addPoly([2,4,6,8,10]); // add new play function addPlay(col,row,color){ plays.push({col:col,row:row,color:color}); drawAll(); } // draw one play function drawPlay(play){ ctx.beginPath(); ctx.arc(play.col*cellWidth,play.row*cellHeight,dotRadius,0,PI2); ctx.fillStyle=play.color; ctx.fill(); } // add new poly function addPoly(playIndices){ var poly=[]; for(var i=0;i<playIndices.length;i++){ poly.push(plays[playIndices[i]]); } polys.push(poly); drawAll(); } // draw one polygon in specified color function drawPoly(plays,color){ // draw the lines first because they appear under the dots ctx.beginPath(); ctx.moveTo(plays[0].col*cellWidth,plays[0].row*cellHeight); for(var i=1;i<plays.length;i++){ ctx.lineTo(plays[i].col*cellWidth,plays[i].row*cellHeight); } ctx.closePath(); ctx.strokeStyle=plays[0].color; ctx.lineWidth=2; ctx.stroke(); // redraw all the dots on top of the lines for(var i=0;i<plays.length;i++){ drawPlay(plays[i]); } } // redraw everything function drawAll(){ ctx.clearRect(0,0,cw,ch); for(var i=0;i<plays.length;i++){ drawPlay(plays[i]); } for(var i=0;i<polys.length;i++){ drawPoly(polys[i]); } }

body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

如何在画布上实现游戏点？

1 个答案: