Objects can be placed on the grid.
This commit is contained in:
parent
31289d1ff2
commit
3ec8b29afc
137
game.js
137
game.js
@ -43,23 +43,23 @@ var WRITERLEFT = {type:"WRITER",direction:LEFT,color:RED}
|
||||
var WRITERRIGHT = {type:"WRITER",direction:RIGHT,color:RED}
|
||||
var WRITERUP = {type:"WRITER",direction:UP,color:RED}
|
||||
|
||||
var DEF_BRANCHUP_RB = {img:IMAGE_BRANCH,color1:RED,color2:BLUE}
|
||||
var DEF_BRANCHUP_BR = {img:IMAGE_BRANCH,color1:BLUE,color2:RED}
|
||||
var DEF_BRANCHUP_GY = {img:IMAGE_BRANCH,color1:GREEN,color2:YELLOW}
|
||||
var DEF_BRANCHUP_YG = {img:IMAGE_BRANCH,color1:YELLOW,color2:GREEN}
|
||||
var DEF_BRANCHUP_PPI = {img:IMAGE_BRANCH,color1:PURPLE,color2:PINK}
|
||||
var DEF_BRANCHUP_PIP = {img:IMAGE_BRANCH,color1:PINK,color2:PURPLE}
|
||||
var DEF_BRANCHUP_BLGR = {img:IMAGE_BRANCH,color1:BLACK,color2:GRAY}
|
||||
var DEF_BRANCHUP_GRBL = {img:IMAGE_BRANCH,color1:GRAY,color2:BLACK}
|
||||
var DEF_WRITERRIGHT_R = {img:IMAGE_WRITER,color1:RED}
|
||||
var DEF_WRITERRIGHT_B = {img:IMAGE_WRITER,color1:BLUE}
|
||||
var DEF_WRITERRIGHT_G = {img:IMAGE_WRITER,color1:GREEN}
|
||||
var DEF_WRITERRIGHT_Y = {img:IMAGE_WRITER,color1:YELLOW}
|
||||
var DEF_WRITERRIGHT_P = {img:IMAGE_WRITER,color1:PURPLE}
|
||||
var DEF_WRITERRIGHT_PI = {img:IMAGE_WRITER,color1:PINK}
|
||||
var DEF_WRITERRIGHT_BL = {img:IMAGE_WRITER,color1:BLACK}
|
||||
var DEF_WRITERRIGHT_GR = {img:IMAGE_WRITER,color1:GRAY}
|
||||
var DEF_CONVEYOR = {img:IMAGE_CONVEYOR}
|
||||
var DEF_BRANCHUP_RB = {img:IMAGE_BRANCH,color1:RED,color2:BLUE,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_BR = {img:IMAGE_BRANCH,color1:BLUE,color2:RED,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_GY = {img:IMAGE_BRANCH,color1:GREEN,color2:YELLOW,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_YG = {img:IMAGE_BRANCH,color1:YELLOW,color2:GREEN,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_PPI = {img:IMAGE_BRANCH,color1:PURPLE,color2:PINK,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_PIP = {img:IMAGE_BRANCH,color1:PINK,color2:PURPLE,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_BLGR = {img:IMAGE_BRANCH,color1:BLACK,color2:GRAY,type:"BRANCH"}
|
||||
var DEF_BRANCHUP_GRBL = {img:IMAGE_BRANCH,color1:GRAY,color2:BLACK,type:"BRANCH"}
|
||||
var DEF_WRITERRIGHT_R = {img:IMAGE_WRITER,color1:RED,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_B = {img:IMAGE_WRITER,color1:BLUE,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_G = {img:IMAGE_WRITER,color1:GREEN,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_Y = {img:IMAGE_WRITER,color1:YELLOW,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_P = {img:IMAGE_WRITER,color1:PURPLE,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_PI = {img:IMAGE_WRITER,color1:PINK,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_BL = {img:IMAGE_WRITER,color1:BLACK,type:"WRITER"}
|
||||
var DEF_WRITERRIGHT_GR = {img:IMAGE_WRITER,color1:GRAY,type:"WRITER"}
|
||||
var DEF_CONVEYOR = {img:IMAGE_CONVEYOR,type:"BELT"}
|
||||
|
||||
|
||||
var GRID_W = 32
|
||||
@ -70,6 +70,8 @@ var GRID_Y = 20
|
||||
var LAST_MOUSE_X=0;
|
||||
var LAST_MOUSE_Y=0;
|
||||
|
||||
var ITEM_DIRECTION=RIGHT;
|
||||
|
||||
var SUBMENU = {
|
||||
visible:false,
|
||||
width:0,
|
||||
@ -332,10 +334,10 @@ function setupGame() {
|
||||
}
|
||||
|
||||
function mouseOverButton(canvas,e,button) {
|
||||
return (getMousePos(canvas,e).x>=button.x &&
|
||||
getMousePos(canvas,e).x<=button.x+button.w &&
|
||||
getMousePos(canvas,e).y>=button.y &&
|
||||
getMousePos(canvas,e).y<=button.y+button.h)
|
||||
return (getMousePos(e).x>=button.x &&
|
||||
getMousePos(e).x<=button.x+button.w &&
|
||||
getMousePos(e).y>=button.y &&
|
||||
getMousePos(e).y<=button.y+button.h)
|
||||
}
|
||||
|
||||
function clickEvent(e) {
|
||||
@ -356,10 +358,31 @@ function clickEvent(e) {
|
||||
}
|
||||
}
|
||||
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) {
|
||||
@ -368,9 +391,10 @@ function releaseEvent(e) {
|
||||
if (mouseOverButton(canvas,e,button)) {
|
||||
ITEM_SELECTED=button.def
|
||||
BUTTON_SELECTED.lastselected=button.def
|
||||
}
|
||||
}
|
||||
SUBMENU.visible=false
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -403,34 +427,51 @@ function step() {
|
||||
}
|
||||
|
||||
function updateMouse(e) {
|
||||
//console.log(getMousePos(canvas,e))
|
||||
//console.log(getMousePos(e))
|
||||
e.preventDefault()
|
||||
var mousepos = getMousePos(canvas,e)
|
||||
var mousepos = getMousePos(e)
|
||||
LAST_MOUSE_X=mousepos.x
|
||||
LAST_MOUSE_Y=mousepos.y
|
||||
}
|
||||
|
||||
function getMousePos(canvas, evt) {
|
||||
function getMousePos(e) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
if (evt.changedTouches) {
|
||||
if (e.changedTouches) {
|
||||
return {
|
||||
x: evt.changedTouches[0].clientX - rect.left,
|
||||
y: evt.changedTouches[0].clientY - rect.top
|
||||
x: e.changedTouches[0].clientX - rect.left,
|
||||
y: e.changedTouches[0].clientY - rect.top
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
x: evt.clientX - rect.left,
|
||||
y: evt.clientY - rect.top
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function renderGame() {
|
||||
function renderGame(ctx) {
|
||||
var displayGrid = []
|
||||
displayGrid = deepCopy(gameGrid)
|
||||
if (BOT_X!==-1&&BOT_Y!==-1) {
|
||||
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(displayGrid)*/
|
||||
}
|
||||
@ -481,22 +522,14 @@ function drawImage(x,y,img,ctx,degrees){
|
||||
function draw() {
|
||||
var ctx = canvas.getContext("2d")
|
||||
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 {
|
||||
ctx.fillStyle="#b5c4c1"
|
||||
}
|
||||
ctx.globalAlpha=1.0
|
||||
ctx.fillRect(0,0,canvas.width,canvas.height)
|
||||
renderGame()
|
||||
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();
|
||||
renderGame(ctx)
|
||||
|
||||
if (ITEM_SELECTED) {
|
||||
RenderIcon(LAST_MOUSE_X-16,LAST_MOUSE_Y-16,ctx,ITEM_SELECTED,0)
|
||||
@ -506,6 +539,7 @@ function draw() {
|
||||
RenderSubmenu(ctx)
|
||||
RenderMenu(ctx)
|
||||
RenderIcon(32,32,ctx,DEF_BRANCHUP_GY,270)
|
||||
}
|
||||
}
|
||||
|
||||
function RenderIcon(x,y,ctx,icon_definition,rot=0,background=undefined) {
|
||||
@ -513,20 +547,27 @@ function RenderIcon(x,y,ctx,icon_definition,rot=0,background=undefined) {
|
||||
ctx.fillStyle=background
|
||||
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(
|
||||
x+16,
|
||||
y+16,
|
||||
icon_definition.img,ctx,rot)
|
||||
}
|
||||
switch (icon_definition.img) {
|
||||
case IMAGE_BRANCH:{
|
||||
drawImage(
|
||||
x+16,
|
||||
y+16,
|
||||
GetArrowImage(icon_definition.color1),ctx,rot+180)
|
||||
GetArrowImage(icon_definition.color1),ctx,rot+270)
|
||||
drawImage(
|
||||
x+16,
|
||||
y+16,
|
||||
GetArrowImage(icon_definition.color2),ctx,rot)
|
||||
GetArrowImage(icon_definition.color2),ctx,rot+90)
|
||||
}break;
|
||||
case IMAGE_WRITER:{
|
||||
drawImage(
|
||||
|
Loading…
x
Reference in New Issue
Block a user