MultiplayerMinesweeper/www/scripts/display/draw.js

71 lines
1.7 KiB
JavaScript

import * as main from '../script.js';
import {tileArray} from './tileRenderer.js';
import { cursor } from '../interface/game/mouse.js'
import { ctx, hctx } from './html.js';
import { game } from '../game/game.js'
import * as animation from './visualLoop.js'
export function render() {
renderTiles()
}
export function renderTiles() { // DRAW THE IMAGE TO THE CANVAS.
let x, y = 0
const gridSize = game.gridSize;
const tileSize = game.tileSize;
for(x = 0; x < gridSize[0]; x++){
for(y = 0; y < gridSize[1]; y++){
const xu = x*tileSize;
const yu = y*tileSize;
const tempWorld = game.world;
// Draw buildings
switch (tempWorld[x][y].type) {
case (0):
ctx.drawImage(tileArray[0], xu,yu)
break;
case (1):
ctx.drawImage(tileArray[2], xu,yu)
break;
case (2):
ctx.drawImage(tileArray[1], xu,yu)
break;
}
// Draw Structures
switch (tempWorld[x][y].structure) {
case (1):
ctx.drawImage(tileArray[4], xu,yu)
break;
case (2):
ctx.drawImage(tileArray[32], xu,yu)
break;
case (3):
ctx.drawImage(tileArray[33], xu,yu)
break;
case (4):
ctx.drawImage(tileArray[34], xu,yu)
break;
}
// Draw Property overlays
if (tempWorld[x][y].color != null){
ctx.beginPath();
ctx.fillStyle = tempWorld[x][y].color;
ctx.rect(xu, yu, tileSize, tileSize)
ctx.globalAlpha = 0.6;
ctx.fill()
ctx.globalAlpha = 1;
}
}
}
console.log("image Rendered")
}
export function renderHud(x, y) {
const tileSize = game.tileSize;
hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
hctx.drawImage(tileArray[80], x*tileSize,y*tileSize)
}