無法將分數動態顯示在我的蛇游戲中
[英]Can't display score onto my snake game dynamically
問題描述
大家好，我想在每次蛇把食物當作食物時在頁面上顯示用戶得分。 我有與類“得分”的股利，這個股利被存儲const score = document.querySelector('.score'); 作為全球。 然后在運行游戲的函數中，我//increase score points++; score.innerText = points; //increase score points++; score.innerText = points; 它位於測試蛇是否已經吃掉食物的條件下。 什么都沒顯示？
//declare global variables const canvas = document.querySelector('#canvas'); const score = document.querySelector('.score'); //set canvas context const ctx = canvas.getContext('2d'); //put canvas dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create points variable let points = 0; //create snake and set starting position let snake = [{ x : cvsW/2, y : cvsH/2 }] //create food object and set its position somewhere on board let food = { //Math.floor(Math.random()*cvsW + 1)---number from 1 to 784 //Math.floor(Math.random()*cvsW/unit + 1)---number from 1 to 79 //Math.floor(Math.random()*cvsW/unit + 1)*unit---number from 1 to 784(but it's a multiple of unit) //Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit---same as above but -1 keeps food inside canvas x : Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit-unit/2, y : Math.floor(Math.random()*(cvsH/unit - 1)+1)*unit-unit/2 } //create a variable to store the direction of the snake let direction; //add event to read users input then change direction document.addEventListener('keydown', (e) => { if(e.keyCode == 37 && direction != 'right') direction = 'left'; else if (e.keyCode == 38 && direction != 'down') direction = 'up'; else if (e.keyCode == 39 && direction != 'left') direction = 'right'; else if (e.keyCode == 40 && direction != 'up') direction = 'down'; }) function draw() { //clear canvas and redraw snake ctx.clearRect(0, 0, cvsW, cvsH); for(let i = 0; i < snake.length; i++) { ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[i].x-unit/2, snake[i].y-unit/2, unit, unit); } //draw food ctx.fillStyle = 'red'; ctx.fillRect(food.x-unit/2, food.y-unit/2, unit, unit); //grab heads position let headX = snake[0].x; let headY = snake[0].y; //move snake in chosen direction if(direction == 'left') headX -= unit; else if(direction == 'right') headX += unit; else if(direction == 'up') headY -= unit; else if(direction == 'down') headY += unit; //create new snake unit let newHead = {x : headX, y :headY} //check to see if snake has hit a wall or itself if(headX < 0 || headX > cvsW || headY < 0 || headY > cvsH || collision(headX, headY)) { clearInterval(runGame); } //check to see if snakes eaten food if(headX === food.x && headY === food.y) { //increase score points++; score.innerText = points; //get new food unit getFood(); //create 3 new units for(let i = 3; i > 0; i--) { //add those units -without this code snake will not grow snake.unshift(newHead); } } else { //remove tail -without this code snake will keep growing snake.pop(); } //add new head position -without this code snake will not move snake.unshift(newHead); } let runGame = setInterval(draw, 65); function collision(x, y) { for(let i = 1; i < snake.length; i++) { if(x == snake[i].x && y == snake[i].y) return true; } return false; } function getFood() { food = { x : Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit-unit/2, y : Math.floor(Math.random()*(cvsH/unit - 1)+1)*unit-unit/2 } //loop through snake to see if food generates inside snake for(let i = 0; i < snake.length; i++) { //if so call the function again if(food.x == snake[i].x && food.y == snake[i].y) return getFood(); } //else return new random point return food; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <link href="https://fonts.googleapis.com/css?family=Nova+Square" rel="stylesheet"> <style> body { background-color: #333; } #canvas { background-color: #4d4d4d; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .score { width: 80px; height: 80px; margin-left: auto; margin-right: auto; color: white; font-family: 'Nova Square'; font-size: 4rem; display: flex; justify-content: center; align-items: center; margin-top: 50px; } </style> </head> <body> <div class="score"></div> <canvas id="canvas" width="784" height="528"></canvas> <script src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
2 2019-01-21 06:42:06
實際上div在那並且顯示分數。 它只是隱藏在畫布后面。
在樣式中添加margin-top:-20px ，我認為它將再次可見。
您還可以更改畫布樣式的top屬性以將其向下拖動一個缺口
//declare global variables const canvas = document.querySelector('#canvas'); const score = document.querySelector('.score'); //set canvas context const ctx = canvas.getContext('2d'); //put canvas dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create points variable let points = 0; //create snake and set starting position let snake = [{ x : cvsW/2, y : cvsH/2 }] //create food object and set its position somewhere on board let food = { //Math.floor(Math.random()*cvsW + 1)---number from 1 to 784 //Math.floor(Math.random()*cvsW/unit + 1)---number from 1 to 79 //Math.floor(Math.random()*cvsW/unit + 1)*unit---number from 1 to 784(but it's a multiple of unit) //Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit---same as above but -1 keeps food inside canvas x : Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit-unit/2, y : Math.floor(Math.random()*(cvsH/unit - 1)+1)*unit-unit/2 } //create a variable to store the direction of the snake let direction; //add event to read users input then change direction document.addEventListener('keydown', (e) => { if(e.keyCode == 37 && direction != 'right') direction = 'left'; else if (e.keyCode == 38 && direction != 'down') direction = 'up'; else if (e.keyCode == 39 && direction != 'left') direction = 'right'; else if (e.keyCode == 40 && direction != 'up') direction = 'down'; }) function draw() { //clear canvas and redraw snake ctx.clearRect(0, 0, cvsW, cvsH); for(let i = 0; i < snake.length; i++) { ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[i].x-unit/2, snake[i].y-unit/2, unit, unit); } //draw food ctx.fillStyle = 'red'; ctx.fillRect(food.x-unit/2, food.y-unit/2, unit, unit); //grab heads position let headX = snake[0].x; let headY = snake[0].y; //move snake in chosen direction if(direction == 'left') headX -= unit; else if(direction == 'right') headX += unit; else if(direction == 'up') headY -= unit; else if(direction == 'down') headY += unit; //create new snake unit let newHead = {x : headX, y :headY} //check to see if snake has hit a wall or itself if(headX < 0 || headX > cvsW || headY < 0 || headY > cvsH || collision(headX, headY)) { clearInterval(runGame); } //check to see if snakes eaten food if(headX === food.x && headY === food.y) { //increase score points++; score.innerText = points; //get new food unit getFood(); //create 3 new units for(let i = 3; i > 0; i--) { //add those units -without this code snake will not grow snake.unshift(newHead); } } else { //remove tail -without this code snake will keep growing snake.pop(); } //add new head position -without this code snake will not move snake.unshift(newHead); } let runGame = setInterval(draw, 65); function collision(x, y) { for(let i = 1; i < snake.length; i++) { if(x == snake[i].x && y == snake[i].y) return true; } return false; } function getFood() { food = { x : Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit-unit/2, y : Math.floor(Math.random()*(cvsH/unit - 1)+1)*unit-unit/2 } //loop through snake to see if food generates inside snake for(let i = 0; i < snake.length; i++) { //if so call the function again if(food.x == snake[i].x && food.y == snake[i].y) return getFood(); } //else return new random point return food; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <link href="https://fonts.googleapis.com/css?family=Nova+Square" rel="stylesheet"> <style> body { background-color: #333; } #canvas { background-color: #4d4d4d; display: block; margin: auto; position: absolute; left: 0; top: 40; right: 0; bottom: 0; } .score { width: 80px; height: 80px; margin-left: auto; margin-right: auto; color: white; font-family: 'Nova Square'; font-size: 4rem; display: flex; justify-content: center; align-items: center; margin-top: 50px; } </style> </head> <body> <div class="score"></div><br><br><br> <br><br><br> <br><br><br> <canvas id="canvas" width="784" height="528"></canvas> <script src="script.js"></script> </body> </html>
解決方案2
0 2019-01-21 06:43:10
或者更好的是，可以在canvas上顯示它，ctx.fillText（“ Score：” + score，x-cord，y-cord）;
在蛇游戲中重置分數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.