ZHAW-IT21b_WIN
/
WBE_Praktikum_7
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pushed last version

This commit is contained in:
schrom01 2022-11-24 11:25:27 +01:00
parent ef9451f59a
commit c4968cedda
1 changed files with 143 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
code/connect4.html Normal file
View File

@ -0,0 +1,143 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vier gewinnt</title>
<style>
div {
box-sizing: border-box;
}
.board {
width: 84vw;
margin: auto;
outline: 1px solid black;
}
.board .field {
border: 1px solid black;
width: 12vw;
height: 12vw;
float: left;
}
.board .field:first-child {
display: block;
}
.board .field .piece {
width: 10vw;
height: 10vw;
border-radius: 50%;
margin: 1vw;
}
.board .field .blue {
background-color: blue;
}
.board .field .red {
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<button class="boardclearbutton" style="margin: 10px;">Neues Spiel</button>
<p>Spieler <a id="actualPlayer"></a> ist am Zug.</p>
<div class="board"></div>
<script>
function elt(type, attrs, ...children) {
let node = document.createElement(type)
for (a in attrs) {
node.setAttribute(a, attrs[a])
}
for (let child of children) {
if (typeof child != "string") node.appendChild(child)
else node.appendChild(document.createTextNode(child))
}
return node
}
function showBoard() {
let board = document.querySelector(".board")
board.innerHTML = ''
for(row = 0; row < rows; row++) {
for(column = 0; column < columns; column++) {
let attributes = {"id": column.toString() + ":" + row.toString(), "class": "field"}
let children = elt("div", {"class": state[row][column] + " piece"})
board.append(elt("div", attributes, children))
}
}
}
function clearBoard() {
state = Array(rows).fill('').map(el => Array(columns).fill(''))
switchNextColor()
showBoard();
}
function switchNextColor() {
if(state.nextColor === "red") {
state.nextColor = "blue"
document.getElementById("actualPlayer").innerHTML = "blau"
} else {
state.nextColor = "red"
document.getElementById("actualPlayer").innerHTML = "rot"
}
}
function setField(row, column) {
state[row][column] = state.nextColor
switchNextColor()
showBoard()
}
function setColumn(column) {
let row = rows - 1
const column_number = column
while(row >= 0){
if(state[row][column_number] !== ''){
row--
} else {
setField(row, column_number)
break
}
}
}
const columns = 7
const rows = 6
let state = {}
clearBoard()
const boardClearButton = document.querySelector(".boardclearbutton")
boardClearButton.addEventListener("click", event => {
clearBoard()
})
showBoard()
document.querySelector(".board").addEventListener("click", event => {
let element = event.target
if(element.classList.contains("piece")){
element = element.parentElement
}
let column = Number(element.id.split(":")[0])
setColumn(column)
})
</script>
</body>
</html>