Форум программистов, компьютерный форум, киберфорум
Red_Pain
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Игра точки Java Script на Canvas

Запись от Red_Pain размещена 19.05.2018 в 22:46
Метки gamedev, games, javascript

Игра точки на Java Script, вопрос как реализовать закраску поля, если вокруг выделены все точки одного цвета.
Заранее спасибо, код прилагается.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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>
Размещено в Без категории
Просмотров 532 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.