Прошу оценки по 10-и бальной. Спасибо за критику!
window.onload = function() {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
tileWidth = 60,
tileHeight = 30,
activeTile = null,
activeScale = {
status: false
};
let tiles = []
let img = document.createElement("img")
let getMap = async function (){
this.map = await new sendFetch(activeTile, 'getmap', 'GET')
return JSON.parse(this.map)
}
img.addEventListener("load", function() {
(async function(){
this.map = await getMap()
init(this.map);
setInterval(() => {
ctx.clearRect(-width, -1000, 3000, 3000)
draw(this.map)
},500)
})()
})
img.src = "tileset.png"
ctx.translate(width / 2, 10)
function init(map) {
for (var x = 0; x < map.length; x++) {
for (var y = 0; y < map[x].length; y++) {
tiles.push({ x, y, type: map[x][y], active: false })
}
}
}
async function draw(p_mainMap) {
if(activeTile){
const newStroke = await wait(activeTile, p_mainMap)
//присваиваем полученной фигуре статус активного
for(let i = 0; tiles.length > i; i++){
for(stroke of newStroke){
if(tiles[i].x == stroke.x && tiles[i].y == stroke.y){
tiles[i].active = true
}
}
}
}
tiles.forEach(elem => drawImageTile(elem))
}
let rectFigure = new Path2D()
rectFigure.moveTo(2, 9)
rectFigure.lineTo(tileWidth / 2 + 2, tileHeight / 2 + 9)
rectFigure.lineTo(2, tileHeight + 9)
rectFigure.lineTo(-tileWidth / 2 + 2, tileHeight / 2 + 9)
rectFigure.lineTo(3, 9)
//отрисовка тайлов-картинок и одного квадрата вокруг тайл-картинки
function drawImageTile({ x, y, type, active }) {
const xx = (x - y) * tileWidth / 2
const yy = (x + y) * tileHeight / 2
ctx.save();
ctx.translate(xx, yy)
ctx.drawImage(img, type * tileWidth, 0, tileWidth, img.height,
-tileWidth / 2, 0, tileWidth, img.height);
if (active) ctx.strokeStyle = 'red'
else ctx.strokeStyle = '#ffffff00'
ctx.beginPath()
ctx.lineWidth = 3
ctx.stroke(rectFigure);
ctx.closePath()
ctx.restore();
}
canvas.addEventListener('mousemove', (e)=>{
let tile,
isInPath = false
for (tile of tiles) {
isInPath = ctx.isPointInPath(
rectFigure,
e.clientX - (tile.x - tile.y) * tileWidth / 2,
e.clientY - (tile.x + tile.y) * tileHeight / 2,
)
if (isInPath) break;
}
if (activeTile) activeTile.active = false;
if (isInPath) {
activeTile = tile;
activeTile.active = true;
//неявная модификация основного массива содержащая ссылку
tiles.map(elem => elem.active = false)
}else{
activeTile = null;
}
//система захвата курсором карты для масштабирования
if(activeScale.status){
ctx.setTransform(1, 0, 0, 1, e.clientX - activeScale.diffX, e.clientY - activeScale.diffY)
}
})
//фиксируем расстояние курсора на холсте для правильного ведения карты
canvas.addEventListener('mousedown', function(e){
activeScale = {
status: true,
diffX: e.clientX - ctx.getTransform().e,
diffY: e.clientY - ctx.getTransform().f
}
})
canvas.addEventListener('mouseup', function(e){
activeScale.status = false
})
canvas.addEventListener('mouseout', function(e) {
if (activeTile) activeTile.active = false;
activeTile = null;
activeScale.status = false
})
canvas.addEventListener('click', function(e){
(async function (){
this.data = await new sendFetch(activeTile, 'currtile', 'POST')
console.log(this.data)
})()
})
}
