贪吃蛇【源代码】

小管打天下

于 2021-06-19 22:23:49 发布

阅读量145

点赞数

分类专栏：代码专栏

本文链接：https://blog.csdn.net/qq_42647547/article/details/118060099

版权

代码专栏专栏收录该内容

13 篇文章 1 订阅

订阅专栏

这个博客展示了如何使用HTML、CSS和JavaScript实现一个简单的贪吃蛇游戏。通过创建一个Snake类，定义了蛇的移动、转向、初始化等功能。游戏在加载时启动，玩家可以通过键盘控制蛇的方向。游戏界面是一个500px x 500px的黑色背景，蛇的身体由绿色圆点组成，头部为红色。博客内容涵盖了事件监听、DOM操作和定时器等JavaScript基础概念。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .wrap {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 50px auto;
            background-color: #000;
            overflow: hidden;
        }

        .round {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
        }

        .round.head {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="wrap"></div>
    <script src="js/utils.js"></script>
    <script>
        window.onload = function () {
            init();
        }

        function init() {
            initGame();
        }

        var initGame = (function () {
            var wrap = document.getElementsByClassName('wrap')[0],
                t = null;
            var Snake = function () {
                this.bodyArr = [
                    { x: 0, y: 0 },
                    { x: 0, y: 20 },
                    { x: 0, y: 40 },
                    { x: 0, y: 60 },
                    { x: 0, y: 80 },
                    { x: 0, y: 100 },
                ];

                this.dir = 'DOWN';
            }

            Snake.prototype = {
                init: function () {
                    this.bindEvent();
                    this.initSnake();
                    this.run();
                },
                bindEvent: function () {
                    var _self = this;
                    addEvent(document, 'keydown', function () {
                        _self.changeDir();
                    })
                },

                initSnake: function () {
                    var arr = this.bodyArr,
                        len = arr.length,
                        frag = document.createDocumentFragment(), // 文档碎片
                        item;

                    for (var i = 0; i < len; i++) {
                        item = arr[i];

                        var round = document.createElement('i');
                        round.className = i === len - 1 ? 'round head' : 'round';
                        round.style.left = item.x + 'px';
                        round.style.top = item.y + 'px';
                        frag.appendChild(round);
                    }
                    wrap.appendChild(frag);
                },

                run: function () {
                    var _self = this;
                    t = setInterval(function () {
                        _self.move();
                    }, 300)
                },

                move: function () {
                    var arr = this.bodyArr,
                        len = arr.length,
                        head = arr[len - 1];

                    for (var i = 0; i < len; i++) {
                        if (i === len - 1) {
                            switch (this.dir) {
                                case 'LEFT':
                                    head.x -= 20;
                                    break;
                                case 'RIGHT':
                                    head.x += 20;
                                    break;
                                case 'UP':
                                    head.y -= 20;
                                    break;
                                case 'DOWN':
                                    head.y += 20;
                                    break;
                                default:
                                    break;
                            }
                        } else {
                            arr[i].x = arr[i + 1].x;
                            arr[i].y = arr[i + 1].y;
                        }
                    }

                    this.removeSnake();
                    this.initSnake();
                },

                removeSnake: function () {
                    var bodys = document.getElementsByClassName('round');

                    while (bodys.length > 0) {
                        bodys[0].remove();
                    }
                },

                changeDir: function (e) {
                    var e = e || window.event,
                        code = e.keyCode;

                    this.setDir(code);
                },

                setDir: function (code) {
                    switch (code) {
                        case 37: //左
                            if (this.dir !== 'RIGHT' && this.dir !== 'LEFT') {
                                this.dir = 'LEFT';
                            }
                            break;
                        case 39: //右
                            if (this.dir !== 'RIGHT' && this.dir !== 'LEFT') {
                                this.dir = 'RIGHT';
                            }
                            break;
                        case 38: //上
                            if (this.dir !== 'UP' && this.dir !== 'DOWN') {
                                this.dir = 'UP';
                            }
                            break;
                        case 40: //下
                            if (this.dir !== 'UP' && this.dir !== 'DOWN') {
                                this.dir = 'DOWN';
                            }
                            break;
                        default:
                            break;
                    }
                }
            }

            return new Snake().init();
        })
    </script>
</body>

</html>