HTML 代码
<!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>
JS 代码
//地图类
export default 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("");
// console.log(this.el);
}
}