ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-24 14:40:26 +02:00
parent 8a51ee133a
commit 5e5bf95b84
23 changed files with 793 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag14/06_chess-move/index.html
+62 -4
View File
@@ -5,17 +5,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const boardInStartPosition = [
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
@@ -26,11 +40,11 @@
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
console.log(boardInStartPosition[7][6]); // => '♘'
console.log(boardInStartPosition[5][5]); // => '◻'
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = [
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
@@ -40,6 +54,50 @@
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
console.log(board2String(execMove(boardInStartPosition(), 'e2e4')));
outputEl.innerHTML = board2Html(execMove(boardInStartPosition(), 'e2e4'));
</script>
</body>
</html>
02_advanced/unterricht/tag14/07_chess-moves/index.html
+113
View File
@@ -0,0 +1,113 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const execMoves = (moves = []) => {
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
return moves.reduce((board, move) => {
return execMove(board, move);
}, boardInStartPosition());
// return moves.reduce(execMove, boardInStartPosition());
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
console.log(board2String(execMoves(['e2e4', 'e7e5', 'f2f4'])));
outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
</script>
</body>
</html>
02_advanced/unterricht/tag14/08_get-moves-history-ar/index.html
+29
View File
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>History Values in einem Array definieren</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>History Values in einem Array definieren</h1>
<p>Alle vergangenen Schachzüge in einer Array Position vorliegen</p>
</div>
</main>
<script>
'use strict';
const getMovesHistoryArray = (moves = []) => {
return moves.map((_, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
console.log(getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']));
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
</script>
</body>
</html>
02_advanced/unterricht/tag14/09_chess-final/index.html
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
.chess-board {
margin: 2rem 0;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const execMoves = (moves = []) => {
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
return moves.reduce((board, move) => {
return execMove(board, move);
}, boardInStartPosition());
// return moves.reduce(execMove, boardInStartPosition());
};
const getMovesHistoryArray = (moves = []) => {
return moves.map((_, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
// Mehrere Schachzüge visualisiert (jedes Board einzeln)
const allMoves = getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']);
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
let htmlBuffer = '';
allMoves.forEach((moves) => {
htmlBuffer += board2Html(execMoves(moves));
htmlBuffer += '<hr />';
console.log(board2String(execMoves(moves)));
console.log('===============');
});
outputEl.innerHTML = htmlBuffer;
// console.log(board2String(execMoves(['e2e4', 'e7e5', 'f2f4'])));
// outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
</script>
</body>
</html>