Roman_Schenk
/
WBE_Praktikum_7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implemented game board

This commit is contained in:
schrom01 2022-11-10 12:20:18 +01:00
parent 9972bde1ef
commit fae457ec97
1 changed files with 80 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
code/connect4.html
View File

@ -20,7 +20,7 @@
border: 1px solid black; border: 1px solid black;
width: 12vw; width: 12vw;
height: 12vw; height: 12vw;
display: none; float: left;
} }
.board .field:first-child { .board .field:first-child {
@ -42,26 +42,90 @@
</style> </style>
<script>
const elt = function (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
}
const columns = 7
const rows = 6
let nextColor = "red"
let state = Array(rows).fill('').map(el => Array(columns).fill(''))
const showBoard = function() {
document.querySelector(".board").innerHTML = ''
for(row = 0; row < rows; row++) {
for(column = 0; column < columns; column++) {
let attributes = {"class": "field", "onclick": "setColumn(" + column + ")"}
let children = elt("div", {"class": state[row][column] + " piece"})
document.querySelector(".board").append(elt("div", attributes, children))
}
}
}
</script>
</head> </head>
<body> <body>
<div class="board"> <div class="board"></div>
<div class="field"><div class="blue piece"></div></div> <script>
<div class="field"></div> showBoard()
<div class="field"></div> </script>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"><div class="red piece"></div></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
</div>
</body> </body>
<script>
const switchNextColor = function() {
if(nextColor === "red") {
nextColor = "blue"
} else if(nextColor === "blue") {
nextColor = "red"
}
}
const setField = function(row, column) {
state[row][column] = nextColor
console.log(state)
switchNextColor()
showBoard()
}
const setColumn = function(column) {
let row = rows - 1
const column_number = column
while(row >= 0){
if(state[row][column_number] !== ''){
row--
} else {
console.log("setting", row, column)
setField(row, column_number)
break
}
}
}
// const interval = setInterval(function() {
// let color = ""
// let action = Math.floor(Math.random() * 3)
// if(action == 1) {
// color = "red"
// } else if(action == 2) {
// color = "blue"
// }
// setField(Math.floor(Math.random() * rows), Math.floor(Math.random() * columns), color)
// }, 1000);
</script>
</html> </html>