贪吃蛇-地图代码

最新推荐文章于 2023-05-09 18:09:55 发布

nanling0220

最新推荐文章于 2023-05-09 18:09:55 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/nanling0220/article/details/105328436

版权

<!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>

    <style>
        #map{
            width: 400px;
            height: 400px;
            background-color: #000;
            position: relative;
        }
    
    </style>
</head>
<body>
    
    <div id="map"></div>

    <script>
        
        class Map{
            constructor(el,rect = 10){
                this.el = el;
                this.rect = rect;
                this.data = [];

                //行列数 = 总宽高 / 行列的大小
                this.rows = Math.ceil(Map.getStyle(el,"height") / rect);
                this.cells = Math.ceil(Map.getStyle(el,"width") / rect);

                //总宽高 =  行列数 * 行列的大小  
                Map.setStyle(el,"height",this.rows*rect);
                Map.setStyle(el,"width",this.cells*rect);
            }

            static getStyle(el,attr){
                return  parseFloat(getComputedStyle(el)[attr]);
            }

            static setStyle(el,attr,val){
                el.style[attr] = val + "px";
            }

            //设置数据
            setData(newData){
                this.data = this.data.concat(newData);
            }

            //清除数据
            clearData(){
                    this.data.length = 0;
            }
            //判断指定位置 是否包含数据
            include({x,y}){
                return this.data.some(item=>(item.x==x && item.y==y));
            }

            //通过数据，渲染到页面元素
            render(){
                this.el.innerHTML = this.data.map(item=>{
                    return `<span style="position:absolute;left:${item.x*this.rect}px;top:${item.y*this.rect}px;width:${this.rect}px; height:${this.rect}px;background:${item.color};"></span>`
                }).join("");
            }
        }
    
    let map = document.querySelector("#map");
     let gameMap = new Map(map,10);

    gameMap.setData([
                    {x:5,y:3,color:"red"},
                    {x:4,y:3,color:"#fff"},
                    {x:3,y:3,color:"#fff"},
                    {x:2,y:3,color:"#fff"},
               ]);
     gameMap.render();

     gameMap.clearData();   

     gameMap.setData([
                    {x:10,y:3,color:"red"},
                    {x:9,y:3,color:"#fff"},
                    {x:8,y:3,color:"#fff"},
                    {x:7,y:3,color:"#fff"},
               
     ]);   
     gameMap.render();
     console.log(gameMap.include({x:5,y:3}));
    //  console.log(gameMap);
    

    </script>

</body>
</html>

nanling0220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇-地图代码

<!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-U...
复制链接

扫一扫