Javascript CSS数据不随值变化（初学者）

嘿，所以现在我主要学习JS，但也学习HTML和CSS，所以我猜也是这样。我遵循了WebdevSimplified提供的关于如何制作蛇游戏（）的精彩教程。所以现在我想扩大我的知识面，开始为游戏添加功能。所以我想添加一个分数功能。唯一的问题是，当我将

文本对齐

或

字体大小

更改得比原来大时，没有任何更改，是否有任何外部锁定此数据的操作

Index.html：

<style>
    body {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      background-color: black;
    }

    #game-board {
      background-color: white;
      width: 100vmin;
      height: 100vmin;
      display: grid;
      grid-template-rows: repeat(21, 1fr);
      grid-template-columns: repeat(21, 1fr);
    }

    .snake {
      background-color: hsl(216, 100%, 50%);
      border: .25vmin solid black;
    }

    .food {
      background-color: hsl(0, 100%, 50%);
      border: .25vmin solid black;
    }

    #score {
      color: white;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 60;
      text-align: center;
      text-align: top;
    }

身体{
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
背景色：黑色；
}
#游戏板{
背景色：白色；
宽度：100vmin；
高度：100V分钟；
显示：网格；
网格模板行：重复（21，1fr）；
网格模板列：重复（21，1fr）；
}
蛇先生{
背景色：hsl（216，100%，50%）；
边框：25V纯黑色；
}
.食物{
背景色：hsl（0,100%，50%）；
边框：25V纯黑色；
}
#得分{
颜色：白色；
字体系列：“源Sans-Pro”，无衬线；
字号:60 ;；
文本对齐：居中；
文本对齐：顶部；
}

主JS文件：

import { update as updateSnake, draw as drawSnake, SNAKE_SPEED, getSnakeHead, snakeIntersection, scorefunc} from './snake.js'
import { update as updateFood, draw as drawFood } from './food.js'
import { outsideGrid } from './grid.js'

let lastRenderTime = 0
let gameOver = false
const gameBoard = document.getElementById('game-board')

function main(currentTime) {
  if (gameOver) {
    if (confirm('You lost. Press ok to restart.')) {
      window.location = '/'
    }
    return
  }


  window.requestAnimationFrame(main)
  const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
  if (secondsSinceLastRender < 1 / SNAKE_SPEED) return


  lastRenderTime = currentTime

  update()
  draw()
}

window.requestAnimationFrame(main)

function update() {
  updateSnake()
  updateFood()
  checkDeath()
  scorefunc()
}

function draw() {
  gameBoard.innerHTML = ''
  drawSnake(gameBoard)
  drawFood(gameBoard)
}

function checkDeath() {
  gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()
}

import{updateas updateSnake，draw as drawSnake，SNAKE_SPEED，getSnakeHead，snakeenteraction，scorefunc}来自'/SNAKE.js'
从“/food.js”导入{updateas updateFood，draw as drawFood}
从“./grid.js”导入{outsideGrid}
设lastRenderTime=0
让gameOver=false
const gameBoard=document.getElementById（'game-board'））
主功能（当前时间）{
如果（游戏结束）{
如果（确认（'您丢失了。请按“确定”重新启动）。）{
window.location='/'
}
返回
}
window.requestAnimationFrame（主）
const secondsSinceLastRender=（currentTime-lastRenderTime）/1000
如果（secondsSinceLastRender<1/蛇行速度）返回
lastRenderTime=currentTime
更新（）
画（）
}
window.requestAnimationFrame（主）
函数更新（）{
updateSnake（）
updateFood（）
支票死亡（）
scorefunc（）
}
函数绘图（）{
gameBoard.innerHTML=“”
drawSnake（游戏板）
drawFood（游戏板）
}
函数checkDeath（）{
gameOver=outsideGrid（getSnakeHead（））| | snakeIntersection（）
}

---

所有其他文件都将在我的GitHub上：

您忘记添加HTML了。您的javascript不需要显示。无论如何，通过你的链接，我可以找到哪里出了问题。您需要在字体大小中添加一个单位

你的密码。

正文{
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
背景色：黑色；
}
#得分{
颜色：白色；
字体系列：“源Sans-Pro”，无衬线；
字号:60 ;；
文本对齐：居中；
文本对齐：顶部；
}

123123