marker
Well-Known Member
- Регистрация
- 23.10.2010
- Сообщения
- 399
на днях вспомнил такую хорошую игру под названием "Точки".
Может быть кто-то играл в нее в детстве. Решил реализовать ее на canvas.
Но тут возникла сложность с некоторыми расчетами,
чтобы понять какие нажмите на ссылку ниже, там демонстрация того скрипта который я уже написал.
http://jsfiddle.net/sUyRu/
Собственно проблема:
Когда несколько точек одного игрока(цвета) создают замыкающую фигуру
я не могу рассчитать путь и все точки которые входят внутрь этой фигуры для составления массива координат.
Внутри обьекта app.functions есть функция blockConstruct которая продемонстрирует создание фигуры в определенной области.
Дополнительная информация:
Каждый квадрат имеет размер 20х20 пикселей. Поэтому координата 2x2 == 40x40
Мне нужен не обязательно код, а логика по которой можно рассчитать дирректорию и область.
Вот код отдельно:
Может быть кто-то играл в нее в детстве. Решил реализовать ее на canvas.
Но тут возникла сложность с некоторыми расчетами,
чтобы понять какие нажмите на ссылку ниже, там демонстрация того скрипта который я уже написал.
http://jsfiddle.net/sUyRu/
Собственно проблема:
Когда несколько точек одного игрока(цвета) создают замыкающую фигуру
я не могу рассчитать путь и все точки которые входят внутрь этой фигуры для составления массива координат.
Внутри обьекта app.functions есть функция blockConstruct которая продемонстрирует создание фигуры в определенной области.
Дополнительная информация:
Каждый квадрат имеет размер 20х20 пикселей. Поэтому координата 2x2 == 40x40
Мне нужен не обязательно код, а логика по которой можно рассчитать дирректорию и область.
Вот код отдельно:
Код:
<canvas id='game_points' width='401' height='401'>
<a href='javascript:void(0);'></a>
</canvas>
Код:
$(function(){
var app = {};
app.$canvas = $('#game_points');
app.in_action = 0;
app.mouse = app.players = app.data = app.size = {};
app.size.width = 400;
app.size.height = 400;
app.data.playerStep = 'black';
app.data.pointList = app.data.pointByPlayer = new Array();
app.data.pointByPlayer['black'] = app.data.pointByPlayer['red'] = new Array();
app.mouse.top = 0;
app.mouse.left = 0;
app.players.black = {color:'#000000'};
app.players.red = {color:'#ff0000'};
if (app.$canvas[0].getContext)
app.ctx = app.$canvas[0].getContext('2d');
else
return false;
app.functions = {
blockConstruct:function( coordX, coordY ){
//TEST for TEST
app.ctx.beginPath();
app.ctx.moveTo(20,20);
app.ctx.lineTo(40,20);
app.ctx.lineTo(60,40);
app.ctx.lineTo(40,60);
app.ctx.lineTo(20,40);
app.ctx.lineTo(20,20);
app.ctx.closePath();
app.ctx.stroke();
},
setPoint:function( coordX, coordY ){
coordX = Math.round( coordX / 20 ) * 20;
coordY = Math.round( coordY / 20 ) * 20;
if( app.data.pointList[coordX+'.'+coordY] ) return false;
app.ctx.beginPath();
app.ctx.arc( coordX, coordY, 5, 0, Math.PI*2, true );
app.ctx.fillStyle = app.players[app.data.playerStep].color;
app.ctx.closePath();
app.ctx.fill();
app.data.pointByPlayer[app.data.playerStep][coordX+'.'+coordY] = app.data.pointList[coordX+'.'+coordY] = {
playerName : app.data.playerStep,
coordX : coordX,
coordY : coordY,
quadraX : coordX / 20,
quadraY : coordY / 20
}
if( app.data.playerStep == 'black' )
app.data.playerStep = 'red';
else
app.data.playerStep= 'black';
}
}
//app.functions.blockConstruct(1,2);
app.$canvas.mousemove(function(e){
app.offset = app.$canvas.offset();
app.mouse.top = parseInt(e.pageY-app.offset.top);
app.mouse.left = parseInt(e.pageX-app.offset.left);
});
app.$canvas.click(function(e){
if( app.in_action == 1 ) return false;
app.in_action = 1;
app.functions.setPoint( app.mouse.left, app.mouse.top );
app.in_action = 0;
return false;
})
});
Код:
body, html {height:100%;}
body {margin:0;height:100%;}
canvas#game_points {
position:absolute;
margin-left:-200px;
left:50%;
top:30px;
background:transparent url('http://s018.radikal.ru/i507/1201/56/aeed04ee1b7d.png') repeat left top;
}
