Javascript 对齐内容以适合背景图像

我对编码很陌生。我最近学习了一门课程，在这门课程中，我学会了使用vanilla JS构建Snake。我现在正在设计它的样式，我的想法是要有一个诺基亚3310手机的背景图像，并对齐游戏网格以适应手机屏幕。我不知道怎么做。正如您从代码中看到的，它看起来一团糟！如果有人能帮我做这件事或给我指出正确的方向，我将不胜感激：）

非常感谢

const grid=document.querySelector（“.grid”）
const startButton=document.getElementById（'start'）
const scoreDisplay=document.getElementById（'score'））
让正方形=[]
设currentSnake=[2,1,0]
设方向=1
常数宽度=10
设appleIndex=0
让分数=0
让间隔时间=1000
让速度=0.9
设timerId=0
函数createGrid（）{
//使用for循环创建100个这些元素
for（设i=0；isquares[index].classList.add（'snake'））
函数startName（）{
//把蛇移走
currentSnake.forEach（index=>squares[index].classList.remove（'snake'））
//把苹果摘下来
正方形[appleIndex].classList.remove（'apple'）
清除间隔（timerId）
currentSnake=[2,1,0]
分数=0
//将新分数重新添加到浏览器
scoresplay.textContent=分数
方向=1
间隔时间=1000
generateApple（）
//把蛇的种类读给我们的新蛇
currentSnake.forEach（index=>squares[index].classList.add（'snake'））
timerId=setInterval（移动，间隔时间）
}
函数move（）{
如果(
（currentSnake[0]+width>=width*width&&direction==width）| |//如果snake已经触底
（currentSnake[0]%width==width-1&&direction==1）| |//如果snake击中了右墙
（currentSnake[0]%宽度===0&&direction==-1）| |//如果snake撞到了左墙
（currentSnake[0]-宽度<0&&direction==-宽度）| |//如果snake已经到达顶部
正方形[currentSnake[0]+方向].classList.contains（'snake'））
)
返回清除间隔（timerId）
//从currentSnake数组中删除最后一个元素
const tail=currentSnake.pop（）
//从最后一个元素中删除样式
正方形[tail].classList.remove（'snake'）
//在我们前进的方向上加上正方形
currentSnake.unshift（currentSnake[0]+方向）
//添加样式以便我们可以看到它
//对付蛇头得到苹果
if（正方形[currentSnake[0]].classList.contains（'apple'））{
//删除苹果的类别
正方形[currentSnake[0]]。类列表。删除（'apple'））
//通过添加蛇类来生长我们的蛇
正方形[tail].classList.add（'snake'）
控制台日志（尾部）
//种植我们的蛇阵
推（尾）
console.log（currentSnake）
//创造新苹果
generateApple（）
//加一分
得分++
//显示我们的分数
scoresplay.textContent=分数
//加速我们的蛇
清除间隔（timerId）
console.log（间隔时间）
间隔时间=间隔时间*速度
console.log（间隔时间）
timerId=setInterval（移动，间隔时间）
}
正方形[currentSnake[0]]。类列表。添加（'snake'）
}
函数generateApple（）{
做{
appleIndex=Math.floor（Math.random（）*squares.length）
}while（squares[appleIndex].classList.contains（'snake'））
正方形[appleIndex].classList.add（'apple'）
} 
generateApple（）
//39是右箭头
//38代表向上箭头
//37代表左箭头
//40代表向下箭头
功能控制（e）{
如果（例如keyCode===39）{
console.log（'右键按下'）
方向=1
}否则如果（e.keyCode===38）{
console.log（'up pressed'）
方向=-宽度
}否则，如果（e.keyCode===37）{
console.log（'左按'）
方向=-1
}否则如果（e.keyCode===40）{
console.log（'down pressed'）
方向=+宽度
}
}
文档.添加的事件列表器（'keyup'，控件）
startButton.addEventListener（'click'，StartName）

html，正文{
保证金：10；
填充：10；
背景图像：url（'https://i.imgur.com/D60kU6I.png');
背景重复：无重复；
背景尺寸：自动；
}
.电网{
显示器：flex；
柔性包装：包装；
宽度：200px；
高度：200px；
边框：纯色2px黑色；
}
.广场{
宽度：20px；
高度：20px；
}
蛇先生{
背景色：rgb（72235,99）；
}
.苹果{
背景色：rgb（228,40,78）；
边界半径：50%；
高度：20px；
宽度：20px；
长方体阴影：0 rgba（0,0,0,1）；
变换：比例（1）；
动画：脉冲2s无限；
}
@关键帧脉冲{
0% {
变换：比例（0.95）；
长方体阴影：0 rgba（0,0,0,0.7）；
}
70% {
变换：比例（1）；
盒影：0 10px rgba（0,0,0,0）；
}
100% {
变换：比例（0.95）；
长方体阴影：0 rgba（0,0,0,0）；
}

蛇类游戏
启动/重新启动
分数

在样式表的

html内，body{}

放置以下属性：

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

---

此外，我建议您对CSS使用类，而不是对主体使用相同的html标记。

这就是您要寻找的吗？图像重叠的问题是因为您在

html

和

body

上调用背景图像，所以我将其限制为

body

。我还添加了正文规则的一些属性和

边距：0 auto

t