maikh/shogun
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: maikh:558297e42d4d7cee456f672a07e02b603d1e8447
Branches Tags
maikh:master maikh:feature/shogun-in-danger
...
compare: maikh:master
Branches Tags
maikh:feature/shogun-in-danger maikh:master

3 Commits
558297e42d ... master

Author SHA1 Message Date
Maik Hagenbruch
4c874945d9 finished moving and claculating possible targets and ways 2020-04-01 10:57:36 +02:00
Maik Hagenbruch
48767c8ad8 new folder structure and some changes 2020-03-29 17:33:55 +02:00
Maik Hagenbruch
1995b604a5 Adds gitignore 2020-03-29 17:33:34 +02:00
10 changed files with 484 additions and 27 deletions
Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.ddev

21
index.html
View File

@@ -1,21 +0,0 @@
<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>

11
js/game.js
View File

@@ -95,6 +95,7 @@ class Game {
item.addEventListener("click", this.pickUpFigure); item.addEventListener("click", this.pickUpFigure);
} }
if(item.classList.contains('black')) { if(item.classList.contains('black')) {
console.log('TEST');
var possibleMoves = blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)]; var possibleMoves = blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
item.setAttribute('data-moves', possibleMoves) item.setAttribute('data-moves', possibleMoves)
var bobble = document.createElement('div'); var bobble = document.createElement('div');
@@ -102,12 +103,11 @@ class Game {
bobble.setAttribute('class', 'bobble'); bobble.setAttribute('class', 'bobble');
bobble.appendChild(bobbleText); bobble.appendChild(bobbleText);
item.append(bobble); item.append(bobble);
item.addEventListener("click", this.pickUpFigure); item.addEventListener("click", this.pickupFigure);
} }
}, this) }, this)
} }
pickUpFigure() { pickUpFigure() {
console.log(this.classList)
if(!this.classList.contains('farmer') && !(this.classList.contains('shogun'))) { if(!this.classList.contains('farmer') && !(this.classList.contains('shogun'))) {
return; return;
} }
@@ -142,7 +142,7 @@ class Game {
possibleTargets[5] = new Array(x-1, y-2); possibleTargets[5] = new Array(x-1, y-2);
possibleTargets[6] = new Array(x+1, y-2); possibleTargets[6] = new Array(x+1, y-2);
possibleTargets[7] = new Array(x+1, y+2); possibleTargets[7] = new Array(x+1, y+2);
possibleTargets[8] = new Array(x-2, y+2); possibleTargets[8] = new Array(x-1, y+2);
possibleTargets[9] = new Array(x-2, y+1); possibleTargets[9] = new Array(x-2, y+1);
possibleTargets[10] = new Array(x-2, y-1); possibleTargets[10] = new Array(x-2, y-1);
possibleTargets[11] = new Array(x+2, y-1); possibleTargets[11] = new Array(x+2, y-1);
@@ -179,6 +179,7 @@ class Game {
var allFields = document.querySelectorAll('.field'); var allFields = document.querySelectorAll('.field');
allFields.forEach(function(item, index) { allFields.forEach(function(item, index) {
item.classList.remove('possibleMove'); item.classList.remove('possibleMove');
item.classList.remove('active');
}) })
for (var target in possibleTargets) { for (var target in possibleTargets) {
var greenField = document.querySelector('[data-x="'+possibleTargets[target][0]+'"][data-y="'+possibleTargets[target][1]+'"]') var greenField = document.querySelector('[data-x="'+possibleTargets[target][0]+'"][data-y="'+possibleTargets[target][1]+'"]')
@@ -187,6 +188,10 @@ class Game {
} }
} }
} }
releaseFigure() {
}
} }
class Player { class Player {

25
css/styles.css → web/css/styles.css
View File

@@ -8,7 +8,17 @@
text-align: center; text-align: center;
} }
#gamePanel {} .game {
display: flex;
flex-wrap: wrap;
}
.game #gamePanel {
flex: 0 50%;
}
.game .overview {
flex: 0 50%;
}
#gamePanel .field { #gamePanel .field {
display:inline-block; display:inline-block;
} }
@@ -30,11 +40,11 @@
background-color: rgba(255,255,255,0.7); background-color: rgba(255,255,255,0.7);
text-align:center; text-align:center;
} }
.field.black { .field.black.farmer {
background-image: url(../img/bauer_black.png); background-image: url(../img/bauer_black.png);
} }
.field.white { .field.white.farmer {
background-image: url(../img/bauer_weiss.png); background-image: url(../img/bauer_weiss.png);
} }
@@ -56,3 +66,12 @@
#gamePanel .field.possibleMove { #gamePanel .field.possibleMove {
background-color: rgba(100,150,20, 0.8); background-color: rgba(100,150,20, 0.8);
} }
#gamePanel .field.field.possibleMove:hover {
background-color: rgba(100, 170,20, 0.8);
}
#gamePanel .field.possibleMove.match {
background-color: rgba(255, 37, 37, 0.6);
}
#gamePanel .field.possibleMove.match:hover {
background-color: rgba(255, 0, 0, 0.6);
}

0
img/bauer_black.png → web/img/bauer_black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

0
img/bauer_weiss.png → web/img/bauer_weiss.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
img/king_black.png → web/img/king_black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

0
img/king_weiss.png → web/img/king_weiss.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

32
web/index.html Normal file
View File

@@ -0,0 +1,32 @@
<html lang="de">
<head>
<meta charset="utf-8">
<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 class="game">
<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 class="overview">
<div class="whitePlayer">
<ul></ul>
</div>
<div class="blackPlayer">
<ul></ul>
</div>
</div>
</div>
</div>
</body>
</html>

421
web/js/game.js Normal file
View File

@@ -0,0 +1,421 @@
class Figure {
constructor(x,y) {
this.x = x;
this.y = y;
}
setX(x) {
this.x = x;
}
setY(y) {
this.y = y;
}
getX() {
return parseInt(this.x);
}
getY() {
return parseInt(this.y);
}
getPosition() {
return new Array(parseInt(this.x), parseInt(this.y));
}
reset() {
this.x = 0;
this.y = 0;
}
}
class Field {
constructor(x,y) {
this.x = x;
this.y = y;
}
}
class Game {
constructor() {
this.whitePlayer = new Player('white');
this.blackPlayer = new Player('black');
this.chosenFigure = new Figure(0,0);
this.fields = [];
}
drawGamePanel(x,y, widthAndHeight) {
var boxes = new Array();
for(var i=0; i<y; i++) {
this.fields[(i+1)] = [];
for(var j=0; j<x; j++) {
this.fields[(i+1)][(j+1)] = new Field((i+1),(j+1));
boxes.push(new Array(i+1,j+1))
}
}
var rows = new Array();
var row = new Array();
var that = this;
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);
field.addEventListener(
"click",
function() {
that.handleClick(this)
},
{
passive: true
}
)
})
})
}
handleClick(item) {
if(item.classList.contains('shogun') || item.classList.contains('farmer')) {
this.chosenFigure.setX(item.getAttribute('data-x'));
this.chosenFigure.setY(item.getAttribute('data-y'));
this.pickUpFigure(item);
}
else if(item.classList.contains('possibleMove')) {
this.releaseFigure(item, this.chosenFigure)
} else {
this.removeIndicator();
}
}
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() {
//console.log('show possible moves')
var whitePlayer = this.whitePlayer;
var blackPlayer = this.blackPlayer;
var busyFields = document.querySelectorAll('.farmer, .shogun');
busyFields.forEach(item => this.addBobbles(item));
}
addBobbles(item) {
var that = this;
if(item.classList.contains('white')) {
var possibleMoves = this.whitePlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
item.setAttribute('data-moves', possibleMoves)
if(!item.childNodes[0]) {
var bobble = document.createElement('div');
var bobbleText = document.createTextNode(possibleMoves)
bobble.setAttribute('class', 'bobble');
bobble.appendChild(bobbleText);
item.append(bobble);
}
}
if(item.classList.contains('black')) {
var possibleMoves = this.blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
item.setAttribute('data-moves', possibleMoves)
if(!item.childNodes[0]) {
var bobble = document.createElement('div');
var bobbleText = document.createTextNode(possibleMoves);
bobble.setAttribute('class', 'bobble');
bobble.appendChild(bobbleText);
item.append(bobble);
}
}
}
pickUpFigure(item) {
if(!item.classList.contains('farmer') && !(item.classList.contains('shogun'))) {
return;
}
var possibleMoves = parseInt(item.getAttribute('data-moves'));
var possibleTargets = new Set();
var x = parseInt(item.getAttribute('data-x'));
var y = parseInt(item.getAttribute('data-y'));
const isInField = function(target) {
const [x,y] = target;
if(x < 1 || x > 8 || y < 1 || y > 8) {
return false;
}
return true;
}
switch(possibleMoves) {
case 1:
possibleTargets.add([x+possibleMoves, y]);
possibleTargets.add(new Array(x, y+possibleMoves));
possibleTargets.add(new Array(x-possibleMoves, y));
possibleTargets.add(new Array(x, y-1));
break;
case 2:
possibleTargets.add(new Array(x+possibleMoves, y));
possibleTargets.add(new Array(x, y+possibleMoves));
possibleTargets.add(new Array(x-possibleMoves, y));
possibleTargets.add(new Array(x, y-possibleMoves));
possibleTargets.add(new Array(x+1, y+1));
possibleTargets.add(new Array(x-1,y-1));
possibleTargets.add(new Array(x+1,y-1));
possibleTargets.add(new Array(x-1, y+1));
break;
case 3:
possibleTargets.add(new Array(x+possibleMoves, y));
possibleTargets.add(new Array(x, y+possibleMoves));
possibleTargets.add(new Array(x-possibleMoves, y));
possibleTargets.add(new Array(x, y-possibleMoves));
possibleTargets.add(new Array(x-1, y-2));
possibleTargets.add(new Array(x+1, y-2));
possibleTargets.add(new Array(x+1, y+2));
possibleTargets.add(new Array(x-1, y+2));
possibleTargets.add(new Array(x-2, y+1));
possibleTargets.add(new Array(x-2, y-1));
possibleTargets.add(new Array(x+2, y-1));
possibleTargets.add(new Array(x+2, y+1));
break;
case 4:
possibleTargets.add(new Array(x-possibleMoves, y));
possibleTargets.add(new Array(x+possibleMoves, y));
possibleTargets.add(new Array(x, y+possibleMoves));
possibleTargets.add(new Array(x, y-possibleMoves));
possibleTargets.add(new Array(x+1, y-3));
possibleTargets.add(new Array(x-1, y-3));
possibleTargets.add(new Array(x+3, y+1));
possibleTargets.add(new Array(x+3, y-1));
possibleTargets.add(new Array(x+1, y+3));
possibleTargets.add(new Array(x-1, y+3));
possibleTargets.add(new Array(x-3, y-1));
possibleTargets.add(new Array(x-3, y+1));
possibleTargets.add(new Array(x+2, y-2));
possibleTargets.add(new Array(x+2, y+2));
possibleTargets.add(new Array(x-2, y+2));
possibleTargets.add(new Array(x-2, y-2));
break;
}
// remove out of bounds
for(var possibleTarget of possibleTargets) {
if(!isInField(possibleTarget)) {
possibleTargets.delete(possibleTarget)
}
}
// get possible ways
var that = this;
for(var possibleTarget of possibleTargets) {
possibleTarget["ways"] = this.getPossibleWays(possibleTarget);
}
for(var possibleTarget of possibleTargets) {
for(var way of possibleTarget["ways"]) {
for(var field of way) {
var chosenField = document.querySelector('[data-x="'+that.chosenFigure.getX()+'"][data-y="'+that.chosenFigure.getY()+'"]');
var currentField = document.querySelector('[data-x="'+field.x+'"][data-y="'+field.y+'"]');
var oppositeColor = chosenField.classList.contains('white') ? 'black' : 'white';
var sameColor = chosenField.classList.contains('white') ? 'white' : 'black';
var targetField = document.querySelector('[data-x="'+possibleTarget[0]+'"][data-y="'+possibleTarget[1]+'"]');
var targetX = parseInt(targetField.getAttribute('data-x'));
var targetY = parseInt(targetField.getAttribute('data-y'));
//Startfeld überspringen
if( (( field.x === that.chosenFigure.getX() ) && (field.y === that.chosenFigure.getY() ))) {
continue;
}
// Zielfeld prüfen
if( (( field.x === targetX ) && (field.y === targetY ))) {
if(currentField.classList.contains(sameColor)) {
const ways = possibleTarget["ways"].filter(w => w !== way);
possibleTarget["ways"] = ways;
if(possibleTarget["ways"].length == 0) {
possibleTargets.delete(possibleTarget);
}
}
} else {
if(currentField.classList.contains('shogun') || currentField.classList.contains('farmer')) {
const ways = possibleTarget["ways"].filter(w => w !== way);
possibleTarget["ways"] = ways;
if(possibleTarget["ways"].length == 0) {
possibleTargets.delete(possibleTarget);
}
}
}
}
}
}
for(var possibleTarget of possibleTargets) {
document.querySelector('[data-x="'+possibleTarget[0]+'"][data-y="'+possibleTarget[1]+'"]').classList.add('possibleMove');
}
}
getPossibleWays(to) {
const x1 = this.chosenFigure.getX();
const y1 = this.chosenFigure.getY();
const [x2,y2] = to;
const directionX = x1 < x2 ? 1 : -1;
const directionY = y1 < y2 ? 1 : -1;
const way1 = new Set();
for (let x = x1; directionX == 1 ? x <= x2 : x >= x2; x = x + directionX) {
way1.add(this.getField(x, y1));
}
for (let y = y1; directionY == 1 ? y <= y2 : y >= y2; y = y + directionY) {
way1.add(this.getField(x2, y));
}
const way2 = new Set();
for (let y = y1; directionY == 1 ? y <= y2 : y >= y2; y = y + directionY) {
way2.add(this.getField(x1, y));
}
for (let x = x1; directionX == 1 ? x <= x2 : x >= x2; x = x + directionX) {
way2.add(this.getField(x, y2));
}
const setsEqual = (a,b) => a.size === b.size && [...a].every(value => b.has(value));
if(setsEqual(way1, way2)) {
return [way1];
}
return [way1, way2];
}
getField(x,y) {
return this.fields[x][y];
}
isFree(field) {
if(field.classList.contains('farmer') || field.classList.contains('shogun')) {
return false;
}
return true;
}
releaseFigure(targetField) {
var source = document.querySelector('[data-x="'+this.chosenFigure.getX()+'"][data-y="'+this.chosenFigure.getY()+'"]');
var colorClass = source.classList.contains('white') ? 'white' : 'black';
var oppositeColorClass = source.classList.contains('white') ? 'black' : 'white';
var figureClass = source.classList.contains('farmer') ? 'farmer' : 'shogun';
var figureData = source.getAttribute('data-figure');
source.removeChild(source.childNodes[0]);
source.classList.remove('shogun','farmer', 'black', 'white');
source.setAttribute('data-figure', '');
source.setAttribute('data-moves', '');
targetField.classList.add(figureClass, colorClass);
targetField.setAttribute('data-figure', figureData);
this.removeIndicator();
this.showPossibleMoves();
this.chosenFigure.reset();
game.updateLists();
}
removeIndicator() {
var greenFields = document.querySelectorAll('.possibleMove');
greenFields.forEach(item => {
item.classList.remove('possibleMove')
})
}
updateLists() {
var whiteList = document.querySelector('.whitePlayer');
var blackList = document.querySelector('.blackPlayer');
console.log(whiteList)
console.log(blackList)
}
}
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);
}
}
}
}
}
}