javascript贪吃蛇小游戏

最新推荐文章于 2024-04-24 09:22:16 发布

ReadyYes

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量471

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ReadyYes/article/details/51767728

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    function Map() {
        var h = 400;
        var w = 800;
        //绘制地图
        this.draw = function () {
            var div = document.createElement('div');
            div.style.width = w + 'px';
            div.style.height = h + 'px';
            div.style.backgroundColor = 'pink';
            div.style.backgroundImage = "url('./bg.jpg')";
            document.body.style.margin = 0;
            document.body.appendChild(div);

        }

    }


    function Food() {

        var len = 20;
        this.foodX;
        this.foodY;
        this.foodBody = null;//保存食物节点

        //绘制食物
        this.draw = function () {
            if (this.foodBody == null) {
                this.foodBody = document.createElement('div');
                this.foodBody.style.width = len + 'px';
                this.foodBody.style.height = len + 'px';
                this.foodBody.style.backgroundColor = 'green';
                this.foodBody.style.position = 'absolute';
                document.body.appendChild(this.foodBody);
            }

            this.foodX = Math.floor(Math.random() * 40);
            this.foodY = Math.floor(Math.random() * 20);
            this.foodBody.style.left = this.foodX * len + 'px';
            this.foodBody.style.top = this.foodY * len + 'px';

        }

    }


    function Snake() {
        var side = 20;
        //蛇有4个节点，每个节点包含的信息为 [x坐标权值，y坐标权值,节点颜色，节点元素对象]
        this.snakeBody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
        //蛇头移动的方向
        this.direction = 'right';
        //绘制蛇
        this.draw = function () {
            for (var i = 0; i < this.snakeBody.length; i++) {
                if (this.snakeBody[i][3] == null) {
                    this.snakeBody[i][3] = document.createElement('div');
                    this.snakeBody[i][3].style.width = side + 'px';
                    this.snakeBody[i][3].style.height = side + 'px';
                    this.snakeBody[i][3].style.backgroundColor = this.snakeBody[i][2];
                    this.snakeBody[i][3].style.position = 'absolute';
                    document.body.appendChild(this.snakeBody[i][3]);
                }
                this.snakeBody[i][3].style.left = this.snakeBody[i][0] * side + 'px';
                this.snakeBody[i][3].style.top = this.snakeBody[i][1] * side + 'px';

            }
        }

        //移动蛇
        this.move = function () {
            //蛇尾开始每个节点的坐标移动后是上一个节点的坐标
            for (var i = 0; i < this.snakeBody.length - 1; i++) {
                this.snakeBody[i][0] = this.snakeBody[i + 1][0];
                this.snakeBody[i][1] = this.snakeBody[i + 1][1];
            }

            //蛇头节点做特殊处理
            if (this.direction == 'right') {
                this.snakeBody[this.snakeBody.length - 1][0] += 1;
            } else if (this.direction == 'left') {
                this.snakeBody[this.snakeBody.length - 1][0] -= 1;
            } else if (this.direction == 'up') {
                this.snakeBody[this.snakeBody.length - 1][1] -= 1;
            } else {
                this.snakeBody[this.snakeBody.length - 1][1] += 1;
            }


            //蛇头的坐标
            var snakeX = this.snakeBody[this.snakeBody.length - 1][0];
            var snakeY = this.snakeBody[this.snakeBody.length - 1][1];
            //吃食物--蛇头的坐标和食物的坐标一致，吃掉食物的同时，蛇增加一个节点到尾部，增加节点的坐标为原来蛇尾节点的坐标
            if (snakeX == food.foodX && snakeY == food.foodY) {
                var tailX = this.snakeBody[0][0];
                var tailY = this.snakeBody[0][1];
                var newNode = [tailX, tailY, 'green', null];
                this.snakeBody.unshift(newNode);//吃掉食物后增加蛇的节点
                food.draw();//重新随机绘制食物的坐标
            }

            //游戏结束判断

            //1 碰撞边界

            if (snakeX > 39 || snakeX < 0 || snakeY < 0 || snakeY > 19) {
                clearInterval(timer);
                alert('game over!');
                return;
            }

            //2.蛇头咬到蛇身
            for (var i = 0; i < this.snakeBody.length - 1; i++) {
                if (snakeX == this.snakeBody[i][0] && snakeY == this.snakeBody[i][1]) {
                    clearInterval(timer);
                    alert('game over by eat yourself!');
//                    return;
                }
            }

            this.draw();
        }

    }

    window.onload = function () {
        var map = new Map();
        map.draw();


        food = new Food();
        food.draw();

        var snake = new Snake();
        snake.draw();

        timer = setInterval(function () {
            snake.move();
        }, 200);

        //根据键盘事件切换蛇头的方向
        document.onkeydown = function (event) {

            console.log(event.keyCode);

            if (event.keyCode == 39) {
                //right
                if(snake.direction!='left')//当前蛇头往左边移动的时候，不能切换为向右移动
                snake.direction = 'right';
            }
            if (event.keyCode == 37) {
                //left
                if(snake.direction!='right')
                snake.direction = 'left';
            }
            if (event.keyCode == 38) {
                //up
                if(snake.direction!='down')
                snake.direction = 'up';
            }
            if (event.keyCode == 40) {
                //down
                if(snake.direction!='up')
                snake.direction = 'down';
            }
        }

    }


</script>
</body>
</html>

ReadyYes

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript贪吃蛇小游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> function Map() { var h = 400; var w = 800; //绘制地图
复制链接

扫一扫