css+js=贪吃蛇简版

天天Lotay

发布于 2022-12-01 08:26:56

1.3K0

发布于 2022-12-01 08:26:56

文章被收录于专栏：嵌入式音视频

先上简版贪吃蛇（即移动方块）xmind思维导图

<!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>
    <style>
        .box {
            
            width: 30px;
            height: 30px;
            background-color: pink;
            position: fixed;
            top: 50px;
            left: 50px;
        }
    </style>
    <div id="lists"  class="box" style="top: 50px;left: 50px;">

    </div>
    <script>
        var lists = document.getElementById("lists")
        var x = 5;
        var y = 0;


        console.log(parseInt(lists.style.top));
        console.log(lists.style.left);

        setInterval(snake, 20);
        function snake() {

            var div=document.createElement("div");
            div.className="box";//在这里添加类，可以使用style里的设置
            
            lists.style.left = parseInt(lists.style.left) + x + "px";
            lists.style.top = parseInt(lists.style.top) + y + "px";
        }
        window.onkeydown = function (event) {
            var key = event.keyCode;
            switch (key) {
                // 左边
                case 37:
                    x = -5;
                    y = 0;
                    break;
                // 上边
                case 38:
                    x = 0;
                    y = -5;
                    break;
                // 右边
                case 39:
                    x = 5;
                    y = 0;
                    break;
                // 下边
                case 40:
                    x = 0;
                    y = 5;
                    break;
             
            }
        }
    </script>
</body>

</html>

版本1在codepen里的演示结果： https://codepen.io/1980450400/pen/YzGvLVz

再逐步增加难度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 20px;
            height: 20px;
            background-color: #000;
            position: fixed;
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div id="lists">
        <!-- <div class="box" style="top:50px;left:50px;"></div> -->
        <!-- <div>11</div>
        <div>10</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>3</div>
        <div>2</div>
        <div>1</div> -->
    </div>
    


    <script>    

        var lists = document.getElementById("lists");

        var x = 20; //控制左右 left
        var y = 0; //控制上下 top
        var dx = 50;
        var dy = 50;

        // 定时器
        setInterval(boxgame, 100);

        function boxgame(){

            // box.style.left = parseInt(box.style.left) + x + "px";
            // box.style.top = parseInt(box.style.top) + y + "px";
            // 创建小盒子
            var div = document.createElement("div");
            div.className = "box";
            // 移动位置
            div.style.left = dx + x + "px";
            div.style.top = dy + y + "px";
            lists.insertBefore(div,lists.children[0]);
            
            // 控制蛇身长度 10
            if(lists.children.length > 10){
                for(var i = 11; i < lists.children.length;i++){
                    lists.removeChild(lists.children[i]); 
                }
            }
            
            // 记录上一个位置
            dx = dx + x;
            dy = dy + y;
        }


        window.onkeydown = function(event){
            var key = event.keyCode;
            // 37左 39右  left x 
            // 38上 40下  top y

            switch(key){
                case 37:
                    console.log("左");
                    x = -20;
                    y = 0;
                    break;
                case 39:
                    console.log("右");
                    x = 20;
                    y = 0;
                    break;
                case 38:
                    console.log("上");
                    x = 0;
                    y = -20;
                    break;
                case 40:
                    console.log("下");
                    x = 0;
                    y = 20;
                    break;

            }

        }

    </script>

</body>
</html>

版本2在codepen里的演示结果：https://codepen.io/1980450400/pen/RwGJyeR