Objects can be placed on the grid.

This commit is contained in:
sigonasr2 2020-08-31 11:49:56 +09:00
parent 31289d1ff2
commit 3ec8b29afc

137
game.js
View File

@ -43,23 +43,23 @@ var WRITERLEFT = {type:"WRITER",direction:LEFT,color:RED}
var WRITERRIGHT = {type:"WRITER",direction:RIGHT,color:RED} var WRITERRIGHT = {type:"WRITER",direction:RIGHT,color:RED}
var WRITERUP = {type:"WRITER",direction:UP,color:RED} var WRITERUP = {type:"WRITER",direction:UP,color:RED}
var DEF_BRANCHUP_RB = {img:IMAGE_BRANCH,color1:RED,color2:BLUE} var DEF_BRANCHUP_RB = {img:IMAGE_BRANCH,color1:RED,color2:BLUE,type:"BRANCH"}
var DEF_BRANCHUP_BR = {img:IMAGE_BRANCH,color1:BLUE,color2:RED} var DEF_BRANCHUP_BR = {img:IMAGE_BRANCH,color1:BLUE,color2:RED,type:"BRANCH"}
var DEF_BRANCHUP_GY = {img:IMAGE_BRANCH,color1:GREEN,color2:YELLOW} var DEF_BRANCHUP_GY = {img:IMAGE_BRANCH,color1:GREEN,color2:YELLOW,type:"BRANCH"}
var DEF_BRANCHUP_YG = {img:IMAGE_BRANCH,color1:YELLOW,color2:GREEN} var DEF_BRANCHUP_YG = {img:IMAGE_BRANCH,color1:YELLOW,color2:GREEN,type:"BRANCH"}
var DEF_BRANCHUP_PPI = {img:IMAGE_BRANCH,color1:PURPLE,color2:PINK} var DEF_BRANCHUP_PPI = {img:IMAGE_BRANCH,color1:PURPLE,color2:PINK,type:"BRANCH"}
var DEF_BRANCHUP_PIP = {img:IMAGE_BRANCH,color1:PINK,color2:PURPLE} var DEF_BRANCHUP_PIP = {img:IMAGE_BRANCH,color1:PINK,color2:PURPLE,type:"BRANCH"}
var DEF_BRANCHUP_BLGR = {img:IMAGE_BRANCH,color1:BLACK,color2:GRAY} var DEF_BRANCHUP_BLGR = {img:IMAGE_BRANCH,color1:BLACK,color2:GRAY,type:"BRANCH"}
var DEF_BRANCHUP_GRBL = {img:IMAGE_BRANCH,color1:GRAY,color2:BLACK} var DEF_BRANCHUP_GRBL = {img:IMAGE_BRANCH,color1:GRAY,color2:BLACK,type:"BRANCH"}
var DEF_WRITERRIGHT_R = {img:IMAGE_WRITER,color1:RED} var DEF_WRITERRIGHT_R = {img:IMAGE_WRITER,color1:RED,type:"WRITER"}
var DEF_WRITERRIGHT_B = {img:IMAGE_WRITER,color1:BLUE} var DEF_WRITERRIGHT_B = {img:IMAGE_WRITER,color1:BLUE,type:"WRITER"}
var DEF_WRITERRIGHT_G = {img:IMAGE_WRITER,color1:GREEN} var DEF_WRITERRIGHT_G = {img:IMAGE_WRITER,color1:GREEN,type:"WRITER"}
var DEF_WRITERRIGHT_Y = {img:IMAGE_WRITER,color1:YELLOW} var DEF_WRITERRIGHT_Y = {img:IMAGE_WRITER,color1:YELLOW,type:"WRITER"}
var DEF_WRITERRIGHT_P = {img:IMAGE_WRITER,color1:PURPLE} var DEF_WRITERRIGHT_P = {img:IMAGE_WRITER,color1:PURPLE,type:"WRITER"}
var DEF_WRITERRIGHT_PI = {img:IMAGE_WRITER,color1:PINK} var DEF_WRITERRIGHT_PI = {img:IMAGE_WRITER,color1:PINK,type:"WRITER"}
var DEF_WRITERRIGHT_BL = {img:IMAGE_WRITER,color1:BLACK} var DEF_WRITERRIGHT_BL = {img:IMAGE_WRITER,color1:BLACK,type:"WRITER"}
var DEF_WRITERRIGHT_GR = {img:IMAGE_WRITER,color1:GRAY} var DEF_WRITERRIGHT_GR = {img:IMAGE_WRITER,color1:GRAY,type:"WRITER"}
var DEF_CONVEYOR = {img:IMAGE_CONVEYOR} var DEF_CONVEYOR = {img:IMAGE_CONVEYOR,type:"BELT"}
var GRID_W = 32 var GRID_W = 32
@ -70,6 +70,8 @@ var GRID_Y = 20
var LAST_MOUSE_X=0; var LAST_MOUSE_X=0;
var LAST_MOUSE_Y=0; var LAST_MOUSE_Y=0;
var ITEM_DIRECTION=RIGHT;
var SUBMENU = { var SUBMENU = {
visible:false, visible:false,
width:0, width:0,
@ -332,10 +334,10 @@ function setupGame() {
} }
function mouseOverButton(canvas,e,button) { function mouseOverButton(canvas,e,button) {
return (getMousePos(canvas,e).x>=button.x && return (getMousePos(e).x>=button.x &&
getMousePos(canvas,e).x<=button.x+button.w && getMousePos(e).x<=button.x+button.w &&
getMousePos(canvas,e).y>=button.y && getMousePos(e).y>=button.y &&
getMousePos(canvas,e).y<=button.y+button.h) getMousePos(e).y<=button.y+button.h)
} }
function clickEvent(e) { function clickEvent(e) {
@ -356,10 +358,31 @@ function clickEvent(e) {
} }
} }
ITEM_SELECTED=button.lastselected ITEM_SELECTED=button.lastselected
console.log(button) //console.log(button)
return
} }
} }
} }
//console.log(getGridCoords(getMousePos(e)))
if (ITEM_SELECTED!==undefined) {
var clickCoords = getGridCoords(getMousePos(e))
if (clickCoords.x>=0&&clickCoords.y>=0&&clickCoords.y<gameGrid.length&&clickCoords.x<gameGrid[clickCoords.y].length) {
placeObject(clickCoords,ITEM_SELECTED)
//console.log(gameGrid)
}
}
}
function placeObject(coords,def) {
var newObj={...def,direction:ITEM_DIRECTION}
gameGrid[coords.y][coords.x]=newObj
}
function getGridCoords(pos) {
var x = Math.round((pos.x-GRID_X)/GRID_W-1)
var y = Math.round((pos.y-GRID_Y)/GRID_H-1)
return {x:x,y:y}
} }
function releaseEvent(e) { function releaseEvent(e) {
@ -368,9 +391,10 @@ function releaseEvent(e) {
if (mouseOverButton(canvas,e,button)) { if (mouseOverButton(canvas,e,button)) {
ITEM_SELECTED=button.def ITEM_SELECTED=button.def
BUTTON_SELECTED.lastselected=button.def BUTTON_SELECTED.lastselected=button.def
}
}
SUBMENU.visible=false SUBMENU.visible=false
return
}
}
} }
} }
@ -403,34 +427,51 @@ function step() {
} }
function updateMouse(e) { function updateMouse(e) {
//console.log(getMousePos(canvas,e)) //console.log(getMousePos(e))
e.preventDefault() e.preventDefault()
var mousepos = getMousePos(canvas,e) var mousepos = getMousePos(e)
LAST_MOUSE_X=mousepos.x LAST_MOUSE_X=mousepos.x
LAST_MOUSE_Y=mousepos.y LAST_MOUSE_Y=mousepos.y
} }
function getMousePos(canvas, evt) { function getMousePos(e) {
var rect = canvas.getBoundingClientRect(); var rect = canvas.getBoundingClientRect();
if (evt.changedTouches) { if (e.changedTouches) {
return { return {
x: evt.changedTouches[0].clientX - rect.left, x: e.changedTouches[0].clientX - rect.left,
y: evt.changedTouches[0].clientY - rect.top y: e.changedTouches[0].clientY - rect.top
}; };
} else { } else {
return { return {
x: evt.clientX - rect.left, x: e.clientX - rect.left,
y: evt.clientY - rect.top y: e.clientY - rect.top
}; };
} }
} }
function renderGame() { function renderGame(ctx) {
var displayGrid = [] var displayGrid = []
displayGrid = deepCopy(gameGrid) displayGrid = deepCopy(gameGrid)
if (BOT_X!==-1&&BOT_Y!==-1) { if (BOT_X!==-1&&BOT_Y!==-1) {
displayGrid[BOT_Y][BOT_X]["BOT"]=true displayGrid[BOT_Y][BOT_X]["BOT"]=true
} }
for (var y=0;y<=gameGrid.length;y++) {
ctx.moveTo(GRID_X, GRID_Y+GRID_H*y);
ctx.lineTo(GRID_X+GRID_W*gameGrid.length, GRID_Y+GRID_H*y);
}
for (var x=0;x<=gameGrid.length;x++) {
ctx.moveTo(GRID_X+GRID_W*x, GRID_Y);
ctx.lineTo(GRID_X+GRID_W*x, GRID_Y+GRID_H*gameGrid.length);
}
ctx.fillStyle="#000000"
ctx.stroke();
for (var y=0;y<gameGrid.length;y++) {
for (var x=0;x<gameGrid[y].length;x++) {
if (gameGrid[y][x].img!==undefined) {
RenderIcon(GRID_X+GRID_W*x+16,GRID_Y+GRID_H*y+16,ctx,gameGrid[y][x],gameGrid[y][x].direction)
}
}
}
/*console.log("Tape: "+BOT_TAPE) /*console.log("Tape: "+BOT_TAPE)
console.log(displayGrid)*/ console.log(displayGrid)*/
} }
@ -481,22 +522,14 @@ function drawImage(x,y,img,ctx,degrees){
function draw() { function draw() {
var ctx = canvas.getContext("2d") var ctx = canvas.getContext("2d")
if (Math.random()<0.01) { if (Math.random()<0.01) {
ctx.fillStyle="#a3adab" ctx.fillStyle="rgba(63, 73, 71, 0.5)"
ctx.globalAlpha=0.5
ctx.fillRect(0,0,canvas.width,canvas.height)
} else { } else {
ctx.fillStyle="#b5c4c1" ctx.fillStyle="#b5c4c1"
} ctx.globalAlpha=1.0
ctx.fillRect(0,0,canvas.width,canvas.height) ctx.fillRect(0,0,canvas.width,canvas.height)
renderGame() renderGame(ctx)
for (var y=0;y<=gameGrid.length;y++) {
ctx.moveTo(GRID_X, GRID_Y+GRID_H*y);
ctx.lineTo(GRID_X+GRID_W*gameGrid.length, GRID_Y+GRID_H*y);
}
for (var x=0;x<=gameGrid.length;x++) {
ctx.moveTo(GRID_X+GRID_W*x, GRID_Y);
ctx.lineTo(GRID_X+GRID_W*x, GRID_Y+GRID_H*gameGrid.length);
}
ctx.fillStyle="#000000"
ctx.stroke();
if (ITEM_SELECTED) { if (ITEM_SELECTED) {
RenderIcon(LAST_MOUSE_X-16,LAST_MOUSE_Y-16,ctx,ITEM_SELECTED,0) RenderIcon(LAST_MOUSE_X-16,LAST_MOUSE_Y-16,ctx,ITEM_SELECTED,0)
@ -507,26 +540,34 @@ function draw() {
RenderMenu(ctx) RenderMenu(ctx)
RenderIcon(32,32,ctx,DEF_BRANCHUP_GY,270) RenderIcon(32,32,ctx,DEF_BRANCHUP_GY,270)
} }
}
function RenderIcon(x,y,ctx,icon_definition,rot=0,background=undefined) { function RenderIcon(x,y,ctx,icon_definition,rot=0,background=undefined) {
if (background!==undefined) { if (background!==undefined) {
ctx.fillStyle=background ctx.fillStyle=background
ctx.fillRect(x,y,32,32) ctx.fillRect(x,y,32,32)
} }
if (icon_definition.img===IMAGE_BRANCH) {
drawImage(
x+16,
y+16,
icon_definition.img,ctx,rot+90)
} else {
drawImage( drawImage(
x+16, x+16,
y+16, y+16,
icon_definition.img,ctx,rot) icon_definition.img,ctx,rot)
}
switch (icon_definition.img) { switch (icon_definition.img) {
case IMAGE_BRANCH:{ case IMAGE_BRANCH:{
drawImage( drawImage(
x+16, x+16,
y+16, y+16,
GetArrowImage(icon_definition.color1),ctx,rot+180) GetArrowImage(icon_definition.color1),ctx,rot+270)
drawImage( drawImage(
x+16, x+16,
y+16, y+16,
GetArrowImage(icon_definition.color2),ctx,rot) GetArrowImage(icon_definition.color2),ctx,rot+90)
}break; }break;
case IMAGE_WRITER:{ case IMAGE_WRITER:{
drawImage( drawImage(