對齊內容以適合背景圖像

Question

我對編碼很陌生。 我最近參加了一門課程，在課程中我學會了使用 vanilla JS 構建 Snake。 我現在正在設計它，我的想法是制作諾基亞 3310 手機的背景圖像，並對齊游戲網格以適合手機屏幕。 我不知道該怎么做。 正如您從代碼中看到的那樣，它看起來很亂：如果有人可以幫助我或指出正確的方向，我將不勝感激：)

提前謝謝了！

 const grid = document.querySelector('.grid') const startButton = document.getElementById('start') const scoreDisplay = document.getElementById('score') let squares = [] let currentSnake = [2,1,0] let direction = 1 const width = 10 let appleIndex = 0 let score = 0 let intervalTime = 1000 let speed = 0.9 let timerId = 0 function createGrid() { //create 100 of these elements with a for loop for (let i=0; i < width*width; i++) { //create element const square = document.createElement('div') //add styling to the element square.classList.add('square') //put the element into our grid grid.appendChild(square) //push it into a new squares array squares.push(square) } } createGrid() currentSnake.forEach(index => squares[index].classList.add('snake')) function startGame() { //remove the snake currentSnake.forEach(index => squares[index].classList.remove('snake')) //remove the apple squares[appleIndex].classList.remove('apple') clearInterval(timerId) currentSnake = [2,1,0] score = 0 //re add new score to browser scoreDisplay.textContent = score direction = 1 intervalTime = 1000 generateApple() //readd the class of snake to our new currentSnake currentSnake.forEach(index => squares[index].classList.add('snake')) timerId = setInterval(move, intervalTime) } function move() { if ( (currentSnake[0] + width >= width*width && direction === width) || //if snake has hit bottom (currentSnake[0] % width === width-1 && direction === 1) || //if snake has hit right wall (currentSnake[0] % width === 0 && direction === -1) || //if snake has hit left wall (currentSnake[0] - width < 0 && direction === -width) || //if snake has hit top squares[currentSnake[0] + direction].classList.contains('snake') ) return clearInterval(timerId) //remove last element from our currentSnake array const tail = currentSnake.pop() //remove styling from last element squares[tail].classList.remove('snake') //add square in direction we are heading currentSnake.unshift(currentSnake[0] + direction) //add styling so we can see it //deal with snake head gets apple if (squares[currentSnake[0]].classList.contains('apple')) { //remove the class of apple squares[currentSnake[0]].classList.remove('apple') //grow our snake by adding class of snake to it squares[tail].classList.add('snake') console.log(tail) //grow our snake array currentSnake.push(tail) console.log(currentSnake) //generate new apple generateApple() //add one to the score score++ //display our score scoreDisplay.textContent = score //speed up our snake clearInterval(timerId) console.log(intervalTime) intervalTime = intervalTime * speed console.log(intervalTime) timerId = setInterval(move, intervalTime) } squares[currentSnake[0]].classList.add('snake') } function generateApple() { do { appleIndex = Math.floor(Math.random() * squares.length) } while (squares[appleIndex].classList.contains('snake')) squares[appleIndex].classList.add('apple') } generateApple() // 39 is right arrow // 38 is for the up arrow // 37 is for the left arrow // 40 is for the down arrow function control(e) { if (e.keyCode === 39) { console.log('right pressed') direction = 1 } else if (e.keyCode === 38) { console.log('up pressed') direction = -width } else if (e.keyCode === 37) { console.log('left pressed') direction = -1 } else if (e.keyCode === 40) { console.log('down pressed') direction = +width } } document.addEventListener('keyup', control) startButton.addEventListener('click', startGame)

 html, body { margin: 10; padding: 10; background-image: url('https://i.imgur.com/D60kU6I.png'); background-repeat: no-repeat; background-size: auto; }.grid { display: flex; flex-wrap: wrap; width: 200px; height: 200px; border: solid 2px black; }.square { width: 20px; height: 20px; }.snake { background-color: rgb(72, 235, 99); }.apple { background-color: rgb(228, 40, 78); border-radius: 50%; height: 20px; width: 20px; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Snake Game</h1> <button id="start">Start/Restart</button> <h2>Score <span id="score"></span></h2> <div class="grid"></div> <script src="snake.js"></script> </body> </html>

Answer 1

檢查這個：

 const grid = document.querySelector(".grid"); const startButton = document.getElementById("start"); const scoreDisplay = document.getElementById("score"); let squares = []; let currentSnake = [2, 1, 0]; let direction = 1; const width = 10; let appleIndex = 0; let score = 0; let intervalTime = 1000; let speed = 0.9; let timerId = 0; function createGrid() { //create 100 of these elements with a for loop for (let i = 0; i < width * width; i++) { //create element const square = document.createElement("div"); //add styling to the element square.classList.add("square"); //put the element into our grid grid.appendChild(square); //push it into a new squares array squares.push(square); } } createGrid(); currentSnake.forEach(index => squares[index].classList.add("snake")); function startGame() { //remove the snake currentSnake.forEach(index => squares[index].classList.remove("snake")); //remove the apple squares[appleIndex].classList.remove("apple"); clearInterval(timerId); currentSnake = [2, 1, 0]; score = 0; //re add new score to browser scoreDisplay.textContent = score; direction = 1; intervalTime = 1000; generateApple(); //readd the class of snake to our new currentSnake currentSnake.forEach(index => squares[index].classList.add("snake")); timerId = setInterval(move, intervalTime); } function move() { if ( (currentSnake[0] + width >= width * width && direction === width) || //if snake has hit bottom (currentSnake[0] % width === width - 1 && direction === 1) || //if snake has hit right wall (currentSnake[0] % width === 0 && direction === -1) || //if snake has hit left wall (currentSnake[0] - width < 0 && direction === -width) || //if snake has hit top squares[currentSnake[0] + direction].classList.contains("snake") ) return clearInterval(timerId); //remove last element from our currentSnake array const tail = currentSnake.pop(); //remove styling from last element squares[tail].classList.remove("snake"); //add square in direction we are heading currentSnake.unshift(currentSnake[0] + direction); //add styling so we can see it //deal with snake head gets apple if (squares[currentSnake[0]].classList.contains("apple")) { //remove the class of apple squares[currentSnake[0]].classList.remove("apple"); //grow our snake by adding class of snake to it squares[tail].classList.add("snake"); console.log(tail); //grow our snake array currentSnake.push(tail); console.log(currentSnake); //generate new apple generateApple(); //add one to the score score++; //display our score scoreDisplay.textContent = score; //speed up our snake clearInterval(timerId); console.log(intervalTime); intervalTime = intervalTime * speed; console.log(intervalTime); timerId = setInterval(move, intervalTime); } squares[currentSnake[0]].classList.add("snake"); } function generateApple() { do { appleIndex = Math.floor(Math.random() * squares.length); } while (squares[appleIndex].classList.contains("snake")); squares[appleIndex].classList.add("apple"); } generateApple(); // 39 is right arrow // 38 is for the up arrow // 37 is for the left arrow // 40 is for the down arrow function control(e) { if (e.keyCode === 39) { console.log("right pressed"); direction = 1; } else if (e.keyCode === 38) { console.log("up pressed"); direction = -width; } else if (e.keyCode === 37) { console.log("left pressed"); direction = -1; } else if (e.keyCode === 40) { console.log("down pressed"); direction = +width; } } document.addEventListener("keyup", control); startButton.addEventListener("click", startGame);

 .mobile { display: flex; justify-content: center; }.nokia { position: absolute; top: 190px; z-index: 999; display: block; width: 555px; height: 383px; background-image: url("https://i.postimg.cc/kgfWbbqB/nokia3310.jpg"); background-repeat: no-repeat; background-size: 100% 100%; }.grid { position: absolute; top: 290px; z-index: 9999; display: flex; flex-wrap: wrap; width: 200px; height: 200px; border: 2px solid rgba(0, 0, 0, 0.5); }.info { position: absolute; z-index: 9999; top: 0; text-align: center; }.square { width: 20px; height: 20px; }.snake { background-color: rgba(0, 0, 0, 0.6) }.apple { background-color: rgb(228, 40, 78); border-radius: 50%; height: 20px; width: 20px; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }

 <!DOCTYPE html> <div class='mobile'> <div class="info"> <h1>Snake Game</h1> <button id="start">Start/Restart</button> <h2>Score <span id="score"></span></h2> </div> <div class="grid"></div> <div class="nokia"></div> </div>

Answer 2

在樣式表中，在html, body {}放置了以下屬性：

   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;

此外，我建議您使用 CSS 的類，而不是使用相同的 html 標記作為正文。

Answer 3

這是你要找的嗎？ 圖像重疊的問題是因為您在html和body上都調用了背景圖像，所以我將其限制為body 。 我還為您的正文規則添加了一些屬性，並為您的網格規則添加了一個margin: 0 auto 。 這似乎在 1024px 媒體查詢中運行良好，但看起來您必須根據您所在的媒體查詢調整background-position 。

 const grid = document.querySelector('.grid') const startButton = document.getElementById('start') const scoreDisplay = document.getElementById('score') let squares = [] let currentSnake = [2,1,0] let direction = 1 const width = 10 let appleIndex = 0 let score = 0 let intervalTime = 1000 let speed = 0.9 let timerId = 0 function createGrid() { //create 100 of these elements with a for loop for (let i=0; i < width*width; i++) { //create element const square = document.createElement('div') //add styling to the element square.classList.add('square') //put the element into our grid grid.appendChild(square) //push it into a new squares array squares.push(square) } } createGrid() currentSnake.forEach(index => squares[index].classList.add('snake')) function startGame() { //remove the snake currentSnake.forEach(index => squares[index].classList.remove('snake')) //remove the apple squares[appleIndex].classList.remove('apple') clearInterval(timerId) currentSnake = [2,1,0] score = 0 //re add new score to browser scoreDisplay.textContent = score direction = 1 intervalTime = 1000 generateApple() //readd the class of snake to our new currentSnake currentSnake.forEach(index => squares[index].classList.add('snake')) timerId = setInterval(move, intervalTime) } function move() { if ( (currentSnake[0] + width >= width*width && direction === width) || //if snake has hit bottom (currentSnake[0] % width === width-1 && direction === 1) || //if snake has hit right wall (currentSnake[0] % width === 0 && direction === -1) || //if snake has hit left wall (currentSnake[0] - width < 0 && direction === -width) || //if snake has hit top squares[currentSnake[0] + direction].classList.contains('snake') ) return clearInterval(timerId) //remove last element from our currentSnake array const tail = currentSnake.pop() //remove styling from last element squares[tail].classList.remove('snake') //add square in direction we are heading currentSnake.unshift(currentSnake[0] + direction) //add styling so we can see it //deal with snake head gets apple if (squares[currentSnake[0]].classList.contains('apple')) { //remove the class of apple squares[currentSnake[0]].classList.remove('apple') //grow our snake by adding class of snake to it squares[tail].classList.add('snake') console.log(tail) //grow our snake array currentSnake.push(tail) console.log(currentSnake) //generate new apple generateApple() //add one to the score score++ //display our score scoreDisplay.textContent = score //speed up our snake clearInterval(timerId) console.log(intervalTime) intervalTime = intervalTime * speed console.log(intervalTime) timerId = setInterval(move, intervalTime) } squares[currentSnake[0]].classList.add('snake') } function generateApple() { do { appleIndex = Math.floor(Math.random() * squares.length) } while (squares[appleIndex].classList.contains('snake')) squares[appleIndex].classList.add('apple') } generateApple() // 39 is right arrow // 38 is for the up arrow // 37 is for the left arrow // 40 is for the down arrow function control(e) { if (e.keyCode === 39) { console.log('right pressed') direction = 1 } else if (e.keyCode === 38) { console.log('up pressed') direction = -width } else if (e.keyCode === 37) { console.log('left pressed') direction = -1 } else if (e.keyCode === 40) { console.log('down pressed') direction = +width } } document.addEventListener('keyup', control) startButton.addEventListener('click', startGame)

 body { text-align: center; background-image: url('https://i.imgur.com/D60kU6I.png'); background-repeat: no-repeat; background-size: cover; background-position: center 20%; }.grid { margin: 0 auto; display: flex; flex-wrap: wrap; width: 200px; height: 200px; border: solid 2px black; }.square { width: 20px; height: 20px; }.snake { background-color: rgb(72, 235, 99); }.apple { background-color: rgb(228, 40, 78); border-radius: 50%; height: 20px; width: 20px; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }

 <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Snake Game</h1> <button id="start">Start/Restart</button> <h2>Score <span id="score"></span></h2> <div class="grid"></div> <script src="snake.js"></script> </body>