Scoreboard
Hey, wisst ihr vielleicht wie ich mein Scoreboard zum laufen bringe?
Schaffe es nicht das der Wert Score auf der Seite ausgegeben wird.
Die function werd ich hier rein schreiben.
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;
//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>