Html贪吃蛇 优化一（简易版） |
您所在的位置：网站首页 › 贪吃蛇网页版网址是多少 › Html贪吃蛇 优化一（简易版） |
Html贪吃蛇 优化一（简易版）
|
导言
这里根据上一篇【Html贪吃蛇游戏 手把手（简易版）】的代码修改少部分地方，后续有时间再更新。 修改一个蛇的样式，改变成图片，这里是用自己头像做演示。
关键去掉边框，和将背景图片修改成头像图片。 代码如下： /* 蛇的样式 */ .snake { width: 20px; height: 20px; /*border: 1px solid black;*/ /*background-image: url("微信图片_20231023145327.jpg"); !* 将图片的路径替换成实际的路径，这里使用的是七牛云的 *!*/ background-image: url("touxiang.png"); /*将图片的路径替换成实际的路径，这里使用的是七牛云的 */ background-size: cover; /*让图片填满整个方块 */ /* background-color: orangered;*/ position: absolute; top: 0; left: 0; /*border-radius: 50%; !*圆形*!*/ }1.：background-image属性设置蛇的背景图像，通过 url() 函数引用图片的路径。你可以将路径替换为实际的图片路径。如果需要使用圆形的蛇，可以取消第7行的注释并注释掉第9行，。 2.：设置背景图片的大小为cover，以使其填满整个方块。 游戏区域的背景图的修改这里是利用了一个400400的背景图，通过Html和JavaScript的代码结合，做出一个400400的图片，如果会其他技术，如ps等，可以尝试其他方法。 /* 游戏区域的样式 */ #game-board { width: 400px; height: 400px; /*border: 1px solid black;*/ position: relative; background-image: url("gezi.png"); background-size: cover; /*让图片填满整个方块 */ /*border-radius: 50%; !*圆形*!*/ }到这里代码就结束了，有更好的想法以及反馈欢迎交流学习。 运行效果
|
【本文地址】