<?xml version="1.0" encoding="UTF-8" ?>
<!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>Insert title here</title>
<style type="text/css">
#spielfelder { display: block; margin: 50px auto; width: 664px; height: 664px; }
#spielfelder div { float: left; width: 300px; height: 300px; margin: 15px; display: block; border: 1px solid #CECECE; background: #FAFAFA; }
#spielfelder span { float: left; width: 98px; height: 98px; border: 1px solid #CFCFCF; -moz-border-radius: 49px; }
.stein { background: #EFEFEF; }
.stein:hover { background: #FFFFAE; cursor: pointer; }
.playerOne { background: #FFAEAE !important; cursor: default !important; }
.playerTwo { background: #AEFFAE !important; cursor: default !important; }
.clear { display: none; clear: both; font-size: 0; height: 0; }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="spielfelder"></div>
<br clear="left" />
<a href="#" onclick="feldDrehen();">Feld links drehen</a>
<a href="#" onclick="feldDrehen(1);">Feld rechts drehen</a>
<script type="text/javascript">
$(document).ready(function() {
var currentPlayer = 0; // 0 = none, 1 = first player, 2 = second player
function generatePlayfields(obj) {
// generate 4 playfields with 9 tiles
for (var i=0, il=4; i<il; i++) {
var field = $(document.createElement('div'));
field.attr('id', 'spielfeld_' + i);
field.className = 'spielfeld';
// generate stones
for (c=0, cl=9; c<cl; c++) {
var tile = document.createElement('span');
tile.className = 'stein';
field.append(tile);
}
obj.append(field);
}
}
// we use no object abstraction...
function clickStone(event) {
if (currentPlayer == 1) {
$(this).addClass('playerOne').unbind();
} else if (currentPlayer == 2) {
$(this).addClass('playerTwo').unbind();
}
currentPlayer ++;
if (currentPlayer > 2) {
currentPlayer = 1;
}
//console.log(event.target);
//alert('Stein ' + event.target.id + ' wurde angeklickt');
}
function clickGamefield(event) {
console.log(event.target);
//alert('Spielfeld - ' + event.target.id + ' - soll gedreht werden?!');
}
// all init logic goes here...
generatePlayfields($('#spielfelder'));
//$('.spielfeld').bind('click', clickGamefield);
$('.stein').bind('click', clickStone);
currentPlayer = 1;
});
function feldDrehen(direction) {
var tiles = $('#spielfeld_0').children();
var states = [];
var state = 0;
var obj = null
// gather current states and relocate
for (i=0, il=tiles.length; i<il; i++) {
obj = $(tiles[i]);
states[i] = obj.hasClass('playerOne') ? 1 : (obj.hasClass('playerTwo') ? 2 : 0);
obj.removeClass('playerOne playerTwo');
}
// rearrange and apply them - left is default behavior
var tmp = null;
if (direction == 1) {
tmp = [ states[6], states[3], states[0],
states[7], states[4], states[1],
states[8], states[5], states[2]];
} else {
tmp = [ states[2], states[5], states[8],
states[1], states[4], states[7],
states[0], states[3], states[6]];
}
for (i=0, il=tiles.length; i<il; i++) {
$(tiles[i]).addClass( tmp[i] == 1 ? 'playerOne' : (tmp[i] == 2 ? 'playerTwo' : '') );
}
}
</script>
</body>
</html>
