<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juego de puntos</title>
<style type="text/css">
body{
margin:0;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
function game(x,y,player1,player2){
var points=[];
points.radius=10;
points.color="white";
points.mouseOverColor="green";
points.activeColor="red";
points.space=80;
for(var i=0,k=0;i<y;i++){
points[i]=[];
for(var j=0;j<x;j++){
k++;
points[i][j]={
num:k,
mouseover:false,
canChange:true,
selector:false,
x:(points.space+points.radius)*j+points.radius+30,//+30 para padding canvas
y:(points.space+points.radius)*i+points.radius+30,
i:i,
j:j,
connected:[]
};
}
}
this.points=points;
this.lines=[];
this.players=[
{name:player1,points:0,wins:0},
{name:player2,points:0,wins:0},
];
this.rounds=0;
self=this;
this.mouse={x:0,y:0};
this.canvas=document.createElement('canvas');
this.canvas.width=x*(this.points.radius+this.points.space);
this.canvas.height=y*(this.points.radius+this.points.space);
this.c=this.canvas.getContext('2d');
this.turn=this.players[0];
window.addEventListener('mousemove',function(e){
e=e||window.event;
self.mouse={x:e.clientX||e.offsetX,y:e.clientY||e.offsetY};
for(var i=0;i<self.points.length;i++){
for(var j=0;j<self.points[0].length;j++){
var point=self.points[i][j];
var radius=self.points.radius;
if(self.colision(point.x-radius,point.y-radius,radius*2,radius*2)){
self.points[i][j].mouseover=true;
}else{
self.points[i][j].mouseover=false;
}
}
}
},false);
window.addEventListener('click',function(){
for(var i=0;i<self.points.length;i++){
for(var j=0;j<self.points[0].length;j++){
var point=points[i][j];
if(point.mouseover && point.canChange){
if(point.selector==false){
var active=self.activePoints();
if(active.length==1){
var near=self.near(active[0]);
for(var k=0;k<near.length;k++){
if(near[k].num==point.num){
for(var x=0;x<point.connected.length;x++){
if(point.connected[x]==active[0].num)return false;
}
//Made new line
var line={
x:active[0].x-near[k].x!=0?near[k].x:near[k].x-self.points.radius,
y:active[0].x-near[k].x!=0?near[k].y-self.points.radius:near[k].y,
width:active[0].x-near[k].x||self.points.radius*2,
height:active[0].y-near[k].y||self.points.radius*2,
color:self.turn.name==self.players[0].name?"red":"blue"
};
self.lines.push(line);
point.connected.push(active[0].num);
active[0].connected.push(point.num);
active[0].selector=false;
point.selector=false;
self.changeTurn();
break;
}
}
}else if(self.activePoints().length==0){
point.selector=self.turn;
}
}else{
point.selector=false;
}
}
}
}
},false);
}
game.prototype.activePoints=function(){
var n=[];
for(var i=0;i<this.points.length;i++){
for(var j=0;j<this.points[i].length;j++){
if(this.points[i][j].selector!=false)n.push(this.points[i][j]);
}
}
return n;
}
game.prototype.near=function(obj){
var near=[];
if(typeof this.points[obj.i+1]!='undefined' && this.points[obj.i+1][obj.j]){
near.push(this.points[obj.i+1][obj.j]);
}
if(typeof this.points[obj.i-1]!='undefined' && this.points[obj.i-1][obj.j]){
near.push(this.points[obj.i-1][obj.j]);
}
if(typeof this.points[obj.i][obj.j+1]!='undefined'){
near.push(this.points[obj.i][obj.j+1]);
}
if(typeof this.points[obj.i][obj.j-1]!='undefined'){
near.push(this.points[obj.i][obj.j-1]);
}
return near;
}
game.prototype.colision=function(x,y,width,height,mousex,mousey){
var mousex=mousex||this.mouse.x;
var mousey=mousey||this.mouse.y;
if((mousex>=x && mousex<=x+width) && (mousey>=y && mousey<=y+height))return true;
return false;
}
game.prototype.changeTurn=function(){
self.turn=self.turn.name==self.players[0].name?self.players[1]:self.players[0];
}
game.prototype.lineBetween=function(obj,obj2){
for(var i=0;i<obj.connected.length;i++){
if(obj.connected[i]==obj2.num)return true;
}
return false;
}
game.prototype.draw=function(){
var c=this.c;
c.fillStyle="#ccc";
c.fillRect(0,0,this.canvas.width,this.canvas.height);
c.fill();
var mouseHave=false;
//Lines
for(x in this.lines){
var line=this.lines[x];
c.beginPath();
c.fillStyle=line.color;
c.fillRect(line.x,line.y,line.width,line.height);
c.fill();
c.closePath();
}
//Points
for(var i=0;i<this.points.length;i++){
for(var j=0;j<this.points[0].length;j++){
var point=this.points[i][j];
c.beginPath();
if(point.mouseover && !point.selector){
this.canvas.style.cursor="pointer";
mouseHave=true;
}else if(!mouseHave){
this.canvas.style.cursor="default";
}
c.fillStyle=point.mouseover?this.points.mouseOverColor:(point.selector?this.points.activeColor:this.points.color);
c.arc(point.x,point.y,this.points.radius,0,2*Math.PI);
c.fill();
c.closePath();
}
}
}
game.prototype.start=function(){
this.players[0].points=0;
this.players[1].points=0;
this.interval=setInterval(function(){self.draw()},33);
document.body.appendChild(this.canvas);
}
window.onload=function(){
var juego=new game(10,8,'test','test2');
juego.start();
}
</script>
</html>