snake mit passwort feld

Gebe dein Name und Passwort ein um das Spiel zu starten Drücke dann die Pfeiltasten um das Spiel zu beginnen!

Der hier verwendete Code

<!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; 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!