用js做一个小游戏—贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布

sinuo123_5

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量604

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端娱乐流

本文链接：https://blog.youkuaiyun.com/sinuo123_5/article/details/88543158

前端娱乐流专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个基于HTML和JavaScript的贪吃蛇游戏开发过程，包括地图创建、蛇的运动控制、食物生成及得分计算等功能实现。通过代码解析，读者可以了解到如何运用前端技术制作简单的互动游戏。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .map {
            width: 900px;
            height: 600px;
            background-color: black;
            position: relative;
            margin: 0 auto;
        }

        .snake {
            width: 30px;
            height: 30px;
            position: absolute;
            border: 1px solid deeppink;
            box-sizing: border-box;
        }
        .food{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: greenyellow;
        }
        .score{
            position: absolute;
            display: block;
            width: 500px;
            right: 10px;
            text-align: right;
            top: 10px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
<script>
    var Map;
    var Snake;
    var Food;
    var score=0;
    var speed=600;
    var game = (function () {
        /*1.创建地图*/

        function map() {
            this._map = null;
            this._span=null;
            this.createMap = function () {
                if (this._map == null) {
                    this._map = document.createElement("div");
                    this._map.className = "map";
                }
            }
            this.createSpan=function (){
                if (this._span == null) {
                    this._span = document.createElement("span");
                    this._span.className = "score";
                    this._span.innerHTML="总分：0";
                }
                this._map.appendChild(this._span);
            }
        }



        function snake() {
            this._map = null;
            this._span=null;
            this.direct = "right";            //蛇的默认元素  x，y,颜色
            this._snake = [[3, 1, "red", null], [2, 1, "yellow", null], [1, 1, "yellow", null]];
            this.createSnake = function () {
                for (var i = 0; i < this._snake.length; i++) {
                    if (this._snake[i][3] == null) {
                        this._snake[i][3] = document.createElement('div');
                        this._snake[i][3].style.backgroundColor = this._snake[i][2];
                        this._snake[i][3].className = "snake";
                    }
                    this._snake[i][3].style.left = this._snake[i][0] * 30 + "px";
                    this._snake[i][3].style.top = this._snake[i][1] * 30 + "px";
                    this._map.appendChild(this._snake[i][3]);
                }
            }
            this.snakeMove = function () {
                //蛇的属性传递 x,y
                var len = this._snake.length - 1;
                for (var i = len; i > 0; i--) {
                    this._snake[i][0] = this._snake[i - 1][0];
                    this._snake[i][1] = this._snake[i - 1][1];
                }
                switch (this.direct) {
                    case "right":
                        this._snake[0][0] += 1;
                        break;
                    case "left":
                        this._snake[0][0] -= 1;
                        break;
                    case "up":
                        this._snake[0][1] -= 1;
                        break;
                    case "down":
                        this._snake[0][1] += 1;
                        break;
                }

                //蛇吃食物
                if(this._snake[0][0]==Food.x&&this._snake[0][1]==Food.y)
                {
                    score+=100;
                    this._span.innerHTML="总分："+score+"分";
                    if(score==500)
                    {
                        speed-=200;
                    }
                    this._snake.push([
                            this._snake[this._snake.length-1][0],
                            this._snake[this._snake.length-1][1],
                            "yellow",
                            null
                    ]);
                    Food.createFood();
                }
                this.createSnake(this._map);
            }
        }

        function food(){
            this._food=null;
            this._map=null;
            this.x = 0;
            this.y = 0;
            this.createFood = function () {
                this.x = Math.floor(Math.random() * 30);
                this.y = Math.floor(Math.random() * 20);
                if (this._food == null) {
                    this._food = document.createElement("div");
                    this._food.className="food";
                }
                this._food.style.left=this.x*30+"px";
                this._food.style.top=this.y*30+"px";
                this._map.appendChild(this._food);
            }
        }


        function getMaps() {
            Map = new map();
            Map.createMap();
            Map.createSpan();
            //创建食物
            CreateFood(Map._map);
            //创建蛇 把map作为参数传进去  添加蛇
            CreateSnake(Map._map,Map._span);
            return Map._map;
        }
        function CreateFood(map){
            Food=new food();
            Food._map=map;
            Food.createFood();
        }
        function CreateSnake(map,span) {
            Snake = new snake();
            Snake._map = map;
            Snake._span=span;
            Snake.createSnake();
            //蛇移动
            setInterval(function () {
                Snake.snakeMove();
            }, speed);
            document.onkeypress = function (e) {
                switch (e.key) {
                    case "w":
                        if (Snake.direct == "down")
                            return;
                        Snake.direct = "up";
                        break;
                    case "a":
                        if (Snake.direct == "right")
                            return;
                        Snake.direct = "left";
                        break;
                    case "d":
                        if (Snake.direct == "left")
                            return;
                        Snake.direct = "right";
                        break;
                    case "s":
                        if (Snake.direct == "up")
                            return;
                        Snake.direct = "down";
                        break;
                }
            }
        }

        return {
            SnakeMap: getMaps()
        }
    })();
    /*最后创建的元素显示到body页面*/
    document.body.appendChild(game.SnakeMap);
</script>
</body>
</html>

这是老师带着大家做的一个小游戏贪吃蛇。

大致完成了，其中还有需要修复的bug，撞墙应该死亡并显示游戏终止