JS实现简易版贪吃蛇小游戏（纯js代码）

最新推荐文章于 2025-07-13 12:03:59 发布

Leadyang

最新推荐文章于 2025-07-13 12:03:59 发布

阅读量1.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js代码练习文章标签： html js 贪吃蛇初学者

本文链接：https://blog.youkuaiyun.com/Leadyang/article/details/80639278

本文通过JavaScript代码实现了一个简易版的贪吃蛇小游戏。游戏包括地图绘制、食物生成和小蛇移动等功能。玩家可以通过键盘控制小蛇移动，当小蛇吃到食物时会增长，但如果撞到地图边界或自身，则游戏结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>新建网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <script type="text/javascript">
        //① 绘制地图
        function Map() {
            //私有成员(不会随便发生变化)
            var w = 800;
            var h = 400;

            //成员方法，绘制地图
            this.showmap = function () {
                //创建div、设置css样式、追加给body
                var tu = document.createElement('div');

                tu.style.width = w + "px";
                tu.style.height = h + "px";
                tu.style.backgroundImage = "url(./12.jpg)";

                document.body.appendChild(tu);
            }
        }

        //② 绘制食物
        function Food() {
            var len = 20;
            //把食物(权值)坐标声明为公开的，以便在外部访问
            this.xFood = 0;
            this.yFood = 0;
            this.piece = null; //页面上唯一的食物对象
            //绘制
            this.showfood = function () {
                //创建div、设置css样式、追加给body
                if (this.piece === null) {
                    this.piece = document.createElement('div');
                    this.piece.style.width = this