<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
height:100vh;
width:100%;
padding:10px;
}
#loginbox{
width:100%;
display:flex;
flex-direction:column;
}
.line{
width:100%;
display:flex;
}
label{
width:200px;
padding:5px;
}
#canvas{
max-width:100%;
max-height: calc(100vh - 20px);
display:none;
}
#info{
display:none;
}
#loginbox small{
color:green;
font-size:14px;
}
</style>
</head>
<body>
<div id="loginbox">
<div class="line"> <label>Name</label><input type="text" id="name" placeholder="Name..."></div>
<div class="line">
<label>Passwort</label><input type="text" id="pass" placeholder="Passwort..."><button id="go">Login</button>
</div>
<h1 id="info1">Gebe dein Name und Passwort ein um das Spiel zu starten<br>
</h1> <small>Name:admin<br>Passwort:1234</small>
</div>
<canvas class="box-game" id="canvas" width="800" height="800"></canvas>
<h1 id="info">Drücke die Pfeiltasten um das Spiel zu beginnen!</h1>
<script>
var passwort='1234';
var login_name='admin';
let canvas = document.getElementById('canvas');
var inf=document.getElementById('info');
var helper=false;
let ctx = canvas.getContext('2d');
let rows = 20;
let cols = 20;
let snake = [
{x: 2, y: 3}
];
let cellWidth = canvas.width / cols;
let cellHeight = canvas.height / rows;
let direction = '';
let foodCollected = false;
var score = 0;
//https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
document.getElementById('go').addEventListener('click',function(){
let pa=document.getElementById('pass').value;
let na=document.getElementById('name').value;
if(login_name==na && passwort==pa){
canvas.style.display='block';
inf.style.display='block';
document.getElementById('loginbox').style.display='none';
setInterval(gameLoop, 135);
placeFood();
draw();
function draw(){
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
add(130, 170);
add(160, 170);
snake.forEach(part => add(part.x, part.y));
ctx.fillStyle = 'yellow';
add(food.x, food.y);
drawScore();
requestAnimationFrame(draw);
}
function placeFood(){
let randomX = Math.floor(Math.random() * cols);
let randomY = Math.floor(Math.random() * rows);
food = {
x: randomX,
y: randomY
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 8, 20);
if(foodCollected == true){
score = score +1;
}
}
function testGameOver(){
let firstPart = snake[0];
let otherParts = snake.slice(1);
let duplicatePart = otherParts.find(part => part.x == firstPart.x && part.y == firstPart.y);
if (snake[0].x < 0){
snake[0].x = 19;
}
if (snake[0].x > cols - 1){
snake[0].x = 0;
}
if (snake[0].y < 0){
snake[0].y = 19;
}
if (snake[0].y > cols - 1){
snake[0].y = 0;
}
if (duplicatePart){
placeFood();
snake = [{
x: 19,
y: 3
}]
direction = '';
}
}
function add(x, y){
ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth - 3, cellHeight - 3);
}
function shiftSnake(){
for (let i = snake.length - 1; i > 0; i--) {
const part = snake[i];
const lastpart = snake[i - 1];
part.x = lastpart.x;
part.y = lastpart.y;
}
}
function gameLoop(){
testGameOver();
if(foodCollected){
snake = [{x: snake[0].x, y: snake[0].y}, ...snake];
foodCollected = false;
}
drawScore();
if(foodCollected){
score = score + plus
}
shiftSnake();
if(direction == 'LEFT'){
snake[0].x--;
}
if(direction == 'RIGHT'){
snake[0].x++;
}
if(direction == 'UP'){
snake[0].y--;
}
if(direction == 'DOWN'){
snake[0].y++;
}
if(snake[0].x == food.x && snake[0].y == food.y){
foodCollected = true;
placeFood();
}
}
document.addEventListener('keydown',function(e){
if(helper==false){
helper=true;
inf.style.display='none';
}
if(e.keyCode == 37){
direction = 'LEFT';
}
if(e.keyCode == 38){
direction = 'UP';
}
if(e.keyCode == 39){
direction = 'RIGHT';
}
if(e.keyCode == 40){
direction = 'DOWN';
}
})
}else{
document.getElementById('info1').innerHTML='Passwort oder Name falsch';
}
})
</script>
</body>
</html>