l202/guess_game.php
<!DOCTYPE html>
<html lang="en">
<?php
// SQLite database setup (create a file named "database.db" in the same directory)
$database = new SQLite3('database.db');
// Create a users table if it doesn't exist
$database->exec('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, Username TEXT UNIQUE, password TEXT)');
?>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wordle</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<style>
button {
border: 1px solid black;
background-color: #ffffff;
padding: 10px;
margin: 5px;
cursor: pointer;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333333;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"] {
padding: 8px;
border: 1px solid #cccccc;
border-radius: 4px;
width: 200px;
}
p {
font-weight: bold;
color: #333333;
font-size: 24px;
}
.result {
font-weight: bold;
color: #333333;
font-size: 18px;
}
#gameContainer {
display: flex;
flex-direction: column;
align-items: center;
}
#resetButton {
margin-top: 20px;
}
</style>
<script>
window.onload = main
function main(){
document.getElementById("knop1").onclick = knop1
document.getElementById("knop2_1").onclick = knop2_1
document.getElementById("knop3").onclick = knop3
document.getElementById("knop4").onclick = knop4
document.getElementById("knop5").onclick = knop5
var btn = document.getElementById('knop2_1');
var btn1 = document.getElementById('knop3');
var btn2 = document.getElementById('knop4');
var btn3 = document.getElementById('knop5');
var btn4 = document.getElementById('knop1');
var start = document.getElementById('start');
window.onresize = function(){
if (window.innerWidth <= 1240) {
btn.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn4.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn4.style.width = 100 + 'px';
window.addEventListener("resize", function(event) {
btn4.style.width = 100 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn1.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn1.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn1.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn2.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn2.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn2.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
if (window.innerWidth <= 1240) {
btn3.style.width = window.innerWidth - 100 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 100 + 'px';
}, false);
} else if (window.innerWidth >= 1240){
btn3.style.width = window.innerWidth - 1150 + 'px';
window.addEventListener("resize", function(event) {
btn3.style.width = window.innerWidth - 1150 + 'px';
}, false);
}
}
}
function main_page() {
alert("this is the main page")
}
function knop1() {
}
function knop2_1() {
window.location.href = "home_page.php";
}
function knop3() {
window.location.href = "guess_game.php";
}
function knop4() {
window.location.href = "maze_game.php";
}
function knop5() {
window.location.href = "snake_game.php";
}
function text() {
}
setTimeout(function () {
var knop = document.getElementById("knop1");
knop.style.backgroundImage = "url('kaas.jpg')";
knop.style.backgroundRepeat = "no-repeat";
}, 1);
</script>
</head>
<body id="body">
<button id="knop1" style="width: 100px; height: 100px">os & flix</button>
<button id="knop2_1" style="width: 300px; height: 100px">home page</button>
<button id="knop3" style="width: 300px; height: 100px; background-color: black; color: white;">guess the number</button>
<button id="knop4" style="width: 300px; height: 100px">maze</button>
<button id="knop5" style="width: 300px; height: 100px">snake</button>
<br>
<div id="gameContainer">
<h1>Remember the Number(s) between 0 and 100</h1>
<br>
<h3>press "r" to reset</h3>
<br>
<label for="getallen" id="oke">How many numbers?</label>
<input type="text" id="getallen" name="getallen" placeholder="Enter a number under 50">
<button id="startButton" style="background-color: #4caf50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 10px;">Start</button>
<p id="getal">Click to start guessing</p>
<div id="resultContainer"></div>
<button id="resetButton" style="display: none; background-color: #4caf50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 10px;">Reset</button>
</div>
<br>
<script>
var getal = [];
var antwoord = [];
var goed = 0;
var rngn = []
var ja = 0
var input = []
var tussen = 0
var total = 0
var oke = 0
var aantal = []
var nee = 0
var tussen2 = 0
var startButton = document.getElementById("startButton");
startButton.addEventListener("click", fnc0);
var resetButton = document.getElementById("resetButton");
resetButton.addEventListener("click", resetGame);
function resetGame() {
var inputtext = (document.getElementById("oke").innerHTML = "How many numbers?")
var resultContainer = document.getElementById("resultContainer");
resultContainer.innerHTML = "";
var inputElement = document.getElementById("getallen");
inputElement.value = "";
inputElement.style.display = "block";
startButton.style.display = "block";
resetButton.style.display = "none";
getal = [];
antwoord = [];
goed = 0;
rngn = []
ja = 0
input = []
tussen = 0
tussen2 = 0
total = 0
oke = 0
aantal = []
nee = 0
}
function fnc0() {
var take = document.getElementById("getallen").value;
if (isNaN(take)) {
alert("Oops, that's not a valid number.");
} else if ((take >= 50) && (tussen2 == 0)){
alert("dat is te groot")
} else {
if (tussen == 0) {
aantal = document.getElementById("getallen").value;
tussen++;
tussen2++;
}
ja++;
if (ja <= aantal) {
rngn[ja] = Math.floor(Math.random() * 100);
console.log(rngn[ja]);
var text = document.getElementById("getal");
text.innerHTML = rngn[ja];
} else if (ja >= aantal && ja <= aantal * 2) {
fnc1();
} else {
input[nee] = document.getElementById("getallen").value;
console.log(input[nee]);
console.log(rngn[nee]);
if (input[nee] == rngn[nee]) {
goed++;
console.log("oke");
}
var resultContainer = document.getElementById("resultContainer");
resultContainer.innerHTML = "You guessed " + goed + " out of " + aantal + " numbers correctly";
var inputElement = document.getElementById("getallen");
inputElement.style.display = "none";
startButton.style.display = "none";
resetButton.style.display = "block";
}
}
}
function fnc1() {
console.log(nee);
var inputtext = (document.getElementById("oke").innerHTML = "What is the " + (nee + 1) + "th number?");
console.log(inputtext);
document.getElementById("getal").innerHTML = "Click to guess again";
console.log(inputtext);
input[nee] = document.getElementById("getallen").value;
if (input[nee] == rngn[nee]) {
goed++;
console.log("oke");
}
nee++;
}
document.addEventListener("keydown", function(event) {
if (event.key === "r") {
resetGame()
}
});
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
fnc0()
}
});
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse