JavaScript实现贪吃蛇

~是小王吖~

已于 2022-09-26 17:15:28 修改

阅读量1.3k

点赞数

分类专栏： javascript idea Java 文章标签： javascript 前端 html

于 2022-09-26 17:12:15 首次发布

本文链接：https://blog.csdn.net/sunblogy/article/details/127057024

版权

Java 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

idea

35 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

用js实现一个贪吃蛇游戏，
要求：

不能撞墙
不能撞自己
每吃一个食物就会加一分
相撞后就结束游戏
部分结果如下：

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

<script>
    let snake = [];
    let direct = "left";
    var interval;//定时器
    var scroe = 0;//得分
    window.onload = function () {
        // 先创建一个游戏区域
        gameArea = createDiv(800, 800, 0, 0, "relative", "#e3e3e3", true, false);
        document.body.appendChild(gameArea);
        //创建蛇
        for (let i = 0; i < 3; i++) {
            var body = createDiv(20, 20, i * 20 + 200, 200, "absolute", "red", false, true);
            gameArea.appendChild(body);
            snake.push(body);
        }
        // 创建食物
        let x = parseInt(Math.random() * 40) * 20;
        let y = parseInt(Math.random() * 40) * 20;
        food = createDiv(20, 20, x, y, "absolute", "green", false, true);
        gameArea.appendChild(food);
        interval = setInterval(move, 300);

        //添加事件改变方向
        document.onkeyup = function () {
            let which = event.keyCode || event.which;
            if (which == 37) {
                if (direct != "right")
                    direct = "left"
            } else if (which == 39) {
                if (direct != "left")
                    direct = "right"
            } else if (which == 38) {
                if (direct != "bottom")
                    direct = "top"
            } else if (which == 40) {
                if (direct != "top")
                    direct = "bottom"
            }
        }
    }


    function move() {
        //创建积分块
        //注意：积分块要在定时器里面去添加，不然就只会被加载一次
        scroeDiv = createDiv(200, 22, 0, 0, "absolute", "pink", false, false);
        gameArea.appendChild(scroeDiv);
        scroeDiv.innerText = "得分：" + scroe;
       // console.log(scroe)
        //蛇的身体移动
        for (let i = snake.length - 1; i > 0; i--) {
            snake[i].style.left = snake[i - 1].style.left;
            snake[i].style.top = snake[i - 1].style.top;
        }
        //移动蛇头
        let x = parseInt(snake[0].style.left);
        let y = parseInt(snake[0].style.top);
        if (direct == "left") {
            snake[0].style.left = (x - 20) + "px";
        } else if (direct == "right") {
            snake[0].style.left = (x + 20) + "px";
        } else if (direct == "top") {
            snake[0].style.top = (y - 20) + "px";
        } else if (direct == "bottom") {
            snake[0].style.top = (y + 20) + "px";
        }
        //判断是否吃到了食物
        x = parseInt(snake[0].style.left);
        y = parseInt(snake[0].style.top);
        foodX = parseInt(food.style.left);
        foodY = parseInt(food.style.top);
        if (x == foodX && y == foodY) {//吃到了食物
            //蛇的身体+1
            var body = createDiv(20, 20, 200, 200, "absolute", "red", false, true);
            body.style.left = snake[snake.length - 1].style.left;
            body.style.top = snake[snake.length - 1].style.top;
            gameArea.appendChild(body);
            snake.push(body);
            //得一分
            scroe++;
            foodX = parseInt(Math.random() * 40) * 20;
            foodY = parseInt(Math.random() * 40) * 20;
            food.style.left = foodX + "px";
            food.style.top = foodY + "px";

        }
        //当蛇头碰到边界，就结束游戏
        if (parseInt(snake[0].style.left) <= -20 || parseInt(snake[0].style.left) >= 800
            || parseInt(snake[0].style.top) <= -20 || parseInt(snake[0].style.top) >= 800) {
            alert("game over! 得分："+scroe)
            clearInterval(interval)
        }
        //不能碰到自己
        //遍历一下自己的每一节身体，去判断与头有没有重合的
        for (let i = 1; i < snake.length; i++) {
            if (parseInt(snake[0].style.left) == parseInt(snake[i].style.left) && parseInt(snake[0].style.top) == parseInt(snake[i].style.top)) {
                alert("game over! 得分："+scroe)
                clearInterval(interval)
            }
        }
        //计分

    }

    function createDiv(width, height, x, y, position, bgColor, isCenter, isCircle) {
        var div = document.createElement("div");
        div.style.width = width + "px";
        div.style.height = height + "px";
        div.style.left = x + "px";
        div.style.top = y + "px";
        div.style.backgroundColor = bgColor;
        if (isCenter)
            div.style.margin = "0 auto";
        if (position)
            div.style.position = position;
        if (isCircle)
            div.style.borderRadius = "50%";
        return div;
    }

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