332 lines
9.1 KiB
JavaScript
332 lines
9.1 KiB
JavaScript
class Abalone {
|
|
constructor(container) {
|
|
this.id = 0;
|
|
this.secret = "lol";
|
|
this.players = [];
|
|
this.turn = 0;
|
|
|
|
// State : -1 => Not Started, 0 => Ended, 1 => Running
|
|
this.state = -1;
|
|
this.moves = [];
|
|
this.window = container.ownerDocument.defaultView;
|
|
console.log(this.window.innerWidth);
|
|
console.log(this.window.innerHeight);
|
|
this.stage = new Kinetic.Stage({
|
|
width : this.window.innerWidth,
|
|
height : this.window.innerHeight,
|
|
container : container
|
|
});
|
|
this.layers = {
|
|
background : new Kinetic.Layer({id:'background',name:'pieces'}),
|
|
board : new Kinetic.Layer({id:'board',name:'pieces'}),
|
|
pieces : new Kinetic.Layer({id:'pieces',name:'pieces'})
|
|
};
|
|
|
|
this.stage.add(
|
|
this.layers.background,
|
|
this.layers.board,
|
|
this.layers.pieces);
|
|
|
|
this.colors = settings.colors.background;
|
|
this.pieces = [];
|
|
this.texts = {};
|
|
this.board = new Board(this.stage);
|
|
|
|
this.draw();
|
|
|
|
}
|
|
|
|
start() {
|
|
var p0_name = prompt('1st player name?');
|
|
if (p0_name.length <= 0) {
|
|
p0_name = 'Player 0';
|
|
}
|
|
var p1_name = prompt('2nd player name?');
|
|
if (p1_name.length <= 0) {
|
|
p1_name = 'Player 1';
|
|
}
|
|
var slot = false;
|
|
|
|
this.add_player(new Player(0, p0_name));
|
|
this.add_player(new Player(1, p1_name));
|
|
|
|
var starting_position = this.starting_position(
|
|
document.getElementById('startpos').value);
|
|
for (let player_id in starting_position) {
|
|
for (let coord_id in starting_position[player_id]) {
|
|
let coord = starting_position[player_id][coord_id];
|
|
slot = this.board.get_slot(coord);
|
|
let piece = new Piece(
|
|
this.pieces.length,
|
|
this.players[player_id],
|
|
slot.x, slot.y, slot.r - 2, slot.rot, slot.o,
|
|
coord,
|
|
this
|
|
);
|
|
this.pieces.push(piece);
|
|
}
|
|
}
|
|
|
|
this.board.draw_pieces(this.pieces);
|
|
|
|
this.state = 1;
|
|
this.play();
|
|
}
|
|
|
|
next_turn() {
|
|
this.turn++;
|
|
this.texts.turn.text(this.turn);
|
|
this.layers.background.draw();
|
|
this.texts.turn.draw();
|
|
this.play();
|
|
}
|
|
|
|
play() {
|
|
if (this.moves.length > 0) {
|
|
console.log(this.moves[this.moves.length - 1]);
|
|
}
|
|
if (this.turn % 2 == 0) {
|
|
this.moves.push( new Move(this.players[0], this));
|
|
alert('Player 1, it is your turn');
|
|
}
|
|
else {
|
|
this.moves.push( new Move(this.players[1], this));
|
|
alert('Player 2, it is your turn');
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
var rect = new Kinetic.Rect({
|
|
x : 0,
|
|
y : 0,
|
|
width : this.stage.width(),
|
|
height : this.stage.height(),
|
|
stroke : this.colors.stroke,
|
|
drawBorder : false,
|
|
strokeEnabled : false,
|
|
fill : this.colors.bg
|
|
});
|
|
|
|
var text_cont = new Kinetic.Group({
|
|
x : this.stage.width()-160,
|
|
y : 10,
|
|
width : 150,
|
|
height : 200,
|
|
});
|
|
|
|
|
|
var text_rect = new Kinetic.Rect({
|
|
x : 0,
|
|
y : 0,
|
|
width : 150,
|
|
height : 200,
|
|
stroke : '#010101',
|
|
fill : '#F0F0F0'
|
|
});
|
|
|
|
text_cont.add(text_rect);
|
|
|
|
var title_text = new Kinetic.Text({
|
|
x : 5,
|
|
y : 5,
|
|
width : 150,
|
|
height : 30,
|
|
text : 'Abalone',
|
|
fill : 'red',
|
|
fontSize : 25
|
|
});
|
|
var turn_text = new Kinetic.Text({
|
|
x : 5,
|
|
y : 35,
|
|
width : 150,
|
|
height : 30,
|
|
text : 'Turn : ',
|
|
fill : 'red',
|
|
fontSize : 25
|
|
});
|
|
var turn_value = new Kinetic.Text({
|
|
x : 95,
|
|
y : 35,
|
|
width : 50,
|
|
height : 30,
|
|
text : this.turn,
|
|
fill : 'red',
|
|
fontSize : 25,
|
|
align : 'right'
|
|
});
|
|
this.texts.turn = turn_value;
|
|
|
|
var p0_text = new Kinetic.Text({
|
|
x : 5,
|
|
y : 65,
|
|
width : 150,
|
|
height : 30,
|
|
text : '',
|
|
fill : 'white',
|
|
stroke : 'black',
|
|
fontSize : 25
|
|
});
|
|
this.texts.p0_name = p0_text;
|
|
var p0_value = new Kinetic.Text({
|
|
x : 95,
|
|
y : 65,
|
|
width : 50,
|
|
height : 30,
|
|
text : '0',
|
|
fill : 'white',
|
|
stroke : '#101010',
|
|
fontSize : 25,
|
|
align : 'right'
|
|
});
|
|
this.texts.p0_score = p0_value;
|
|
|
|
var p1_text = new Kinetic.Text({
|
|
x : 5,
|
|
y : 95,
|
|
width : 150,
|
|
height : 30,
|
|
text : '',
|
|
fill : 'black',
|
|
stroke : '#101010',
|
|
fontSize : 25
|
|
});
|
|
this.texts.p1_name = p1_text;
|
|
var p1_value = new Kinetic.Text({
|
|
x : 95,
|
|
y : 95,
|
|
width : 50,
|
|
height : 30,
|
|
text : '0',
|
|
fill : 'black',
|
|
stroke : 'black',
|
|
fontSize : 25,
|
|
align : 'right'
|
|
});
|
|
this.texts.p1_score = p1_value;
|
|
|
|
text_cont.add(title_text);
|
|
text_cont.add(turn_text);
|
|
text_cont.add(turn_value);
|
|
text_cont.add(p0_text, p0_value, p1_text, p1_value);
|
|
|
|
|
|
this.layers.background.add(rect)
|
|
this.layers.background.add(text_cont)
|
|
|
|
this.stage.draw();
|
|
return rect
|
|
}
|
|
|
|
get_positions() {
|
|
console.log(this.players[0]);
|
|
return [
|
|
this.players[0].get_positions(),
|
|
this.players[1].get_positions()
|
|
]
|
|
}
|
|
|
|
starting_position(name=false) {
|
|
switch (name) {
|
|
case 'margbelg':
|
|
return [ [
|
|
{'x': 'A', 'y': '1'},
|
|
{'x': 'A', 'y': '2'},
|
|
{'x': 'B', 'y': '1'},
|
|
{'x': 'B', 'y': '2'},
|
|
{'x': 'B', 'y': '3'},
|
|
{'x': 'C', 'y': '2'},
|
|
{'x': 'C', 'y': '3'},
|
|
{'x': 'G', 'y': '7'},
|
|
{'x': 'G', 'y': '8'},
|
|
{'x': 'H', 'y': '7'},
|
|
{'x': 'H', 'y': '8'},
|
|
{'x': 'H', 'y': '9'},
|
|
{'x': 'I', 'y': '8'},
|
|
{'x': 'I', 'y': '9'},
|
|
], [
|
|
{'x': 'A', 'y': '4'},
|
|
{'x': 'A', 'y': '5'},
|
|
{'x': 'B', 'y': '4'},
|
|
{'x': 'B', 'y': '5'},
|
|
{'x': 'B', 'y': '6'},
|
|
{'x': 'C', 'y': '5'},
|
|
{'x': 'C', 'y': '6'},
|
|
{'x': 'G', 'y': '4'},
|
|
{'x': 'G', 'y': '5'},
|
|
{'x': 'H', 'y': '4'},
|
|
{'x': 'H', 'y': '5'},
|
|
{'x': 'H', 'y': '6'},
|
|
{'x': 'I', 'y': '5'},
|
|
{'x': 'I', 'y': '6'},
|
|
] ];
|
|
}
|
|
return [ [
|
|
{'x': 'A', 'y': '1'},
|
|
{'x': 'A', 'y': '2'},
|
|
{'x': 'A', 'y': '3'},
|
|
{'x': 'A', 'y': '4'},
|
|
{'x': 'A', 'y': '5'},
|
|
{'x': 'B', 'y': '1'},
|
|
{'x': 'B', 'y': '2'},
|
|
{'x': 'B', 'y': '3'},
|
|
{'x': 'B', 'y': '4'},
|
|
{'x': 'B', 'y': '5'},
|
|
{'x': 'B', 'y': '6'},
|
|
{'x': 'C', 'y': '2'},
|
|
{'x': 'C', 'y': '3'},
|
|
{'x': 'C', 'y': '4'},
|
|
{'x': 'C', 'y': '5'},
|
|
{'x': 'C', 'y': '6'},
|
|
], [
|
|
{'x': 'I', 'y': '5'},
|
|
{'x': 'I', 'y': '6'},
|
|
{'x': 'I', 'y': '7'},
|
|
{'x': 'I', 'y': '8'},
|
|
{'x': 'I', 'y': '9'},
|
|
{'x': 'H', 'y': '4'},
|
|
{'x': 'H', 'y': '5'},
|
|
{'x': 'H', 'y': '6'},
|
|
{'x': 'H', 'y': '7'},
|
|
{'x': 'H', 'y': '8'},
|
|
{'x': 'H', 'y': '9'},
|
|
{'x': 'G', 'y': '4'},
|
|
{'x': 'G', 'y': '5'},
|
|
{'x': 'G', 'y': '6'},
|
|
{'x': 'G', 'y': '7'},
|
|
{'x': 'G', 'y': '8'},
|
|
] ];
|
|
}
|
|
|
|
cur_move() {
|
|
return this.moves[this.moves.length-1];
|
|
}
|
|
|
|
isplayerturn(player_id) {
|
|
return player_id == (this.turn % 2);
|
|
}
|
|
|
|
add_player(player) {
|
|
this.players.push(player);
|
|
this.texts['p' + player.id +'_name'].text(player.name);
|
|
this.layers.background.draw();
|
|
}
|
|
|
|
add_point(piece) {
|
|
if (piece.player.id < 1) {
|
|
this.players[1].score++;
|
|
this.texts.p1_score.text(this.players[1].score);
|
|
if (this.players[1].score === 6) {
|
|
alert(this.players[1].name + ' WINS!');
|
|
}
|
|
}
|
|
else {
|
|
this.players[0].score++;
|
|
this.texts.p0_score.text(this.players[0].score);
|
|
if (this.players[0].score === 6) {
|
|
alert(this.players[0].name + ' WINS!');
|
|
}
|
|
}
|
|
this.layers.background.draw();
|
|
}
|
|
}
|