initial commit
This commit is contained in:
Maik Hagenbruch
commit
558297e42d
58
css/styles.css
Normal file
58
css/styles.css
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
#site {
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid grey;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
#site h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gamePanel {}
|
||||||
|
#gamePanel .field {
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
#gamePanel .field.even {
|
||||||
|
background-color: #aaa;
|
||||||
|
}
|
||||||
|
#gamePanel .field.odd {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
.field {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.field .bobble {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: rgba(255,255,255,0.7);
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.field.black {
|
||||||
|
background-image: url(../img/bauer_black.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field.white {
|
||||||
|
background-image: url(../img/bauer_weiss.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field.white.shogun {
|
||||||
|
background-image: url(../img/king_weiss.png)
|
||||||
|
}
|
||||||
|
.field.black.shogun {
|
||||||
|
background-image: url(../img/king_black.png)
|
||||||
|
}
|
||||||
|
.field {
|
||||||
|
background-size:cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field.farmer,
|
||||||
|
.field.shogun {
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
#gamePanel .field.possibleMove {
|
||||||
|
background-color: rgba(100,150,20, 0.8);
|
||||||
|
}
|
||||||
BIN
img/bauer_black.png
Normal file
BIN
img/bauer_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
img/bauer_weiss.png
Normal file
BIN
img/bauer_weiss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
img/king_black.png
Normal file
BIN
img/king_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
img/king_weiss.png
Normal file
BIN
img/king_weiss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
21
index.html
Normal file
21
index.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Shogun</title>
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
<script type="text/javascript" src="js/game.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="site">
|
||||||
|
<h2>S H O G U N</h2>
|
||||||
|
<div id="gamePanel">
|
||||||
|
<script type="text/javascript">
|
||||||
|
var game = new Game();
|
||||||
|
game.drawGamePanel(8,8,60);
|
||||||
|
game.setPlayingFigures();
|
||||||
|
game.calculateMovesForPlayers();
|
||||||
|
game.showPossibleMoves();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
241
js/game.js
Normal file
241
js/game.js
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
class Game {
|
||||||
|
constructor() {
|
||||||
|
this.whitePlayer = new Player('white');
|
||||||
|
this.blackPlayer = new Player('black');
|
||||||
|
}
|
||||||
|
drawGamePanel(x,y, widthAndHeight) {
|
||||||
|
var boxes = new Array();
|
||||||
|
for(var i=0; i<y; i++) {
|
||||||
|
for(var j=0; j<x; j++) {
|
||||||
|
boxes.push(new Array(i+1,j+1))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var rows = new Array();
|
||||||
|
var row = new Array();
|
||||||
|
boxes.forEach(function(item, index) {
|
||||||
|
var domElement = document.createElement('div');
|
||||||
|
domElement.setAttribute('data-x', item[1]);
|
||||||
|
domElement.setAttribute('data-y', item[0]);
|
||||||
|
domElement.setAttribute('id', 'field-'+(index+1))
|
||||||
|
var backgroudColor = '';
|
||||||
|
domElement.setAttribute(
|
||||||
|
'style',
|
||||||
|
'width:'+widthAndHeight+'px; height:'+widthAndHeight+'px;'
|
||||||
|
)
|
||||||
|
if(row.length<8) {
|
||||||
|
row.push(domElement);
|
||||||
|
}
|
||||||
|
if(row.length == 8 ) {
|
||||||
|
rows.push(row)
|
||||||
|
row = new Array();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
rows.forEach(function(item, indexRow) {
|
||||||
|
var wrap = document.createElement('div');
|
||||||
|
wrap.setAttribute('id', 'row-'+(indexRow+1));
|
||||||
|
document.getElementById('gamePanel').append(wrap)
|
||||||
|
item.forEach(function(field, indexField) {
|
||||||
|
if(((indexRow+1)+(indexField+1))%2 == 0) {
|
||||||
|
field.setAttribute('class', 'even field')
|
||||||
|
} else {
|
||||||
|
field.setAttribute('class', 'odd field')
|
||||||
|
}
|
||||||
|
wrap.append(field);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setPlayingFigures() {
|
||||||
|
var whiteStartRow = document.getElementById('row-1');
|
||||||
|
var whiteFields = document.querySelectorAll('#row-1 .field')
|
||||||
|
var blackStartRow = document.getElementById('row-8');
|
||||||
|
var blackFields = document.querySelectorAll('#row-8 .field')
|
||||||
|
whiteFields.forEach(function(item, index) {
|
||||||
|
if(index==3) {
|
||||||
|
item.classList.add('white');
|
||||||
|
item.classList.add('shogun');
|
||||||
|
item.setAttribute('data-figure', 'sh');
|
||||||
|
} else {
|
||||||
|
item.classList.add('white');
|
||||||
|
item.classList.add('farmer');
|
||||||
|
item.setAttribute('data-figure', index<3 ? 'b'+(index+1) : 'b'+index );
|
||||||
|
}
|
||||||
|
})
|
||||||
|
blackFields.forEach(function(item, index) {
|
||||||
|
if(index==4) {
|
||||||
|
item.classList.add('black');
|
||||||
|
item.classList.add('shogun');
|
||||||
|
item.setAttribute('data-figure', 'sh');
|
||||||
|
} else {
|
||||||
|
item.classList.add('black');
|
||||||
|
item.classList.add('farmer');
|
||||||
|
item.setAttribute('data-figure', index<4 ? 'b'+(index+1) : 'b'+index );
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
calculateMovesForPlayers() {
|
||||||
|
this.whitePlayer.calculateMoves();
|
||||||
|
this.blackPlayer.calculateMoves();
|
||||||
|
}
|
||||||
|
|
||||||
|
showPossibleMoves() {
|
||||||
|
var whitePlayer = this.whitePlayer;
|
||||||
|
var blackPlayer = this.blackPlayer;
|
||||||
|
var busyFields = document.querySelectorAll('.farmer, .shogun');
|
||||||
|
busyFields.forEach(function(item, index) {
|
||||||
|
if(item.classList.contains('white')) {
|
||||||
|
var possibleMoves = whitePlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
|
||||||
|
item.setAttribute('data-moves', possibleMoves)
|
||||||
|
var bobble = document.createElement('div');
|
||||||
|
var bobbleText = document.createTextNode(possibleMoves)
|
||||||
|
bobble.setAttribute('class', 'bobble');
|
||||||
|
bobble.appendChild(bobbleText);
|
||||||
|
item.append(bobble);
|
||||||
|
item.addEventListener("click", this.pickUpFigure);
|
||||||
|
}
|
||||||
|
if(item.classList.contains('black')) {
|
||||||
|
var possibleMoves = blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
|
||||||
|
item.setAttribute('data-moves', possibleMoves)
|
||||||
|
var bobble = document.createElement('div');
|
||||||
|
var bobbleText = document.createTextNode(possibleMoves)
|
||||||
|
bobble.setAttribute('class', 'bobble');
|
||||||
|
bobble.appendChild(bobbleText);
|
||||||
|
item.append(bobble);
|
||||||
|
item.addEventListener("click", this.pickUpFigure);
|
||||||
|
}
|
||||||
|
}, this)
|
||||||
|
}
|
||||||
|
pickUpFigure() {
|
||||||
|
console.log(this.classList)
|
||||||
|
if(!this.classList.contains('farmer') && !(this.classList.contains('shogun'))) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var possibleMoves = parseInt(this.getAttribute('data-moves'));
|
||||||
|
var possibleTargets = new Object();
|
||||||
|
var x = parseInt(this.getAttribute('data-x'));
|
||||||
|
var y = parseInt(this.getAttribute('data-y'));
|
||||||
|
switch(possibleMoves) {
|
||||||
|
case 1:
|
||||||
|
possibleTargets[1] = new Array(x+possibleMoves, y);
|
||||||
|
possibleTargets[2] = new Array(x, y+possibleMoves);
|
||||||
|
possibleTargets[3] = new Array(x-possibleMoves, y);
|
||||||
|
possibleTargets[4] = new Array(x, y-1);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
possibleTargets[1] = new Array(x+possibleMoves, y);
|
||||||
|
possibleTargets[2] = new Array(x, y+possibleMoves);
|
||||||
|
possibleTargets[3] = new Array(x-possibleMoves, y);
|
||||||
|
possibleTargets[4] = new Array(x, y-possibleMoves);
|
||||||
|
|
||||||
|
possibleTargets[5] = new Array(x+1, y+1);
|
||||||
|
possibleTargets[6] = new Array(x-1,y-1);
|
||||||
|
possibleTargets[7] = new Array(x+1,y-1);
|
||||||
|
possibleTargets[8] = new Array(x-1, y+1);
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
possibleTargets[1] = new Array(x+possibleMoves, y);
|
||||||
|
possibleTargets[2] = new Array(x, y+possibleMoves);
|
||||||
|
possibleTargets[3] = new Array(x-possibleMoves, y);
|
||||||
|
possibleTargets[4] = new Array(x, y-possibleMoves);
|
||||||
|
|
||||||
|
possibleTargets[5] = new Array(x-1, y-2);
|
||||||
|
possibleTargets[6] = new Array(x+1, y-2);
|
||||||
|
possibleTargets[7] = new Array(x+1, y+2);
|
||||||
|
possibleTargets[8] = new Array(x-2, y+2);
|
||||||
|
possibleTargets[9] = new Array(x-2, y+1);
|
||||||
|
possibleTargets[10] = new Array(x-2, y-1);
|
||||||
|
possibleTargets[11] = new Array(x+2, y-1);
|
||||||
|
possibleTargets[12] = new Array(x+2, y+1);
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
possibleTargets[1] = new Array(x-possibleMoves, y);
|
||||||
|
possibleTargets[2] = new Array(x+possibleMoves, y);
|
||||||
|
possibleTargets[3] = new Array(x, y+possibleMoves);
|
||||||
|
possibleTargets[4] = new Array(x, y-possibleMoves);
|
||||||
|
|
||||||
|
possibleTargets[5] = new Array(x+1, y-3);
|
||||||
|
possibleTargets[6] = new Array(x-1, y-3);
|
||||||
|
possibleTargets[7] = new Array(x+3, y+1);
|
||||||
|
possibleTargets[8] = new Array(x+3, y-1);
|
||||||
|
possibleTargets[9] = new Array(x+1, y+3);
|
||||||
|
possibleTargets[10] = new Array(x-1, y+3);
|
||||||
|
possibleTargets[11] = new Array(x-3, y-1);
|
||||||
|
possibleTargets[12] = new Array(x-3, y+1);
|
||||||
|
|
||||||
|
possibleTargets[13] = new Array(x+2, y-2);
|
||||||
|
possibleTargets[14] = new Array(x+2, y+2);
|
||||||
|
possibleTargets[15] = new Array(x-2, y+2);
|
||||||
|
possibleTargets[16] = new Array(x-2, y-2);
|
||||||
|
}
|
||||||
|
for(var target in possibleTargets) {
|
||||||
|
possibleTargets[target].forEach(function(item, index) {
|
||||||
|
console.log(item)
|
||||||
|
if(item > 8 || item < 1) {
|
||||||
|
delete possibleTargets[target]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var allFields = document.querySelectorAll('.field');
|
||||||
|
allFields.forEach(function(item, index) {
|
||||||
|
item.classList.remove('possibleMove');
|
||||||
|
})
|
||||||
|
for (var target in possibleTargets) {
|
||||||
|
var greenField = document.querySelector('[data-x="'+possibleTargets[target][0]+'"][data-y="'+possibleTargets[target][1]+'"]')
|
||||||
|
if(!greenField.classList.contains('farmer') && !greenField.classList.contains('shogun')) {
|
||||||
|
greenField.classList.add('possibleMove');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Player {
|
||||||
|
constructor(color) {
|
||||||
|
this.figures = {
|
||||||
|
positions: new Array(),
|
||||||
|
b1: new Array(),
|
||||||
|
b2: new Array(),
|
||||||
|
b3: new Array(),
|
||||||
|
b4: new Array(),
|
||||||
|
b5: new Array(),
|
||||||
|
b6: new Array(),
|
||||||
|
b7: new Array(),
|
||||||
|
sh: new Array(),
|
||||||
|
}
|
||||||
|
if(color == 'white') {
|
||||||
|
this.figures.positions["b1"] = new Array(1,1);
|
||||||
|
this.figures.positions["b2"] = new Array(2,1);
|
||||||
|
this.figures.positions["b3"] = new Array(3,1);
|
||||||
|
this.figures.positions["b4"] = new Array(5,1);
|
||||||
|
this.figures.positions["b5"] = new Array(6,1);
|
||||||
|
this.figures.positions["b6"] = new Array(7,1);
|
||||||
|
this.figures.positions["b7"] = new Array(8,1);
|
||||||
|
this.figures.positions["sh"] = new Array(4,1);
|
||||||
|
}
|
||||||
|
if(color == 'black') {
|
||||||
|
this.figures.positions["b1"] = new Array(1,8);
|
||||||
|
this.figures.positions["b2"] = new Array(2,8);
|
||||||
|
this.figures.positions["b3"] = new Array(3,8);
|
||||||
|
this.figures.positions["b4"] = new Array(4,8);
|
||||||
|
this.figures.positions["b5"] = new Array(6,8);
|
||||||
|
this.figures.positions["b6"] = new Array(7,8);
|
||||||
|
this.figures.positions["b7"] = new Array(8,8);
|
||||||
|
this.figures.positions["sh"] = new Array(5,8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
calculateMoves() {
|
||||||
|
for(var figure in this.figures) {
|
||||||
|
if(figure != 'positions') {
|
||||||
|
if(figure != 'sh') {
|
||||||
|
for(var i=1; i<65; i++) {
|
||||||
|
this.figures[figure].push(Math.floor(Math.random() * (5 - 1)) + 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for(var i=1; i<65; i++) {
|
||||||
|
this.figures[figure].push(Math.floor(Math.random() * (3 - 1)) + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user