l202/snake_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>
<style>
body {
align-items: center;
height: 80vh;
background-color: #f3f3f3;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid black;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
border: 1px solid black;
background-color: #ffffff;
padding: 10px;
margin: 5px;
cursor: pointer;
}
span {
font-size: 15px;
}
</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');
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 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";
}
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">guess the number</button>
<button id="knop4" style="width: 300px; height: 100px">maze</button>
<button id="knop5" style="width: 300px; height: 100px; background-color: black; color: white;">snake</button>
<p></p>
<canvas id="gameCanvas" width="1300" height="500"></canvas>
<br>
<button id="startButton">Start</button>
<button id="resetButton">Reset</button>
<button id="resetButton1">Highscore Reset</button>
<button id="pauseButton">Pause</button>
<br>
<span id="scoreDisplay1">Score: 0</span>
<br>
<span id="scoreDisplay">HighScore: 0</span>
<br>
<span id="playerDisplay">HighScore Holder: ...</span>
<script>
var extra = 0
var waarde1 = 1
function pauseGame() {
console.log(waarde1)
if (waarde1 == 1){
console.log(waarde1)
gameRunning = false
waarde1 = 2
}
else if (waarde1 == 2){
console.log(waarde1)
if (gameRunning) {
return;
}
gameRunning = true
waarde1 = 1
const gameLoop = setInterval(() => {
moveSnake();
drawSnake();
drawFood();
if (!gameRunning) {
clearInterval(gameLoop);
}
}, 100);
}
}
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const tileSize = 20;
let snake = [{x: 10, y: 10}];
let food = {x: 0, y: 0};
let direction = "right";
let score = 0;
let gameRunning = false;
function drawSnake() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#009900";
snake.forEach(segment => {
ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
});
}
function moveSnake() {
let head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case "up":
head.y--;
break;
case "down":
head.y++;
break;
case "left":
head.x--;
break;
case "right":
head.x++;
break;
}
// Check for collision with wall
if (head.x < 0 || head.y < 0 || head.x >= canvas.width / tileSize || head.y >= canvas.height / tileSize) {
var OldHighScore = localStorage.oldhighscore
console.log(OldHighScore)
console.log(HighScore)
document.getElementById("pauseButton").disabled = true;
if (HighScore > OldHighScore) {
localStorage.winner1 = prompt("wat is je naam?", "")
winner = localStorage.winner1
document.getElementById("playerDisplay").textContent = `HighScore Holder: ${winner}`;
}
gameOver();
return;
document.getElementById("startButton").disabled = true;
document.getElementById("pauseButton").disabled = true;
extra = 1
}
// Check for collision with self
if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
var OldHighScore = localStorage.oldhighscore
console.log(OldHighScore)
if (HighScore > OldHighScore) {
localStorage.winner1 = prompt("wat is je naam?", "")
winner = localStorage.winner1
document.getElementById("playerDisplay").textContent = `HighScore Holder: ${winner}`;
}
gameOver();
return;
document.getElementById("startButton").disabled = true;
document.getElementById("pauseButton").disabled = true;
extra = 1
}
snake.unshift(head);
// Check for collision with food
if (head.x === food.x && head.y === food.y) {
generateFood();
score++;
document.getElementById("scoreDisplay1").textContent = `Score: ${score}`;
console.log( localStorage.highscore )
if (localStorage.highscore <= score) {
console.log( localStorage.highscore )
localStorage.highscore = score
console.log( localStorage.highscore )
HighScore = localStorage.highscore
console.log(HighScore)
document.getElementById("scoreDisplay").textContent = `HighScore: ${HighScore}`;
extra = 1
}
} else {
snake.pop();
}
}
function generateFood() {
food.x = Math.floor(Math.random() * (canvas.width / tileSize));
food.y = Math.floor(Math.random() * (canvas.height / tileSize));
}
function drawFood() {
ctx.fillStyle = "#FF0000";
ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
}
function handleInput(event) {
switch (event.keyCode) {
case 37:
if (direction !== "right") {
direction = "left";
}
break;
case 38:
if (direction !== "down") {
direction = "up";
}
break;
case 39:
if (direction !== "left") {
direction = "right";
}
break;
case 40:
if (direction !== "up") {
direction = "down";
}
break;
}
}
function gameOver() {
gameRunning = false;
}
winner = localStorage.winner1
HighScore = localStorage.highscore
console.log(HighScore)
document.getElementById("scoreDisplay").textContent = `HighScore: ${HighScore}`;
document.getElementById("playerDisplay").textContent = `HighScore Holder: ${winner}`;
document.getElementById("pauseButton").disabled = true;
document.addEventListener('keydown', function(event) {
if (event.key === 'p') {
pauseGame()
}
if (event.key === 's') {
startGame()
}
if (event.key === 'o') {
resetGame()
}
});
function startGame() {
document.getElementById("pauseButton").disabled = false;
localStorage.oldhighscore = localStorage.highscore
console.log(localStorage.oldhighscore)
var OldHighScore = localStorage.oldhighscore
console.log(OldHighScore)
if (gameRunning) {
return;
}
extra = 0
console.log(extra)
gameRunning = true
document.getElementById("startButton").disabled = true;
const gameLoop = setInterval(() => {
moveSnake();
drawSnake();
drawFood();
if (!gameRunning) {
clearInterval(gameLoop);
}
}, 100);
}
function HighscoreresetGame() {
var code = prompt("password: ", "");
if (code == 1206) {
localStorage.highscore = 0
HighScore = 0
localStorage.winner1 = "..."
winner = "..."
document.getElementById("playerDisplay").textContent = `HighScore Holder: ${winner}`;
document.getElementById("scoreDisplay").textContent = `HighScore: ${HighScore}`;
code = 0
} else {
alert("dat wachtwoord is incorrect")
}
}
function resetGame() {
console.log(extra)
if (extra == 0) {
var OldHighScore = localStorage.oldhighscore
console.log(OldHighScore)
if (HighScore > OldHighScore) {
localStorage.winner1 = prompt("wat is je naam?", "")
winner = localStorage.winner1
document.getElementById("playerDisplay").textContent = `HighScore Holder: ${winner}`;
}
}
document.getElementById("startButton").disabled = false;
snake = [{x: 10, y: 10}];
direction = "right";
score = 0;
document.getElementById("scoreDisplay1").textContent = `Score: ${score}`;
gameRunning = false;
drawSnake();
drawFood();
food = {x: food.x, y: food.y};
}
document.getElementById("startButton").disabled = false;
document.getElementById("scoreDisplay1").textContent = "Score: 0";
document.addEventListener("keydown", handleInput);
document.getElementById("startButton").addEventListener("click", startGame);
document.getElementById("resetButton").addEventListener("click", resetGame);
document.getElementById("resetButton1").addEventListener("click", HighscoreresetGame);
document.getElementById("pauseButton").addEventListener("click", pauseGame);
drawSnake();
generateFood();
drawFood();
document.getElementById("pauseButton").addEventListener("click", pauseGame);
</script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse