【发布时间】：2016-08-13 19:49:34
【问题描述】：
我在画布上制作名为点的游戏。 这是游戏的wiki： https://en.wikipedia.org/wiki/Dots_(game) 我在绘制多边形时遇到问题，有人可以 podskozat 如何实现它？ 提前致谢
<!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();【问题讨论】：
-
您能否发布一个更精简的代码 sn-p，这可以清楚地显示您遇到问题的部分。你仍然可以提供整个东西作为一个小提琴左右。
标签： arrays html canvas android-canvas 2d-games