l202/site/snake_game.php


<!DOCTYPE html>
<html lang="en">
<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