原生JS实现贪吃蛇（基础版本）

最新推荐文章于 2021-04-27 16:04:19 发布

喜欢打代码的小垃圾

最新推荐文章于 2021-04-27 16:04:19 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45642033/article/details/109398230

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //地图对象
        //地图属性 --- width,height,bgcolor,position
        function Map(width, height, bgcolor, position) {
            this.width = width;
            this.height = height;
            this.bgcolor = bgcolor;
            this.position = position;
            this.el = document.createElement('div');
        }
        //地图方法 --- 初始化地图
        Map.prototype.init = function () {
            var div = this.el;
            div.style.width = this.width + 'px';
            div.style.height = this.height + 'px';
            div.style.backgroundColor = this.bgcolor;
            div.style.position = this.position;
            document.body.appendChild(div);
        }
        //食物对象
        //食物属性 --- width,height,bgcolor,position
        function Food(width, height, bgcolor, position) {
            this.width = width;
            this.height = height;
            this.bgcolor = bgcolor;
            this.position = position;
            this.el = document.createElement('div');
            this.randomDomX = 0
            this.randomDomY = 0;
        }
        //食物方法 --- 初始化食物，食物随机生成
        Food.prototype.init = function () {
            var food_box = this.el;

            food_box.style.width = this.width + 'px';
            food_box.style.height = this.height + 'px';
            food_box.style.backgroundColor = this.bgcolor;
            food_box.style.position = this.position;
            map.el.appendChild(food_box);

            //调用食物随机生成代码
            food.random_food();

        }

        Food.prototype.random_food = function () {
            var food_box = this.el;
            this.randomDomX = Math.floor(Math.random() * 39);
            this.randomDomY = Math.floor(Math.random() * 29);
            food_box.style.left = this.randomDomX * this.el.offsetWidth + 'px';
            food_box.style.top = this.randomDomY * this.el.offsetHeight + 'px';
        }

        //蛇对象
        //蛇的属性 --- 蛇头，蛇身，颜色，位置
        function Snack(width, height) {
            this.snackarr = [
                [3, 2, 'pink', 'absolute', null],
                [2, 2, 'green', 'absolute', null],
                [2, 1, 'green', 'absolute', null],
                [1, 1, 'green', 'absolute', null],
            ];
            this.width = width;
            this.height = height;
            this.direction = 'right';
        };

        //蛇的方法 --- 初始化蛇
        Snack.prototype.init = function () {
            var that = this;
            this.snackarr.forEach(function (item) {
                if (item[4] == null) {
                    item[4] = document.createElement('div');
                    item[4].style.width = that.width + 'px';
                    item[4].style.height = that.height + 'px';
                    item[4].style.backgroundColor = item[2];
                    item[4].style.position = item[3];
                    map.el.appendChild(item[4]);
                }

                item[4].style.left = that.width * item[0] + 'px';
                item[4].style.top = that.height * item[1] + 'px';

            })
            // console.log(this.el)
        }
        //       --- 蛇移动
        Snack.prototype.move = function () {
            for (var i = this.snackarr.length - 1; i > 0; i--) {
                this.snackarr[i][0] = this.snackarr[i - 1][0]
                this.snackarr[i][1] = this.snackarr[i - 1][1];
            }

            // 根据蛇运动方向改变蛇头坐标
            if (this.direction == "right") {
                this.snackarr[0][0]++;
            } else if (this.direction == "left") {
                this.snackarr[0][0]--;
            } else if (this.direction == "up") {
                this.snackarr[0][1]--;
            } else if (this.direction == "down") {
                this.snackarr[0][1]++;
            }

            //蛇初始化
            snack.init()
            //蛇吃东西,变长
            snack.eatfood();
            //蛇死掉
            snack.suicide();
        }
        //      --- 蛇吃东西
        Snack.prototype.eatfood = function () {
            if (snack.snackarr[0][0] == food.randomDomX && snack.snackarr[0][1] == food.randomDomY) {
                //再出现食物
                food.init()
                //蛇变长
                this.snackarr.push([-1, -1, "purple", "absolute", null]);
            }
        }

        //      ---- 蛇死掉
        Snack.prototype.suicide = function () {
            //碰到边界死掉了
            if (this.snackarr[0][0] < 0 || this.snackarr[0][0] > 39 || this.snackarr[0][1] < 0 || this.snackarr[0][
                    1] > 29) {
                alert('死掉了');
                clearInterval(timer)
            }
            //碰到自己死掉了
            for (var i = this.snackarr.length-1; i >=4; i--) {
                if (this.snackarr[0][0] == this.snackarr[i][0] && this.snackarr[0][1] == this.snackarr[i][1]) {
                    alert('死掉了');
                    clearInterval(timer)
                    console.log(111)
                }
            }
        }
        var map = new Map(800, 600, '#2B2B2B', 'relative')
        map.init();

        var food = new Food(20, 20, 'red', 'absolute');
        food.init();

        var snack = new Snack(20, 20);

        var timer = setInterval(function () {
            snack.move();
        }, 100)

		//键盘事件
        document.body.onkeydown = function (e) {
            switch (e.keyCode) {
                case 38:
                    if (snack.direction != 'down') {
                        snack.direction = 'up';
                    }
                    break;
                case 40:
                    if (snack.direction != 'up') {
                        snack.direction = 'down';
                    }
                    break;
                case 37:
                    if (snack.direction != 'right') {
                        snack.direction = 'left';
                    }
                    break;
                case 39:
                    if (snack.direction != 'left') {
                        snack.direction = 'right';
                    }
                    break;
            }

        }
    </script>
</body>

</html>

喜欢打代码的小垃圾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现贪吃蛇（基础版本）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&
复制链接

扫一扫