系列专题——编程与算法之寻路（一）

地图编辑器

 

 <!-- 地图容器 -->
    <div class="mapContainer">
    </div>
    <button id="btn" style="text-align: center;">save</button>
<script>
　　
</script>

　

let container = document.querySelector('.mapContainer')
let btn  = document.getElementById('btn')
//利用一维数组来映射地图，约定0没有路障，1有路障
let mapArr = localStorage['mapArr'] ? JSON.parse(localStorage['mapArr']) : new Array(100 * 100).fill(0);
//根据数组渲染页面,i表示纵向，j表示横向
function render(){
    for(let i = 0 ; i < 100;i++){
        for(let j = 0 ; j < 100;j++){
             let cellClass = 
              mapArr[i * 100 + j] == 0 ? "cell" :'cell block'
            let cell = document.createElement('div');
            cell.className = cellClass;
            cell.addEventListener('mousemove',function(){
                if(mousedown){
                    if(clear){
                        //右键
                        cell.className = 'cell';
                        mapArr[i * 100 + j] = 0
                    }else{
                        cell.className = 'cell block'
                        mapArr[i * 100 + j] = 1
                    }
                }
            })
            container.appendChild(cell)  
        }
    }
}
render()

//设置标识
let mousedown = false;
let clear = false
document.addEventListener('mousedown',()=>mousedown = true)

//阻止鼠标右键默认事件
document.addEventListener('contextmenu',e=>e.preventDefault())
document.addEventListener('mousemove',(e)=>{
    //e.which 左1  右3
    clear = e.which === 3
})

document.addEventListener('mouseup',()=>mousedown = false)
btn.addEventListener('click',()=>localStorage['mapArr'] = JSON.stringify(mapArr))