3e:null 3f:["$","title",null,{"children":"How to create a PacMan game with Vega | Nadia Fankhauser | Observable"}] 45:Tc56b,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"score", "init":"0", "on": [ {"events":{"signal":"testEaten"},"update":"testEaten ? score + 10 : score"}, {"events":{"signal":"testPowerEaten"},"update":"testPowerEaten ? score + 50 : score"}, {"events":{"signal":"testEatenGhost"},"update":"testEatenGhost ? score + 100 : score"}, {"events":{"signal":"loose"}, "force":true ,"update":"restart ? 0 : score"} ] }, { "name":"highScore", "init":"0", "on":[ {"events":{"signal":"score"}, "update":"max(score,highScore)"} ] }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" }, { "events":{"signal":"restart"}, "force": true, "update":"null" } ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"(!restart && pacManCanMoveX) ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!restart && pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX && !pacManHasGhost" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY && !pacManHasGhost" }, { "name":"pacManHasGhost", "update":"!superPower && (((pacManX + pacManXOffset === gRedX) && (pacManY + pacManYOffset === gRedY)) || ((pacManX + pacManXOffset === gBlueX) && (pacManY + pacManYOffset === gBlueY)) || ((pacManX + pacManXOffset === gGreenX) && (pacManY + pacManYOffset === gGreenY)) || ((pacManX + pacManXOffset === gOrangeX) && (pacManY + pacManYOffset === gOrangeY)))" }, { "name":"win", "update":"length(data('gums')) + length(data('powerGums')) === length(data('eatenGums'))" }, { "name":"loose", "on":[{"events":{"type":"timer", "throttle": 400 }, "update":"!superPower && ((gRedX === pacManX && gRedY === pacManY) || (gBlueX === pacManX && gBlueY === pacManY) || (gGreenX === pacManX && gGreenY === pacManY) || (gOrangeX === pacManX && gOrangeY === pacManY))"}] }, { "name":"restart", "update":"win === true || loose === true" }, { "name":"testEaten", "update":"!restart && (indata('gums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"testPowerEaten", "update":"!restart && (indata('powerGums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"superPower", "init":"0", "on": [{"events":{"type":"timer", "throttle": 1000}, "force": true, "update":"superPower > 0 ? superPower - 1 : 0"}, {"events":{"signal":"testPowerEaten"}, "update":"testPowerEaten? 15 : superPower"}, {"events":{"signal":"restart"}, "force": true, "update":"0"}] } , { "name":"testEatenGhost", "update":"superPower ? ((gRedX === pacManX && gRedY === pacManY) ? gRed : (gBlueX === pacManX && gBlueY === pacManY) ? gBlue : (gGreenX === pacManX && gGreenY === pacManY) ? gGreen : (gOrangeX === pacManX && gOrangeY === pacManY) ? gOrange : null) : null" }, { "name":"gRed", "init":"data('ghosts')[0]" }, { "name":"gRedDelta", "update":"{dx:pacManX-gRedX, dy: pacManY-gRedY}" }, { "name":"gRedLastDir", "update":"gRedDirection" }, { "name":"gRedPreferences", "update":"setdata('gRedDecisions',[{d:'up', i: (gRedLastDir === 'down' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gRedLastDir === 'up' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gRedLastDir === 'right' ? 4 : (abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gRedLastDir === 'left' ? 4 : abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gRedHasWallX", "update":"(gRedOffsetX<0 && !gRedCanLeft) || (gRedOffsetX>0 && !gRedCanRight) ? true : false" }, { "name":"gRedHasWallY", "update":"(gRedOffsetY<0 && !gRedCanUp) || (gRedOffsetY>0 && !gRedCanDown) ? true : false" }, { "name":"gRedCanLeft", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanUp", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-false')? false : true" }, { "name":"gRedCanRight", "update":"indata('walls', 'key', (gRedX + 1) + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanDown", "update":"indata('walls', 'key', gRedX + '-' + (gRedY+1) + '-false')? false : true" }, { "name":"gRedHasPacMan", "update":"superPower && ((gRedX + gRedOffsetX === pacManX) && (gRedY + gRedOffsetY === pacManY))" }, { "name":"gRedBlocked", "on": [ { "events":{"signal":"gRedProposedDirection"}, "force": true, "update":"!gRedProposedDirection ||(gRedProposedDirection === 'up' && !gRedCanUp) || (gRedProposedDirection === 'down' && !gRedCanDown) || (gRedProposedDirection === 'left' && !gRedCanLeft) || (gRedProposedDirection === 'right' && !gRedCanRight) ? true : false" } ] }, { "name":"gRedTry", "on": [ { "events":{"type":"timer", "throttle": 350}, "update":"gRedBlocked && gRedTry <3 ? gRedTry+1 : 0" } ] }, { "name":"gRedDecision", "update":"data('gRedDecisions')[gRedTry]" }, { "name":"gRedProposedDirection", "on": [{"events":{"signal":"gRedDecision"}, "force": true, "update":"gRedDecision ? gRedDecision.d : 'none'"}] }, { "name":"gRedDirection", "update":"gRedProposedDirection && !gRedBlocked ? gRedProposedDirection : gRedDirection" }, { "name":"gRedOffsetX", "update":"gRedDirection === 'left'? - 1 : gRedDirection === 'right'? 1 : 0" }, { "name":"gRedOffsetY", "update":"gRedDirection === 'up'? -1 : gRedDirection === 'down' ? 1 : 0" }, { "name":"gRedX", "init":"gRed.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 6 : (!restart && !gRedHasWallX && !gRedHasPacMan ? ((gRedOffsetX <0 && gRedX <= 0) ? grid.width - 1 : ((gRedOffsetX > 0 && gRedX >= grid.width -1) ? 0 : (gRedX + gRedOffsetX))) : gRedX)" }, { "events":{"signal":"restart"}, "update":"gRed.x", "force": true } ] }, { "name":"gRedY", "init":"gRed.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 7 : (!restart && !gRedHasWallY && !gRedHasPacMan ? ((gRedOffsetY <0 && gRedY <= 0) ? grid.height-1 : (gRedOffsetY > 0 && gRedY >= grid.height - 1)? 0 : gRedY + gRedOffsetY) : gRedY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gRed.y" } ] }, { "name":"gBlue", "init":"data('ghosts')[1]" }, { "name":"gBlueDelta", "update":"{dx:pacManX-gBlueX, dy: pacManY-gBlueY}" }, { "name":"gBlueLastDir", "update":"gBlueDirection" }, { "name":"gBluePreferences", "update":"setdata('gBlueDecisions',[{d:'up', i: (gBlueLastDir === 'down' ? 4 : (abs(gBlueDelta.dy) > abs(gBlueDelta.dx) ? (gBlueDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gBlueDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gBlueLastDir === 'up' ? 4 : (abs(gBlueDelta.dy) > abs(gBlueDelta.dx) ? (gBlueDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gBlueDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gBlueLastDir === 'right' ? 4 : (abs(gBlueDelta.dy) < abs(gBlueDelta.dx) ? (gBlueDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gBlueDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gBlueLastDir === 'left' ? 4 : abs(gBlueDelta.dy) < abs(gBlueDelta.dx) ? (gBlueDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gBlueDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gBlueHasWallX", "update":"(gBlueOffsetX<0 && !gBlueCanLeft) || (gBlueOffsetX>0 && !gBlueCanRight) ? true : false" }, { "name":"gBlueHasWallY", "update":"(gBlueOffsetY<0 && !gBlueCanUp) || (gBlueOffsetY>0 && !gBlueCanDown) ? true : false" }, { "name":"gBlueHasGhost", "update":"(gBlueX == gRedX && gBlueY === gRedY)" }, { "name":"gBlueHasPacMan", "update":"superPower && ((gBlueX + gBlueOffsetX === pacManX) && (gBlueY + gBlueOffsetY === pacManY)) " }, { "name":"gBlueCanLeft", "update":"indata('walls', 'key', gBlueX + '-' + gBlueY + '-true') ? false : true" }, { "name":"gBlueCanUp", "update":"indata('walls', 'key', gBlueX + '-' + gBlueY + '-false')? false : true" }, { "name":"gBlueCanRight", "update":"indata('walls', 'key', (gBlueX + 1) + '-' + gBlueY + '-true') ? false : true" }, { "name":"gBlueCanDown", "update":"indata('walls', 'key', gBlueX + '-' + (gBlueY+1) + '-false')? false : true" }, { "name":"gBlueBlocked", "on": [ { "events":{"signal":"gBlueProposedDirection"}, "force": true, "update":"!gBlueProposedDirection || (gBlueProposedDirection === 'up' && !gBlueCanUp) || (gBlueProposedDirection === 'down' && !gBlueCanDown) || (gBlueProposedDirection === 'left' && !gBlueCanLeft) || (gBlueProposedDirection === 'right' && !gBlueCanRight) ? true : false" } ] }, { "name":"gBlueTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gBlueBlocked && gBlueTry <=3 ? gBlueTry+1 : 0" } ] }, { "name":"gBlueDecision", "update":"data('gBlueDecisions')[gBlueTry]" }, { "name":"gBlueProposedDirection", "on": [{"events":{"signal":"gBlueDecision"}, "force": true, "update":"gBlueDecision ? gBlueDecision.d : 'none'"}] }, { "name":"gBlueDirection", "update":"gBlueProposedDirection && !gBlueBlocked ? gBlueProposedDirection : gBlueDirection" }, { "name":"gBlueOffsetX", "update":"gBlueDirection === 'left'? - 1 : gBlueDirection === 'right'? 1 : 0" }, { "name":"gBlueOffsetY", "update":"gBlueDirection === 'up' ? -1 : gBlueDirection === 'down' ? 1 : 0" }, { "name":"gBlueX", "init":"gBlue.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'steelblue') ? 7 : (!restart && !gBlueHasWallX && !gBlueHasGhost && !gBlueHasPacMan ? ((gBlueOffsetX <0 && gBlueX <= 0) ? grid.width - 1 : ((gBlueOffsetX > 0 && gBlueX >= grid.width -1) ? 0 : (gBlueX + gBlueOffsetX))) : gBlueX)" }, { "events":{"signal":"restart"}, "update":"gBlue.x", "force": true } ] }, { "name":"gBlueY", "init":"gBlue.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'steelblue') ? 7 : (!restart && !gBlueHasWallY && !gBlueHasGhost && !gBlueHasPacMan ? ((gBlueOffsetY <0 && gBlueY <= 0) ? grid.height-1 : (gBlueOffsetY > 0 && gBlueY >= grid.height - 1)? 0 : gBlueY + gBlueOffsetY) : gBlueY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gBlue.y" } ] }, { "name":"gGreen", "init":"data('ghosts')[2]" }, { "name":"gGreenDelta", "update":"{dx:pacManX-gGreenX, dy: pacManY-gGreenY}" }, { "name":"gGreenLastDir", "update":"gGreenDirection" }, { "name":"gGreenPreferences", "update":"setdata('gGreenDecisions',[{d:'up', i: (gGreenLastDir === 'down' ? 4 : (abs(gGreenDelta.dy) > abs(gGreenDelta.dx) ? (gGreenDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gGreenDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gGreenLastDir === 'up' ? 4 : (abs(gGreenDelta.dy) > abs(gGreenDelta.dx) ? (gGreenDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gGreenDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gGreenLastDir === 'right' ? 4 : (abs(gGreenDelta.dy) < abs(gGreenDelta.dx) ? (gGreenDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gGreenDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gGreenLastDir === 'left' ? 4 : abs(gGreenDelta.dy) < abs(gGreenDelta.dx) ? (gGreenDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gGreenDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gGreenHasWallX", "update":"(gGreenOffsetX<0 && !gGreenCanLeft) || (gGreenOffsetX>0 && !gGreenCanRight) ? true : false" }, { "name":"gGreenHasWallY", "update":"(gGreenOffsetY<0 && !gGreenCanUp) || (gGreenOffsetY>0 && !gGreenCanDown) ? true : false" }, { "name":"gGreenHasGhost", "update":"(gGreenX === gRedX && gGreenY === gRedY) || (gGreenX === gBlueX && gGreenY+gGreenOffsetY === gBlueY)" }, { "name":"gGreenHasPacMan", "update":"superPower && ((gGreenX + gGreenOffsetX === pacManX) && (gGreenY + gGreenOffsetY === pacManY)) " }, { "name":"gGreenCanLeft", "update":"indata('walls', 'key', gGreenX + '-' + gGreenY + '-true') ? false : true" }, { "name":"gGreenCanUp", "update":"indata('walls', 'key', gGreenX + '-' + gGreenY + '-false')? false : true" }, { "name":"gGreenCanRight", "update":"indata('walls', 'key', (gGreenX + 1) + '-' + gGreenY + '-true') ? false : true" }, { "name":"gGreenCanDown", "update":"indata('walls', 'key', gGreenX + '-' + (gGreenY+1) + '-false')? false : true" }, { "name":"gGreenBlocked", "on": [ { "events":{"signal":"gGreenProposedDirection"}, "force": true, "update":"!gGreenProposedDirection || (gGreenProposedDirection === 'up' && !gGreenCanUp) || (gGreenProposedDirection === 'down' && !gGreenCanDown) || (gGreenProposedDirection === 'left' && !gGreenCanLeft) || (gGreenProposedDirection === 'right' && !gGreenCanRight) ? true : false" } ] }, { "name":"gGreenTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gGreenBlocked && gGreenTry <=3 ? gGreenTry+1 : 0" } ] }, { "name":"gGreenDecision", "update":"data('gGreenDecisions')[gGreenTry]" }, { "name":"gGreenProposedDirection", "on": [{"events":{"signal":"gGreenDecision"}, "force": true, "update":"gGreenDecision ? gGreenDecision.d : 'none'"}] }, { "name":"gGreenDirection", "update":"gGreenProposedDirection && !gGreenBlocked ? gGreenProposedDirection : gGreenDirection" }, { "name":"gGreenOffsetX", "update":"gGreenDirection === 'left'? - 1 : gGreenDirection === 'right'? 1 : 0" }, { "name":"gGreenOffsetY", "update":"gGreenDirection === 'up' ? -1 : gGreenDirection === 'down' ? 1 : 0" }, { "name":"gGreenX", "init":"gGreen.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'green') ? 8 : (!restart && !gGreenHasWallX && !gGreenHasGhost && !gGreenHasPacMan ? ((gGreenOffsetX <0 && gGreenX <= 0) ? grid.width - 1 : ((gGreenOffsetX > 0 && gGreenX >= grid.width -1) ? 0 : (gGreenX + gGreenOffsetX))) : gGreenX)" }, { "events":{"signal":"restart"}, "update":"gGreen.x", "force": true } ] }, { "name":"gGreenY", "init":"gGreen.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'green') ? 7 : (!restart && !gGreenHasWallY && !gGreenHasGhost && !gGreenHasPacMan ? ((gGreenOffsetY <0 && gGreenY <= 0) ? grid.height-1 : (gGreenOffsetY > 0 && gGreenY >= grid.height - 1)? 0 : gGreenY + gGreenOffsetY) : gGreenY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gGreen.y" } ] }, { "name":"gOrange", "init":"data('ghosts')[3]" }, { "name":"gOrangeDelta", "update":"{dx:pacManX-gOrangeX, dy: pacManY-gOrangeY}" }, { "name":"gOrangeLastDir", "update":"gOrangeDirection" }, { "name":"gOrangePreferences", "update":"setdata('gOrangeDecisions',[{d:'up', i: (gOrangeLastDir === 'down' ? 4 : (abs(gOrangeDelta.dy) > abs(gOrangeDelta.dx) ? (gOrangeDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gOrangeDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gOrangeLastDir === 'up' ? 4 : (abs(gOrangeDelta.dy) > abs(gOrangeDelta.dx) ? (gOrangeDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gOrangeDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gOrangeLastDir === 'right' ? 4 : (abs(gOrangeDelta.dy) < abs(gOrangeDelta.dx) ? (gOrangeDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gOrangeDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gOrangeLastDir === 'left' ? 4 : abs(gOrangeDelta.dy) < abs(gOrangeDelta.dx) ? (gOrangeDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gOrangeDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gOrangeHasWallX", "update":"(gOrangeOffsetX<0 && !gOrangeCanLeft) || (gOrangeOffsetX>0 && !gOrangeCanRight) ? true : false" }, { "name":"gOrangeHasWallY", "update":"(gOrangeOffsetY<0 && !gOrangeCanUp) || (gOrangeOffsetY>0 && !gOrangeCanDown) ? true : false" }, { "name":"gOrangeHasGhost", "update":"(gOrangeX === gRedX && gOrangeY === gRedY) || (gOrangeX === gBlueX && gOrangeY === gBlueY) || (gOrangeX === gGreenX && gOrangeY === gGreenY)" }, { "name":"gOrangeCanLeft", "update":"indata('walls', 'key', gOrangeX + '-' + gOrangeY + '-true') ? false : true" }, { "name":"gOrangeCanUp", "update":"indata('walls', 'key', gOrangeX + '-' + gOrangeY + '-false')? false : true" }, { "name":"gOrangeCanRight", "update":"indata('walls', 'key', (gOrangeX + 1) + '-' + gOrangeY + '-true') ? false : true" }, { "name":"gOrangeCanDown", "update":"indata('walls', 'key', gOrangeX + '-' + (gOrangeY+1) + '-false')? false : true" }, { "name":"gOrangeBlocked", "on": [ { "events":{"signal":"gOrangeProposedDirection"}, "force": true, "update":"!gOrangeProposedDirection || (gOrangeProposedDirection === 'up' && !gOrangeCanUp) || (gOrangeProposedDirection === 'down' && !gOrangeCanDown) || (gOrangeProposedDirection === 'left' && !gOrangeCanLeft) || (gOrangeProposedDirection === 'right' && !gOrangeCanRight) ? true : false" } ] }, { "name":"gOrangeTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gOrangeBlocked && gOrangeTry <=3 ? gOrangeTry+1 : 0" } ] }, { "name":"gOrangeHasPacMan", "update":"superPower && ((gOrangeX + gOrangeOffsetX === pacManX) && (gOrangeY + gOrangeOffsetY === pacManY)) " }, { "name":"gOrangeDecision", "update":"data('gOrangeDecisions')[gOrangeTry]" }, { "name":"gOrangeProposedDirection", "on": [{"events":{"signal":"gOrangeDecision"}, "force": true, "update":"gOrangeDecision ? gOrangeDecision.d : 'none'"}] }, { "name":"gOrangeDirection", "update":"gOrangeProposedDirection && !gOrangeBlocked ? gOrangeProposedDirection : gOrangeDirection" }, { "name":"gOrangeOffsetX", "update":"gOrangeDirection === 'left'? - 1 : gOrangeDirection === 'right'? 1 : 0" }, { "name":"gOrangeOffsetY", "update":"gOrangeDirection === 'up' ? -1 : gOrangeDirection === 'down' ? 1 : 0" }, { "name":"gOrangeX", "init":"gOrange.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'orange') ? 7 : (!restart && !gOrangeHasWallX && !gOrangeHasGhost && !gOrangeHasPacMan ? ((gOrangeOffsetX <0 && gOrangeX <= 0) ? grid.width - 1 : ((gOrangeOffsetX > 0 && gOrangeX >= grid.width -1) ? 0 : (gOrangeX + gOrangeOffsetX))) : gOrangeX)" }, { "events":{"signal":"restart"}, "update":"gOrange.x", "force": true } ] }, { "name":"gOrangeY", "init":"gOrange.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'orange') ? 7 : (!restart && !gOrangeHasWallY && !gOrangeHasGhost && !gOrangeHasPacMan ? ((gOrangeOffsetY <0 && gOrangeY <= 0) ? grid.height-1 : (gOrangeOffsetY > 0 && gOrangeY >= grid.height - 1)? 0 : gOrangeY + gOrangeOffsetY) : gOrangeY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gOrange.y" } ] } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"rect", "from":{"data":"walls"}, "encode":{ "enter":{ "x":{"signal":"datum.x < grid.width ? datum.x : grid.width-1", "scale":"scaleX", "offset":{"signal":"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0"}}, "y":{"signal":"datum.y < grid.height ? datum.y : grid.height-1", "scale":"scaleY", "offset":{"signal":"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10"}}, "fill":{"value":"blue"}, "width":{"signal":"datum.vertical?blockSize/10:blockSize"}, "height":{"signal":"datum.vertical?blockSize:blockSize/10"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":7, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":3, "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"yellow"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"14*sizeFactor"} }, "update":{ "text":{"value":"score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":7, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":4, "scale":"scaleY"}, "fill":{"value":"yellow"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"25*sizeFactor"} }, "update":{ "text":{"signal":"score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":5, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":11, "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"lightblue"}, "align":{"value":"left"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"14*sizeFactor"} }, "update":{ "opacity":{"signal":"highScore?1:0"}, "text":{"value":"high score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":8, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":11, "scale":"scaleY","offset":{"signal":"blockSize/2"}}, "fill":{"value":"lightblue"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"20*sizeFactor"} }, "update":{ "opacity":{"signal":"highScore?1:0"}, "text":{"signal":"highScore"} } } }, { "type":"symbol", "from":{"data":"gums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"grey"}, "size":{"signal":"pow(10*sizeFactor, 2)"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"symbol", "from":{"data":"powerGums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "size":{"signal":"pow(18*sizeFactor, 2)"}, "fill":{"value":"white"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"superPower ? 'red' : 'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] }, { "type":"symbol", "from":{"data":"ghosts"}, "encode":{ "enter":{ "size":{"signal":"pow(blockSize/20,2)"} }, "update":{ "x":{"signal":"datum.color === 'red' ? gRedX : datum.color === 'steelblue'? gBlueX : datum.color === 'green'? gGreenX : gOrangeX", "offset":{"signal":"blockSize/8"}, "scale":"scaleX"}, "y":{"signal":"datum.color === 'red' ? gRedY : datum.color === 'steelblue'? gBlueY : datum.color === 'green'? gGreenY : gOrangeY", "offset":{"signal":"blockSize/9"}, "scale":"scaleY"}, "shape":{"signal":"indata('eatenGhosts', 'color', datum.color) ? 'M16.459004,11.555034C15.659003,11.555034 15.009003,12.205034 15.009003,13.005036 15.009003,13.804038 15.659003,14.454039 16.459004,14.454039 17.258005,14.454039 17.909006,13.804038 17.909006,13.005036 17.909006,12.205034 17.258005,11.555034 16.459004,11.555034z M7.5419962,11.555034C6.7429954,11.555034 6.0919949,12.205034 6.0919949,13.005036 6.0919949,13.804038 6.7429954,14.454039 7.5419962,14.454039 8.3419973,14.454039 8.9919979,13.804038 8.9919979,13.005036 8.9919979,12.205034 8.3419973,11.555034 7.5419962,11.555034z M16.459004,9.5550298C18.361006,9.5550298 19.909006,11.103033 19.909006,13.005036 19.909006,14.90804 18.361006,16.454042 16.459004,16.454042 14.557002,16.454042 13.009001,14.90804 13.009001,13.005036 13.009001,11.103033 14.557002,9.5550298 16.459004,9.5550298z M7.5419962,9.5550298C9.4439976,9.5550298 10.991999,11.103033 10.991999,13.005036 10.991999,14.90804 9.4439976,16.454042 7.5419962,16.454042 5.6399948,16.454042 4.091993,14.90804 4.091993,13.005036 4.091993,11.103033 5.6399948,9.5550298 7.5419962,9.5550298z M12,1.9999994C6.4860079,1.9999995,2.0000002,6.3300156,2.0000004,11.650998L2.0000004,28.669975 5.102997,27.200983 8.9929964,29.12896 12.742996,27.202997 16.98201,29.106987 19.895004,27.116999 22,28.439995 22,11.650998C22,6.3300156,17.515,1.9999995,12,1.9999994z M12,0C18.617005,0,24,5.2260117,24,11.650998L24,32.056999 19.940003,29.507988 17.184998,31.390007 12.80101,29.421989 9.0080111,31.369011 5.0820009,29.424004 0,31.827995 0,11.650998C1.8747701E-07,5.2260117,5.3840029,0,12,0z' : 'M13.952596,15.068143C13.767538,15.066144 13.583578,15.095151 13.403586,15.157148 12.252587,15.553147 11.725549,17.163162 12.224572,18.753189 12.725547,20.342192 14.062582,21.309212 15.211566,20.914204 16.362564,20.518204 16.889541,18.908188 16.390579,17.318163 15.968584,15.977162 14.95058,15.077146 13.952596,15.068143z M7.7945876,6.1100698C7.2026091,6.0760732 6.4365583,6.7850791 5.9736071,7.8550807 5.4445558,9.0761004 5.5105953,10.302109 6.1215563,10.590106 6.7316013,10.881108 7.65555,10.126112 8.1855779,8.9070922 8.7145686,7.6860881 8.6485896,6.4610711 8.036592,6.1710754 7.9606028,6.1350642 7.8795486,6.1150752 7.7945876,6.1100698z M15.404559,5.9590679C15.383563,5.9580608 15.362566,5.9580608 15.34157,5.960075 14.674579,6.0020671 14.194539,7.1220723 14.275593,8.4590903 14.354573,9.7981063 14.962543,10.848119 15.631547,10.802114 16.300554,10.759113 16.778579,9.6401005 16.700576,8.3020907 16.622573,7.006074 16.049577,5.980064 15.404559,5.9590679z M12.317589,1.4699259E-05C15.527545,0.0050196948 18.757579,1.2870288 21.236579,3.8010436 24.038576,6.6430793 25.533567,12.005127 25.825559,15.861164 26.09155,19.371191 27.844537,19.518194 30.765552,22.228211 31.592515,22.995216 33.904521,25.825243 28.733512,26.053242 26.619564,26.146244 25.60156,25.739243 21.732549,22.850226 21.235542,22.545214 20.664558,22.733219 20.373542,22.885214 20.017526,23.07122 19.741586,23.925232 19.851572,24.215227 20.16456,25.583237 22.25855,25.135235 23.427553,26.313253 24.41156,27.305252 22.795536,29.807287 18.926586,29.29027 18.926586,29.29027 16.343582,28.587277 13.853597,25.258236 11.910547,25.242245 9.6305823,25.258236 9.6305823,25.258236 9.6305823,25.258236 9.6025672,26.705256 9.6425452,27.10626 10.271573,27.256254 10.777553,27.021252 13.298544,27.736271 14.150593,27.978262 16.663589,31.170292 8.7236018,30.424282 7.0135832,30.263287 7.1875944,30.721283 5.2576051,26.025242 4.2626119,23.604229 2.0076115,22.396212 0.6345674,17.082169 -0.27241354,14.207143 -0.21040192,11.068107 0.84159805,8.2280856 0.97556992,7.8450862 1.1235799,7.5130826 1.2786091,7.1980773 1.8406196,6.0020671 2.5815849,4.8720523 3.5156043,3.863056 5.9166007,1.2680314 9.107573,-0.0049901602 12.317589,1.4699259E-05z'"}, "fill":{"signal":"superPower? 'white' :datum.color"}, "opacity":[{"test":"restart", "value": 0},{"signal":"superPower?0.8:1"}] } } } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] }, { "name":"ghosts", "values":[ { "x":0, "y":0, "color":"red" }, { "x":14, "y":0, "color":"steelblue" }, { "x":0, "y":14, "color":"green" }, { "x":14, "y":14, "color":"orange" } ] }, { "name":"eatenGhosts", "on": [{ "trigger":"testEatenGhost", "insert":"testEatenGhost" }, { "trigger":"!superPower", "remove":"!superPower" }] }, { "name":"gRedDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gBlueDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gGreenDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gOrangeDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gums", "values":[ {"x":0, "y":1}, {"x":0, "y":2}, {"x":0, "y":3}, {"x":0, "y":4}, {"x":0, "y":7}, {"x":0, "y":10}, {"x":0, "y":11}, {"x":0, "y":12}, {"x":0, "y":14}, {"x":1, "y":0}, {"x":1, "y":2}, {"x":1, "y":4}, {"x":1, "y":7}, {"x":1, "y":10}, {"x":1, "y":12}, {"x":1, "y":13}, {"x":1, "y":14}, {"x":2, "y":0}, {"x":2, "y":2}, {"x":2, "y":3}, {"x":2, "y":4}, {"x":2, "y":7}, {"x":2, "y":10}, {"x":2, "y":13}, {"x":2, "y":14}, {"x":3, "y":0}, {"x":3, "y":1}, {"x":3, "y":2}, {"x":3, "y":4}, {"x":3, "y":5}, {"x":3, "y":6}, {"x":3, "y":7}, {"x":3, "y":8}, {"x":3, "y":9}, {"x":3, "y":10}, {"x":3, "y":12}, {"x":3, "y":13}, {"x":3, "y":14}, {"x":4, "y":0}, {"x":4, "y":2}, {"x":4, "y":6}, {"x":4, "y":10}, {"x":4, "y":11}, {"x":4, "y":12}, {"x":4, "y":14}, {"x":5, "y":0}, {"x":5, "y":2}, {"x":5, "y":3}, {"x":5, "y":4}, {"x":5, "y":5}, {"x":5, "y":6}, {"x":5, "y":7}, {"x":5, "y":8}, {"x":5, "y":10}, {"x":5, "y":12}, {"x":5, "y":14}, {"x":6, "y":0}, {"x":6, "y":2}, {"x":6, "y":5}, {"x":6, "y":6}, {"x":6, "y":7}, {"x":6, "y":8}, {"x":6, "y":10}, {"x":6, "y":12}, {"x":6, "y":13}, {"x":6, "y":14}, {"x":7, "y":0}, {"x":7, "y":1}, {"x":7, "y":2}, {"x":7, "y":6}, {"x":7, "y":8}, {"x":7, "y":9}, {"x":7, "y":10}, {"x":7, "y":14}, {"x":14, "y":0}, {"x":14, "y":1}, {"x":14, "y":2}, {"x":14, "y":3}, {"x":14, "y":4}, {"x":14, "y":7}, {"x":14, "y":10}, {"x":14, "y":11}, {"x":14, "y":12}, {"x":14, "y":14}, {"x":13, "y":0}, {"x":13, "y":2}, {"x":13, "y":4}, {"x":13, "y":7}, {"x":13, "y":10}, {"x":13, "y":12}, {"x":13, "y":13}, {"x":13, "y":14}, {"x":12, "y":0}, {"x":12, "y":2}, {"x":12, "y":3}, {"x":12, "y":4}, {"x":12, "y":7}, {"x":12, "y":10}, {"x":12, "y":13}, {"x":12, "y":14}, {"x":11, "y":0}, {"x":11, "y":1}, {"x":11, "y":2}, {"x":11, "y":4}, {"x":11, "y":5}, {"x":11, "y":6}, {"x":11, "y":7}, {"x":11, "y":8}, {"x":11, "y":9}, {"x":11, "y":10}, {"x":11, "y":12}, {"x":11, "y":13}, {"x":11, "y":14}, {"x":10, "y":0}, {"x":10, "y":2}, {"x":10, "y":6}, {"x":10, "y":10}, {"x":10, "y":11}, {"x":10, "y":12}, {"x":10, "y":14}, {"x":9, "y":0}, {"x":9, "y":2}, {"x":9, "y":3}, {"x":9, "y":4}, {"x":9, "y":5}, {"x":9, "y":6}, {"x":9, "y":7}, {"x":9, "y":8}, {"x":9, "y":10}, {"x":9, "y":12}, {"x":9, "y":14}, {"x":8, "y":0}, {"x":8, "y":2}, {"x":8, "y":5}, {"x":8, "y":6}, {"x":8, "y":7}, {"x":8, "y":8}, {"x":8, "y":10}, {"x":8, "y":12}, {"x":8, "y":13}, {"x":8, "y":14} ], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"powerGums", "values":[{"x":0, "y":0},{"x":14, "y":0}, {"x":0, "y":14}, {"x":14, "y":14}], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"eatenGums", "on":[ { "trigger":"testEaten", "insert":"testEaten" }, { "trigger":"testPowerEaten", "insert":"testPowerEaten" }, { "trigger":"restart", "remove":"restart" } ] }, { "name":"walls", "values":[ {"x":0, "y":0, "vertical":false}, {"x":1, "y":0, "vertical":false}, {"x":2, "y":0, "vertical":false}, {"x":3, "y":0, "vertical":false}, {"x":4, "y":0, "vertical":false}, {"x":5, "y":0, "vertical":false}, {"x":6, "y":0, "vertical":false}, {"x":7, "y":0, "vertical":false}, {"x":8, "y":0, "vertical":false}, {"x":9, "y":0, "vertical":false}, {"x":10, "y":0, "vertical":false}, {"x":11, "y":0, "vertical":false}, {"x":12, "y":0, "vertical":false}, {"x":13, "y":0, "vertical":false}, {"x":14, "y":0, "vertical":false}, {"x":0, "y":15, "vertical":false}, {"x":1, "y":15, "vertical":false}, {"x":2, "y":15, "vertical":false}, {"x":3, "y":15, "vertical":false}, {"x":4, "y":15, "vertical":false}, {"x":5, "y":15, "vertical":false}, {"x":6, "y":15, "vertical":false}, {"x":7, "y":15, "vertical":false}, {"x":8, "y":15, "vertical":false}, {"x":9, "y":15, "vertical":false}, {"x":10, "y":15, "vertical":false}, {"x":11, "y":15, "vertical":false}, {"x":12, "y":15, "vertical":false}, {"x":13, "y":15, "vertical":false}, {"x":14, "y":15, "vertical":false}, {"x":0, "y":0, "vertical":true}, {"x":0, "y":1, "vertical":true}, {"x":0, "y":2, "vertical":true}, {"x":0, "y":3, "vertical":true}, {"x":0, "y":4, "vertical":true}, {"x":0, "y":5, "vertical":false}, {"x":1, "y":5, "vertical":false}, {"x":2, "y":5, "vertical":false}, {"x":0, "y":7, "vertical":false}, {"x":1, "y":7, "vertical":false}, {"x":2, "y":7, "vertical":false}, {"x":0, "y":8, "vertical":false}, {"x":1, "y":8, "vertical":false}, {"x":0, "y":10, "vertical":false}, {"x":1, "y":10, "vertical":false}, {"x":2, "y":10, "vertical":false}, {"x":2, "y":8, "vertical":false}, {"x":3, "y":5, "vertical":true}, {"x":3, "y":6, "vertical":true}, {"x":3, "y":8, "vertical":true}, {"x":3, "y":9, "vertical":true}, {"x":0, "y":10, "vertical":true}, {"x":0, "y":11, "vertical":true}, {"x":0, "y":12, "vertical":true}, {"x":0, "y":13, "vertical":true}, {"x":0, "y":14, "vertical":true}, {"x":15, "y":0, "vertical":true}, {"x":15, "y":1, "vertical":true}, {"x":15, "y":2, "vertical":true}, {"x":15, "y":3, "vertical":true}, {"x":15, "y":4, "vertical":true}, {"x":12, "y":5, "vertical":true}, {"x":14, "y":5, "vertical":false}, {"x":13, "y":5, "vertical":false}, {"x":14, "y":7, "vertical":false}, {"x":13, "y":7, "vertical":false}, {"x":12, "y":7, "vertical":false}, {"x":12, "y":5, "vertical":false}, {"x":12, "y":6, "vertical":true}, {"x":14, "y":8, "vertical":false}, {"x":13, "y":8, "vertical":false}, {"x":14, "y":10, "vertical":false}, {"x":13, "y":10, "vertical":false}, {"x":12, "y":10, "vertical":false}, {"x":12, "y":8, "vertical":false}, {"x":12, "y":8, "vertical":true}, {"x":12, "y":9, "vertical":true}, {"x":15, "y":10, "vertical":true}, {"x":15, "y":11, "vertical":true}, {"x":15, "y":12, "vertical":true}, {"x":15, "y":13, "vertical":true}, {"x":15, "y":14, "vertical":true}, {"x":6, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":6, "vertical":false}, {"x":8, "y":5, "vertical":true}, {"x":8, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":3, "vertical":false}, {"x":8, "y":3, "vertical":false}, {"x":6, "y":3, "vertical":false}, {"x":6, "y":4, "vertical":true}, {"x":9, "y":3, "vertical":true}, {"x":9, "y":4, "vertical":true}, {"x":6, "y":3, "vertical":true}, {"x":3, "y":3, "vertical":false}, {"x":4, "y":3, "vertical":false}, {"x":3, "y":3, "vertical":true}, {"x":5, "y":3, "vertical":true}, {"x":3, "y":4, "vertical":false}, {"x":4, "y":4, "vertical":true}, {"x":5, "y":4, "vertical":true}, {"x":4, "y":5, "vertical":true}, {"x":5, "y":5, "vertical":true}, {"x":4, "y":6, "vertical":false}, {"x":10, "y":3, "vertical":false}, {"x":11, "y":3, "vertical":false}, {"x":10, "y":3, "vertical":true}, {"x":12, "y":3, "vertical":true}, {"x":11, "y":4, "vertical":false}, {"x":10, "y":4, "vertical":true}, {"x":11, "y":4, "vertical":true}, {"x":10, "y":5, "vertical":true}, {"x":11, "y":5, "vertical":true}, {"x":10, "y":6, "vertical":false}, {"x":1, "y":1, "vertical":true}, {"x":1, "y":1, "vertical":false}, {"x":2, "y":1, "vertical":false}, {"x":1, "y":2, "vertical":false}, {"x":2, "y":2, "vertical":false}, {"x":3, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":false}, {"x":4, "y":2, "vertical":false}, {"x":5, "y":1, "vertical":false}, {"x":6, "y":1, "vertical":false}, {"x":5, "y":2, "vertical":false}, {"x":6, "y":2, "vertical":false}, {"x":7, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":false}, {"x":9, "y":1, "vertical":false}, {"x":8, "y":2, "vertical":false}, {"x":9, "y":2, "vertical":false}, {"x":11, "y":1, "vertical":true}, {"x":10, "y":1, "vertical":false}, {"x":10, "y":2, "vertical":false}, {"x":12, "y":1, "vertical":true}, {"x":12, "y":1, "vertical":false}, {"x":13, "y":1, "vertical":false}, {"x":12, "y":2, "vertical":false}, {"x":13, "y":2, "vertical":false}, {"x":14, "y":1, "vertical":true}, {"x":1, "y":3, "vertical":true}, {"x":2, "y":3, "vertical":true}, {"x":1, "y":3, "vertical":false}, {"x":13, "y":4, "vertical":false}, {"x":13, "y":3, "vertical":true}, {"x":14, "y":3, "vertical":true}, {"x":13, "y":3, "vertical":false}, {"x":1, "y":4, "vertical":false}, {"x":6, "y":7, "vertical":true}, {"x":9, "y":7, "vertical":true}, {"x":7, "y":8, "vertical":false}, {"x":6, "y":8, "vertical":false}, {"x":8, "y":8, "vertical":false}, {"x":4, "y":7, "vertical":false}, {"x":4, "y":10, "vertical":false}, {"x":5, "y":10, "vertical":false}, {"x":6, "y":10, "vertical":false}, {"x":4, "y":7, "vertical":true}, {"x":4, "y":8, "vertical":true}, {"x":4, "y":9, "vertical":true}, {"x":5, "y":7, "vertical":true}, {"x":5, "y":8, "vertical":true}, {"x":7, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":6, "y":9, "vertical":false}, {"x":5, "y":9, "vertical":false}, {"x":10, "y":7, "vertical":false}, {"x":10, "y":10, "vertical":false}, {"x":9, "y":10, "vertical":false}, {"x":8, "y":10, "vertical":false}, {"x":10, "y":7, "vertical":true}, {"x":10, "y":8, "vertical":true}, {"x":11, "y":9, "vertical":true}, {"x":11, "y":7, "vertical":true}, {"x":11, "y":8, "vertical":true}, {"x":8, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":9, "y":9, "vertical":false}, {"x":8, "y":9, "vertical":false}, {"x":5, "y":11, "vertical":false}, {"x":6, "y":11, "vertical":false}, {"x":7, "y":11, "vertical":false}, {"x":8, "y":11, "vertical":false}, {"x":9, "y":11, "vertical":false}, {"x":10, "y":11, "vertical":true}, {"x":5, "y":11, "vertical":true}, {"x":5, "y":12, "vertical":false}, {"x":6, "y":12, "vertical":false}, {"x":8, "y":12, "vertical":false}, {"x":9, "y":12, "vertical":false}, {"x":7, "y":12, "vertical":true}, {"x":8, "y":12, "vertical":true}, {"x":7, "y":13, "vertical":true}, {"x":8, "y":13, "vertical":true}, {"x":7, "y":14, "vertical":false}, {"x":1, "y":13, "vertical":true}, {"x":0, "y":13, "vertical":false}, {"x":0, "y":14, "vertical":false}, {"x":2, "y":11, "vertical":false}, {"x":3, "y":11, "vertical":false}, {"x":1, "y":12, "vertical":false}, {"x":1, "y":11, "vertical":false}, {"x":2, "y":13, "vertical":false}, {"x":3, "y":12, "vertical":false}, {"x":4, "y":11, "vertical":true}, {"x":2, "y":12, "vertical":true}, {"x":1, "y":11, "vertical":true}, {"x":3, "y":12, "vertical":true}, {"x":4, "y":13, "vertical":false}, {"x":5, "y":13, "vertical":false}, {"x":4, "y":14, "vertical":false}, {"x":5, "y":14, "vertical":false}, {"x":4, "y":13, "vertical":true}, {"x":6, "y":13, "vertical":true}, {"x":9, "y":13, "vertical":false}, {"x":10, "y":13, "vertical":false}, {"x":9, "y":14, "vertical":false}, {"x":10, "y":14, "vertical":false}, {"x":9, "y":13, "vertical":true}, {"x":11, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":false}, {"x":14, "y":14, "vertical":false}, {"x":11, "y":11, "vertical":false}, {"x":13, "y":11, "vertical":false}, {"x":11, "y":12, "vertical":false}, {"x":12, "y":11, "vertical":false}, {"x":12, "y":13, "vertical":false}, {"x":13, "y":12, "vertical":false}, {"x":14, "y":11, "vertical":true}, {"x":12, "y":12, "vertical":true}, {"x":11, "y":11, "vertical":true}, {"x":13, "y":12, "vertical":true} ], "transform":[ { "type":"formula", "expr":"datum.x+'-'+datum.y+'-'+datum.vertical", "as":"key" } ] } ] })46:T9c2,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"group", "from":{"data":"rows"}, "encode":{ "enter":{ "y":{"field":"data", "scale":"scaleY"} } }, "marks":[ { "type": "rect", "from":{"data":"columns"}, "encode":{ "enter":{ "x":{"field":"data", "scale":"scaleX"}, "width":{"band":true, "scale":"scaleX"}, "height":{"band":true, "scale":"scaleY"}, "stroke":{"value":"black"}, "fill":{"value":"steelblue"} } } }, { "type":"text", "from":{"data":"columns"}, "encode":{ "enter":{ "x":{"field":"data", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"signal":"blockSize/2"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "text":{"signal":"datum.data + '-' + parent.data"}, "fontSize":{"signal":"14*sizeFactor"} } } } ] } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] } ] })47:T4b1,md `- "grid" contains the grid size (the number of blocks horizontally and vertically) - "blockSize" will represent the size of a block proportionally to the width and height and of the visualization and the size of the grid. As we want the grid to fit the visualization, we divide the minimum size between the width and height of the visualization by the maximum size of the grid. - "rangeWidthDelta" and "rangeHeightDelta" will represent the half of unoccupied space in the grid when "width" and "height" of the visualization or "width" and "height" of the grid are not the same. This will ensure that our gaming area is always centered in the visualization - "sizeFactor" is very useful to create responsive labels or symbols. Using the "blockSize" as reference in a proportion with numbers that will set the factor to 1 when developing your visualization. You will then multiply properties related to size (such as "fontSize", or "symbolSize") by that factor to keep them in the same proportions as the designing time. Sometimes it’s also useful to use a min and or a max value for that factor, to ensure to avoid objects becoming too big or too small. It also requires the following data: `48:T438,([{ "type":"group", "from":{"data":"rows"}, "encode":{ "enter":{ "y":{"field":"data", "scale":"scaleY"} } }, "marks":[ { "type": "rect", "from":{"data":"columns"}, "encode":{ "enter":{ "x":{"field":"data", "scale":"scaleX"}, "width":{"band":true, "scale":"scaleX"}, "height":{"band":true, "scale":"scaleY"}, "stroke":{"value":"black"}, "fill":{"value":"steelblue"} } } }, { "type":"text", "from":{"data":"columns"}, "encode":{ "enter":{ "x":{"field":"data", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"signal":"blockSize/2"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "text":{"signal":"datum.data + '-' + parent.data"}, "fontSize":{"signal":"14*sizeFactor"} } } } ] }])49:T1124,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset)))"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset)"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" } ] } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"group", "from":{"data":"rows"}, "encode":{ "enter":{ "y":{"field":"data", "scale":"scaleY"} } }, "marks":[ { "type": "rect", "from":{"data":"columns"}, "encode":{ "enter":{ "x":{"field":"data", "scale":"scaleX"}, "width":{"band":true, "scale":"scaleX"}, "height":{"band":true, "scale":"scaleY"}, "stroke":{"value":"blue"}, "fill":{"value":"black"} } } } ] }, { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] } ] })4a:T435,([{ "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset)))"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset)"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" } ] }])4b:T517,([{ "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] }])4c:T3e3f,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" } ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"pacManCanMoveX ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY" } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] }, { "type":"rect", "from":{"data":"walls"}, "encode":{ "enter":{ "x":{"signal":"datum.x < grid.width ? datum.x : grid.width-1", "scale":"scaleX", "offset":{"signal":"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0"}}, "y":{"signal":"datum.y < grid.height ? datum.y : grid.height-1", "scale":"scaleY", "offset":{"signal":"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10"}}, "fill":{"value":"blue"}, "width":{"signal":"datum.vertical?blockSize/10:blockSize"}, "height":{"signal":"datum.vertical?blockSize:blockSize/10"} } } } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] }, { "name":"walls", "values":[ {"x":0, "y":0, "vertical":false}, {"x":1, "y":0, "vertical":false}, {"x":2, "y":0, "vertical":false}, {"x":3, "y":0, "vertical":false}, {"x":4, "y":0, "vertical":false}, {"x":5, "y":0, "vertical":false}, {"x":6, "y":0, "vertical":false}, {"x":7, "y":0, "vertical":false}, {"x":8, "y":0, "vertical":false}, {"x":9, "y":0, "vertical":false}, {"x":10, "y":0, "vertical":false}, {"x":11, "y":0, "vertical":false}, {"x":12, "y":0, "vertical":false}, {"x":13, "y":0, "vertical":false}, {"x":14, "y":0, "vertical":false}, {"x":0, "y":15, "vertical":false}, {"x":1, "y":15, "vertical":false}, {"x":2, "y":15, "vertical":false}, {"x":3, "y":15, "vertical":false}, {"x":4, "y":15, "vertical":false}, {"x":5, "y":15, "vertical":false}, {"x":6, "y":15, "vertical":false}, {"x":7, "y":15, "vertical":false}, {"x":8, "y":15, "vertical":false}, {"x":9, "y":15, "vertical":false}, {"x":10, "y":15, "vertical":false}, {"x":11, "y":15, "vertical":false}, {"x":12, "y":15, "vertical":false}, {"x":13, "y":15, "vertical":false}, {"x":14, "y":15, "vertical":false}, {"x":0, "y":0, "vertical":true}, {"x":0, "y":1, "vertical":true}, {"x":0, "y":2, "vertical":true}, {"x":0, "y":3, "vertical":true}, {"x":0, "y":4, "vertical":true}, {"x":0, "y":5, "vertical":false}, {"x":1, "y":5, "vertical":false}, {"x":2, "y":5, "vertical":false}, {"x":0, "y":7, "vertical":false}, {"x":1, "y":7, "vertical":false}, {"x":2, "y":7, "vertical":false}, {"x":0, "y":8, "vertical":false}, {"x":1, "y":8, "vertical":false}, {"x":0, "y":10, "vertical":false}, {"x":1, "y":10, "vertical":false}, {"x":2, "y":10, "vertical":false}, {"x":2, "y":8, "vertical":false}, {"x":3, "y":5, "vertical":true}, {"x":3, "y":6, "vertical":true}, {"x":3, "y":8, "vertical":true}, {"x":3, "y":9, "vertical":true}, {"x":0, "y":10, "vertical":true}, {"x":0, "y":11, "vertical":true}, {"x":0, "y":12, "vertical":true}, {"x":0, "y":13, "vertical":true}, {"x":0, "y":14, "vertical":true}, {"x":15, "y":0, "vertical":true}, {"x":15, "y":1, "vertical":true}, {"x":15, "y":2, "vertical":true}, {"x":15, "y":3, "vertical":true}, {"x":15, "y":4, "vertical":true}, {"x":12, "y":5, "vertical":true}, {"x":14, "y":5, "vertical":false}, {"x":13, "y":5, "vertical":false}, {"x":14, "y":7, "vertical":false}, {"x":13, "y":7, "vertical":false}, {"x":12, "y":7, "vertical":false}, {"x":12, "y":5, "vertical":false}, {"x":12, "y":6, "vertical":true}, {"x":14, "y":8, "vertical":false}, {"x":13, "y":8, "vertical":false}, {"x":14, "y":10, "vertical":false}, {"x":13, "y":10, "vertical":false}, {"x":12, "y":10, "vertical":false}, {"x":12, "y":8, "vertical":false}, {"x":12, "y":8, "vertical":true}, {"x":12, "y":9, "vertical":true}, {"x":15, "y":10, "vertical":true}, {"x":15, "y":11, "vertical":true}, {"x":15, "y":12, "vertical":true}, {"x":15, "y":13, "vertical":true}, {"x":15, "y":14, "vertical":true}, {"x":6, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":6, "vertical":false}, {"x":8, "y":5, "vertical":true}, {"x":8, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":3, "vertical":false}, {"x":8, "y":3, "vertical":false}, {"x":6, "y":3, "vertical":false}, {"x":6, "y":4, "vertical":true}, {"x":9, "y":3, "vertical":true}, {"x":9, "y":4, "vertical":true}, {"x":6, "y":3, "vertical":true}, {"x":3, "y":3, "vertical":false}, {"x":4, "y":3, "vertical":false}, {"x":3, "y":3, "vertical":true}, {"x":5, "y":3, "vertical":true}, {"x":3, "y":4, "vertical":false}, {"x":4, "y":4, "vertical":true}, {"x":5, "y":4, "vertical":true}, {"x":4, "y":5, "vertical":true}, {"x":5, "y":5, "vertical":true}, {"x":4, "y":6, "vertical":false}, {"x":10, "y":3, "vertical":false}, {"x":11, "y":3, "vertical":false}, {"x":10, "y":3, "vertical":true}, {"x":12, "y":3, "vertical":true}, {"x":11, "y":4, "vertical":false}, {"x":10, "y":4, "vertical":true}, {"x":11, "y":4, "vertical":true}, {"x":10, "y":5, "vertical":true}, {"x":11, "y":5, "vertical":true}, {"x":10, "y":6, "vertical":false}, {"x":1, "y":1, "vertical":true}, {"x":1, "y":1, "vertical":false}, {"x":2, "y":1, "vertical":false}, {"x":1, "y":2, "vertical":false}, {"x":2, "y":2, "vertical":false}, {"x":3, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":false}, {"x":4, "y":2, "vertical":false}, {"x":5, "y":1, "vertical":false}, {"x":6, "y":1, "vertical":false}, {"x":5, "y":2, "vertical":false}, {"x":6, "y":2, "vertical":false}, {"x":7, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":false}, {"x":9, "y":1, "vertical":false}, {"x":8, "y":2, "vertical":false}, {"x":9, "y":2, "vertical":false}, {"x":11, "y":1, "vertical":true}, {"x":10, "y":1, "vertical":false}, {"x":10, "y":2, "vertical":false}, {"x":12, "y":1, "vertical":true}, {"x":12, "y":1, "vertical":false}, {"x":13, "y":1, "vertical":false}, {"x":12, "y":2, "vertical":false}, {"x":13, "y":2, "vertical":false}, {"x":14, "y":1, "vertical":true}, {"x":1, "y":3, "vertical":true}, {"x":2, "y":3, "vertical":true}, {"x":1, "y":3, "vertical":false}, {"x":13, "y":4, "vertical":false}, {"x":13, "y":3, "vertical":true}, {"x":14, "y":3, "vertical":true}, {"x":13, "y":3, "vertical":false}, {"x":1, "y":4, "vertical":false}, {"x":6, "y":7, "vertical":true}, {"x":9, "y":7, "vertical":true}, {"x":7, "y":8, "vertical":false}, {"x":6, "y":8, "vertical":false}, {"x":8, "y":8, "vertical":false}, {"x":4, "y":7, "vertical":false}, {"x":4, "y":10, "vertical":false}, {"x":5, "y":10, "vertical":false}, {"x":6, "y":10, "vertical":false}, {"x":4, "y":7, "vertical":true}, {"x":4, "y":8, "vertical":true}, {"x":4, "y":9, "vertical":true}, {"x":5, "y":7, "vertical":true}, {"x":5, "y":8, "vertical":true}, {"x":7, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":6, "y":9, "vertical":false}, {"x":5, "y":9, "vertical":false}, {"x":10, "y":7, "vertical":false}, {"x":10, "y":10, "vertical":false}, {"x":9, "y":10, "vertical":false}, {"x":8, "y":10, "vertical":false}, {"x":10, "y":7, "vertical":true}, {"x":10, "y":8, "vertical":true}, {"x":11, "y":9, "vertical":true}, {"x":11, "y":7, "vertical":true}, {"x":11, "y":8, "vertical":true}, {"x":8, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":9, "y":9, "vertical":false}, {"x":8, "y":9, "vertical":false}, {"x":5, "y":11, "vertical":false}, {"x":6, "y":11, "vertical":false}, {"x":7, "y":11, "vertical":false}, {"x":8, "y":11, "vertical":false}, {"x":9, "y":11, "vertical":false}, {"x":10, "y":11, "vertical":true}, {"x":5, "y":11, "vertical":true}, {"x":5, "y":12, "vertical":false}, {"x":6, "y":12, "vertical":false}, {"x":8, "y":12, "vertical":false}, {"x":9, "y":12, "vertical":false}, {"x":7, "y":12, "vertical":true}, {"x":8, "y":12, "vertical":true}, {"x":7, "y":13, "vertical":true}, {"x":8, "y":13, "vertical":true}, {"x":7, "y":14, "vertical":false}, {"x":1, "y":13, "vertical":true}, {"x":0, "y":13, "vertical":false}, {"x":0, "y":14, "vertical":false}, {"x":2, "y":11, "vertical":false}, {"x":3, "y":11, "vertical":false}, {"x":1, "y":12, "vertical":false}, {"x":1, "y":11, "vertical":false}, {"x":2, "y":13, "vertical":false}, {"x":3, "y":12, "vertical":false}, {"x":4, "y":11, "vertical":true}, {"x":2, "y":12, "vertical":true}, {"x":1, "y":11, "vertical":true}, {"x":3, "y":12, "vertical":true}, {"x":4, "y":13, "vertical":false}, {"x":5, "y":13, "vertical":false}, {"x":4, "y":14, "vertical":false}, {"x":5, "y":14, "vertical":false}, {"x":4, "y":13, "vertical":true}, {"x":6, "y":13, "vertical":true}, {"x":9, "y":13, "vertical":false}, {"x":10, "y":13, "vertical":false}, {"x":9, "y":14, "vertical":false}, {"x":10, "y":14, "vertical":false}, {"x":9, "y":13, "vertical":true}, {"x":11, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":false}, {"x":14, "y":14, "vertical":false}, {"x":11, "y":11, "vertical":false}, {"x":13, "y":11, "vertical":false}, {"x":11, "y":12, "vertical":false}, {"x":12, "y":11, "vertical":false}, {"x":12, "y":13, "vertical":false}, {"x":13, "y":12, "vertical":false}, {"x":14, "y":11, "vertical":true}, {"x":12, "y":12, "vertical":true}, {"x":11, "y":11, "vertical":true}, {"x":13, "y":12, "vertical":true} ], "transform":[ { "type":"formula", "expr":"datum.x+'-'+datum.y+'-'+datum.vertical", "as":"key" } ] } ] })4d:T4e0,([{ "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"pacManCanMoveX ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY" }])4e:T575d,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" }, { "events":{"signal":"restart"}, "update":"null" } ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!restart && pacManCanMoveX ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"}, {"events":{"signal":"restart"}, "update":"7"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!restart && pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"}, {"events":{"signal":"restart"}, "update":"7"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY" }, { "name":"win", "update":"length(data('gums')) + length(data('powerGums')) === length(data('eatenGums'))" }, { "name":"restart", "update":"win === true" }, { "name":"testEaten", "update":"!restart && (indata('gums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"testPowerEaten", "update":"!restart && (indata('powerGums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"superPower", "init":"0", "on": [{"events":{"type":"timer", "throttle": 1000}, "force": true, "update":"superPower > 0 ? superPower - 1 : 0"}, {"events":{"signal":"testPowerEaten"}, "update":"testPowerEaten? 15 : superPower"}, {"events":{"signal":"restart"}, "update":"0"}] } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"rect", "from":{"data":"walls"}, "encode":{ "enter":{ "x":{"signal":"datum.x < grid.width ? datum.x : grid.width-1", "scale":"scaleX", "offset":{"signal":"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0"}}, "y":{"signal":"datum.y < grid.height ? datum.y : grid.height-1", "scale":"scaleY", "offset":{"signal":"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10"}}, "fill":{"value":"blue"}, "width":{"signal":"datum.vertical?blockSize/10:blockSize"}, "height":{"signal":"datum.vertical?blockSize:blockSize/10"} } } }, { "type":"symbol", "from":{"data":"gums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"grey"}, "size":{"signal":"pow(10*sizeFactor, 2)"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"symbol", "from":{"data":"powerGums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "size":{"signal":"pow(18*sizeFactor, 2)"}, "fill":{"value":"white"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"superPower ? 'red' : 'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] }, { "name":"gums", "values":[ {"x":0, "y":1}, {"x":0, "y":2}, {"x":0, "y":3}, {"x":0, "y":4}, {"x":0, "y":7}, {"x":0, "y":10}, {"x":0, "y":11}, {"x":0, "y":12}, {"x":0, "y":14}, {"x":1, "y":0}, {"x":1, "y":2}, {"x":1, "y":4}, {"x":1, "y":7}, {"x":1, "y":10}, {"x":1, "y":12}, {"x":1, "y":13}, {"x":1, "y":14}, {"x":2, "y":0}, {"x":2, "y":2}, {"x":2, "y":3}, {"x":2, "y":4}, {"x":2, "y":7}, {"x":2, "y":10}, {"x":2, "y":13}, {"x":2, "y":14}, {"x":3, "y":0}, {"x":3, "y":1}, {"x":3, "y":2}, {"x":3, "y":4}, {"x":3, "y":5}, {"x":3, "y":6}, {"x":3, "y":7}, {"x":3, "y":8}, {"x":3, "y":9}, {"x":3, "y":10}, {"x":3, "y":12}, {"x":3, "y":13}, {"x":3, "y":14}, {"x":4, "y":0}, {"x":4, "y":2}, {"x":4, "y":6}, {"x":4, "y":10}, {"x":4, "y":11}, {"x":4, "y":12}, {"x":4, "y":14}, {"x":5, "y":0}, {"x":5, "y":2}, {"x":5, "y":3}, {"x":5, "y":4}, {"x":5, "y":5}, {"x":5, "y":6}, {"x":5, "y":7}, {"x":5, "y":8}, {"x":5, "y":10}, {"x":5, "y":12}, {"x":5, "y":14}, {"x":6, "y":0}, {"x":6, "y":2}, {"x":6, "y":5}, {"x":6, "y":6}, {"x":6, "y":7}, {"x":6, "y":8}, {"x":6, "y":10}, {"x":6, "y":12}, {"x":6, "y":13}, {"x":6, "y":14}, {"x":7, "y":0}, {"x":7, "y":1}, {"x":7, "y":2}, {"x":7, "y":6}, {"x":7, "y":8}, {"x":7, "y":9}, {"x":7, "y":10}, {"x":7, "y":14}, {"x":14, "y":0}, {"x":14, "y":1}, {"x":14, "y":2}, {"x":14, "y":3}, {"x":14, "y":4}, {"x":14, "y":7}, {"x":14, "y":10}, {"x":14, "y":11}, {"x":14, "y":12}, {"x":14, "y":14}, {"x":13, "y":0}, {"x":13, "y":2}, {"x":13, "y":4}, {"x":13, "y":7}, {"x":13, "y":10}, {"x":13, "y":12}, {"x":13, "y":13}, {"x":13, "y":14}, {"x":12, "y":0}, {"x":12, "y":2}, {"x":12, "y":3}, {"x":12, "y":4}, {"x":12, "y":7}, {"x":12, "y":10}, {"x":12, "y":13}, {"x":12, "y":14}, {"x":11, "y":0}, {"x":11, "y":1}, {"x":11, "y":2}, {"x":11, "y":4}, {"x":11, "y":5}, {"x":11, "y":6}, {"x":11, "y":7}, {"x":11, "y":8}, {"x":11, "y":9}, {"x":11, "y":10}, {"x":11, "y":12}, {"x":11, "y":13}, {"x":11, "y":14}, {"x":10, "y":0}, {"x":10, "y":2}, {"x":10, "y":6}, {"x":10, "y":10}, {"x":10, "y":11}, {"x":10, "y":12}, {"x":10, "y":14}, {"x":9, "y":0}, {"x":9, "y":2}, {"x":9, "y":3}, {"x":9, "y":4}, {"x":9, "y":5}, {"x":9, "y":6}, {"x":9, "y":7}, {"x":9, "y":8}, {"x":9, "y":10}, {"x":9, "y":12}, {"x":9, "y":14}, {"x":8, "y":0}, {"x":8, "y":2}, {"x":8, "y":5}, {"x":8, "y":6}, {"x":8, "y":7}, {"x":8, "y":8}, {"x":8, "y":10}, {"x":8, "y":12}, {"x":8, "y":13}, {"x":8, "y":14} ], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"powerGums", "values":[{"x":0, "y":0},{"x":14, "y":0}, {"x":0, "y":14}, {"x":14, "y":14}], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"eatenGums", "on":[ { "trigger":"testEaten", "insert":"testEaten" }, { "trigger":"testPowerEaten", "insert":"testPowerEaten" }, { "trigger":"restart", "remove":"restart" } ] }, { "name":"walls", "values":[ {"x":0, "y":0, "vertical":false}, {"x":1, "y":0, "vertical":false}, {"x":2, "y":0, "vertical":false}, {"x":3, "y":0, "vertical":false}, {"x":4, "y":0, "vertical":false}, {"x":5, "y":0, "vertical":false}, {"x":6, "y":0, "vertical":false}, {"x":7, "y":0, "vertical":false}, {"x":8, "y":0, "vertical":false}, {"x":9, "y":0, "vertical":false}, {"x":10, "y":0, "vertical":false}, {"x":11, "y":0, "vertical":false}, {"x":12, "y":0, "vertical":false}, {"x":13, "y":0, "vertical":false}, {"x":14, "y":0, "vertical":false}, {"x":0, "y":15, "vertical":false}, {"x":1, "y":15, "vertical":false}, {"x":2, "y":15, "vertical":false}, {"x":3, "y":15, "vertical":false}, {"x":4, "y":15, "vertical":false}, {"x":5, "y":15, "vertical":false}, {"x":6, "y":15, "vertical":false}, {"x":7, "y":15, "vertical":false}, {"x":8, "y":15, "vertical":false}, {"x":9, "y":15, "vertical":false}, {"x":10, "y":15, "vertical":false}, {"x":11, "y":15, "vertical":false}, {"x":12, "y":15, "vertical":false}, {"x":13, "y":15, "vertical":false}, {"x":14, "y":15, "vertical":false}, {"x":0, "y":0, "vertical":true}, {"x":0, "y":1, "vertical":true}, {"x":0, "y":2, "vertical":true}, {"x":0, "y":3, "vertical":true}, {"x":0, "y":4, "vertical":true}, {"x":0, "y":5, "vertical":false}, {"x":1, "y":5, "vertical":false}, {"x":2, "y":5, "vertical":false}, {"x":0, "y":7, "vertical":false}, {"x":1, "y":7, "vertical":false}, {"x":2, "y":7, "vertical":false}, {"x":0, "y":8, "vertical":false}, {"x":1, "y":8, "vertical":false}, {"x":0, "y":10, "vertical":false}, {"x":1, "y":10, "vertical":false}, {"x":2, "y":10, "vertical":false}, {"x":2, "y":8, "vertical":false}, {"x":3, "y":5, "vertical":true}, {"x":3, "y":6, "vertical":true}, {"x":3, "y":8, "vertical":true}, {"x":3, "y":9, "vertical":true}, {"x":0, "y":10, "vertical":true}, {"x":0, "y":11, "vertical":true}, {"x":0, "y":12, "vertical":true}, {"x":0, "y":13, "vertical":true}, {"x":0, "y":14, "vertical":true}, {"x":15, "y":0, "vertical":true}, {"x":15, "y":1, "vertical":true}, {"x":15, "y":2, "vertical":true}, {"x":15, "y":3, "vertical":true}, {"x":15, "y":4, "vertical":true}, {"x":12, "y":5, "vertical":true}, {"x":14, "y":5, "vertical":false}, {"x":13, "y":5, "vertical":false}, {"x":14, "y":7, "vertical":false}, {"x":13, "y":7, "vertical":false}, {"x":12, "y":7, "vertical":false}, {"x":12, "y":5, "vertical":false}, {"x":12, "y":6, "vertical":true}, {"x":14, "y":8, "vertical":false}, {"x":13, "y":8, "vertical":false}, {"x":14, "y":10, "vertical":false}, {"x":13, "y":10, "vertical":false}, {"x":12, "y":10, "vertical":false}, {"x":12, "y":8, "vertical":false}, {"x":12, "y":8, "vertical":true}, {"x":12, "y":9, "vertical":true}, {"x":15, "y":10, "vertical":true}, {"x":15, "y":11, "vertical":true}, {"x":15, "y":12, "vertical":true}, {"x":15, "y":13, "vertical":true}, {"x":15, "y":14, "vertical":true}, {"x":6, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":6, "vertical":false}, {"x":8, "y":5, "vertical":true}, {"x":8, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":3, "vertical":false}, {"x":8, "y":3, "vertical":false}, {"x":6, "y":3, "vertical":false}, {"x":6, "y":4, "vertical":true}, {"x":9, "y":3, "vertical":true}, {"x":9, "y":4, "vertical":true}, {"x":6, "y":3, "vertical":true}, {"x":3, "y":3, "vertical":false}, {"x":4, "y":3, "vertical":false}, {"x":3, "y":3, "vertical":true}, {"x":5, "y":3, "vertical":true}, {"x":3, "y":4, "vertical":false}, {"x":4, "y":4, "vertical":true}, {"x":5, "y":4, "vertical":true}, {"x":4, "y":5, "vertical":true}, {"x":5, "y":5, "vertical":true}, {"x":4, "y":6, "vertical":false}, {"x":10, "y":3, "vertical":false}, {"x":11, "y":3, "vertical":false}, {"x":10, "y":3, "vertical":true}, {"x":12, "y":3, "vertical":true}, {"x":11, "y":4, "vertical":false}, {"x":10, "y":4, "vertical":true}, {"x":11, "y":4, "vertical":true}, {"x":10, "y":5, "vertical":true}, {"x":11, "y":5, "vertical":true}, {"x":10, "y":6, "vertical":false}, {"x":1, "y":1, "vertical":true}, {"x":1, "y":1, "vertical":false}, {"x":2, "y":1, "vertical":false}, {"x":1, "y":2, "vertical":false}, {"x":2, "y":2, "vertical":false}, {"x":3, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":false}, {"x":4, "y":2, "vertical":false}, {"x":5, "y":1, "vertical":false}, {"x":6, "y":1, "vertical":false}, {"x":5, "y":2, "vertical":false}, {"x":6, "y":2, "vertical":false}, {"x":7, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":false}, {"x":9, "y":1, "vertical":false}, {"x":8, "y":2, "vertical":false}, {"x":9, "y":2, "vertical":false}, {"x":11, "y":1, "vertical":true}, {"x":10, "y":1, "vertical":false}, {"x":10, "y":2, "vertical":false}, {"x":12, "y":1, "vertical":true}, {"x":12, "y":1, "vertical":false}, {"x":13, "y":1, "vertical":false}, {"x":12, "y":2, "vertical":false}, {"x":13, "y":2, "vertical":false}, {"x":14, "y":1, "vertical":true}, {"x":1, "y":3, "vertical":true}, {"x":2, "y":3, "vertical":true}, {"x":1, "y":3, "vertical":false}, {"x":13, "y":4, "vertical":false}, {"x":13, "y":3, "vertical":true}, {"x":14, "y":3, "vertical":true}, {"x":13, "y":3, "vertical":false}, {"x":1, "y":4, "vertical":false}, {"x":6, "y":7, "vertical":true}, {"x":9, "y":7, "vertical":true}, {"x":7, "y":8, "vertical":false}, {"x":6, "y":8, "vertical":false}, {"x":8, "y":8, "vertical":false}, {"x":4, "y":7, "vertical":false}, {"x":4, "y":10, "vertical":false}, {"x":5, "y":10, "vertical":false}, {"x":6, "y":10, "vertical":false}, {"x":4, "y":7, "vertical":true}, {"x":4, "y":8, "vertical":true}, {"x":4, "y":9, "vertical":true}, {"x":5, "y":7, "vertical":true}, {"x":5, "y":8, "vertical":true}, {"x":7, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":6, "y":9, "vertical":false}, {"x":5, "y":9, "vertical":false}, {"x":10, "y":7, "vertical":false}, {"x":10, "y":10, "vertical":false}, {"x":9, "y":10, "vertical":false}, {"x":8, "y":10, "vertical":false}, {"x":10, "y":7, "vertical":true}, {"x":10, "y":8, "vertical":true}, {"x":11, "y":9, "vertical":true}, {"x":11, "y":7, "vertical":true}, {"x":11, "y":8, "vertical":true}, {"x":8, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":9, "y":9, "vertical":false}, {"x":8, "y":9, "vertical":false}, {"x":5, "y":11, "vertical":false}, {"x":6, "y":11, "vertical":false}, {"x":7, "y":11, "vertical":false}, {"x":8, "y":11, "vertical":false}, {"x":9, "y":11, "vertical":false}, {"x":10, "y":11, "vertical":true}, {"x":5, "y":11, "vertical":true}, {"x":5, "y":12, "vertical":false}, {"x":6, "y":12, "vertical":false}, {"x":8, "y":12, "vertical":false}, {"x":9, "y":12, "vertical":false}, {"x":7, "y":12, "vertical":true}, {"x":8, "y":12, "vertical":true}, {"x":7, "y":13, "vertical":true}, {"x":8, "y":13, "vertical":true}, {"x":7, "y":14, "vertical":false}, {"x":1, "y":13, "vertical":true}, {"x":0, "y":13, "vertical":false}, {"x":0, "y":14, "vertical":false}, {"x":2, "y":11, "vertical":false}, {"x":3, "y":11, "vertical":false}, {"x":1, "y":12, "vertical":false}, {"x":1, "y":11, "vertical":false}, {"x":2, "y":13, "vertical":false}, {"x":3, "y":12, "vertical":false}, {"x":4, "y":11, "vertical":true}, {"x":2, "y":12, "vertical":true}, {"x":1, "y":11, "vertical":true}, {"x":3, "y":12, "vertical":true}, {"x":4, "y":13, "vertical":false}, {"x":5, "y":13, "vertical":false}, {"x":4, "y":14, "vertical":false}, {"x":5, "y":14, "vertical":false}, {"x":4, "y":13, "vertical":true}, {"x":6, "y":13, "vertical":true}, {"x":9, "y":13, "vertical":false}, {"x":10, "y":13, "vertical":false}, {"x":9, "y":14, "vertical":false}, {"x":10, "y":14, "vertical":false}, {"x":9, "y":13, "vertical":true}, {"x":11, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":false}, {"x":14, "y":14, "vertical":false}, {"x":11, "y":11, "vertical":false}, {"x":13, "y":11, "vertical":false}, {"x":11, "y":12, "vertical":false}, {"x":12, "y":11, "vertical":false}, {"x":12, "y":13, "vertical":false}, {"x":13, "y":12, "vertical":false}, {"x":14, "y":11, "vertical":true}, {"x":12, "y":12, "vertical":true}, {"x":11, "y":11, "vertical":true}, {"x":13, "y":12, "vertical":true} ], "transform":[ { "type":"formula", "expr":"datum.x+'-'+datum.y+'-'+datum.vertical", "as":"key" } ] } ] })4f:T7db4,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" }, { "events":{"signal":"restart"}, "force": true, "update":"null" } ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"(!restart && pacManCanMoveX) ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!restart && pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX && !pacManHasGhost" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY && !pacManHasGhost" }, { "name":"pacManHasGhost", "update":"!superPower && ((pacManX + pacManXOffset === gRedX) && (pacManY + pacManYOffset === gRedY))" }, { "name":"win", "update":"length(data('gums')) + length(data('powerGums')) === length(data('eatenGums'))" }, { "name":"loose", "on":[{"events":{"type":"timer", "throttle": 400 }, "update":"!superPower && (pacManX === gRedX && pacManY === gRedY)"}] }, { "name":"restart", "update":"win === true || loose === true" }, { "name":"testEaten", "update":"!restart && (indata('gums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"testPowerEaten", "update":"!restart && (indata('powerGums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"superPower", "init":"0", "on": [{"events":{"type":"timer", "throttle": 1000}, "force": true, "update":"superPower > 0 ? superPower - 1 : 0"}, {"events":{"signal":"testPowerEaten"}, "update":"testPowerEaten? 15 : superPower"}, {"events":{"signal":"restart"}, "force": true, "update":"0"}] } , { "name":"testEatenGhost", "update":"superPower ? ((gRedX === pacManX && gRedY === pacManY) ? gRed : null) : null" }, { "name":"gRed", "init":"data('ghosts')[0]" }, { "name":"gRedDelta", "update":"{dx:pacManX-gRedX, dy: pacManY-gRedY}" }, { "name":"gRedLastDir", "update":"gRedDirection" }, { "name":"gRedPreferences", "update":"setdata('gRedDecisions',[{d:'up', i: (gRedLastDir === 'down' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gRedLastDir === 'up' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gRedLastDir === 'right' ? 4 : (abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gRedLastDir === 'left' ? 4 : abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gRedHasWallX", "update":"(gRedOffsetX<0 && !gRedCanLeft) || (gRedOffsetX>0 && !gRedCanRight) ? true : false" }, { "name":"gRedHasWallY", "update":"(gRedOffsetY<0 && !gRedCanUp) || (gRedOffsetY>0 && !gRedCanDown) ? true : false" }, { "name":"gRedCanLeft", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanUp", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-false')? false : true" }, { "name":"gRedCanRight", "update":"indata('walls', 'key', (gRedX + 1) + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanDown", "update":"indata('walls', 'key', gRedX + '-' + (gRedY+1) + '-false')? false : true" }, { "name":"gRedHasPacMan", "update":"superPower && ((gRedX + gRedOffsetX === pacManX) && (gRedY + gRedOffsetY === pacManY))" }, { "name":"gRedBlocked", "on": [ { "events":{"signal":"gRedProposedDirection"}, "force": true, "update":"!gRedProposedDirection ||(gRedProposedDirection === 'up' && !gRedCanUp) || (gRedProposedDirection === 'down' && !gRedCanDown) || (gRedProposedDirection === 'left' && !gRedCanLeft) || (gRedProposedDirection === 'right' && !gRedCanRight) ? true : false" } ] }, { "name":"gRedTry", "on": [ { "events":{"type":"timer", "throttle": 350}, "update":"gRedBlocked && gRedTry <3 ? gRedTry+1 : 0" } ] }, { "name":"gRedDecision", "update":"data('gRedDecisions')[gRedTry]" }, { "name":"gRedProposedDirection", "on": [{"events":{"signal":"gRedDecision"}, "force": true, "update":"gRedDecision ? gRedDecision.d : 'none'"}] }, { "name":"gRedDirection", "update":"gRedProposedDirection && !gRedBlocked ? gRedProposedDirection : gRedDirection" }, { "name":"gRedOffsetX", "update":"gRedDirection === 'left'? - 1 : gRedDirection === 'right'? 1 : 0" }, { "name":"gRedOffsetY", "update":"gRedDirection === 'up'? -1 : gRedDirection === 'down' ? 1 : 0" }, { "name":"gRedX", "init":"gRed.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 6 : (!restart && !gRedHasWallX && !gRedHasPacMan ? ((gRedOffsetX <0 && gRedX <= 0) ? grid.width - 1 : ((gRedOffsetX > 0 && gRedX >= grid.width -1) ? 0 : (gRedX + gRedOffsetX))) : gRedX)" }, { "events":{"signal":"restart"}, "update":"gRed.x", "force": true } ] }, { "name":"gRedY", "init":"gRed.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 7 : (!restart && !gRedHasWallY && !gRedHasPacMan ? ((gRedOffsetY <0 && gRedY <= 0) ? grid.height-1 : (gRedOffsetY > 0 && gRedY >= grid.height - 1)? 0 : gRedY + gRedOffsetY) : gRedY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gRed.y" } ] } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"rect", "from":{"data":"walls"}, "encode":{ "enter":{ "x":{"signal":"datum.x < grid.width ? datum.x : grid.width-1", "scale":"scaleX", "offset":{"signal":"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0"}}, "y":{"signal":"datum.y < grid.height ? datum.y : grid.height-1", "scale":"scaleY", "offset":{"signal":"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10"}}, "fill":{"value":"blue"}, "width":{"signal":"datum.vertical?blockSize/10:blockSize"}, "height":{"signal":"datum.vertical?blockSize:blockSize/10"} } } }, { "type":"symbol", "from":{"data":"gums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"grey"}, "size":{"signal":"pow(10*sizeFactor, 2)"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"symbol", "from":{"data":"powerGums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "size":{"signal":"pow(18*sizeFactor, 2)"}, "fill":{"value":"white"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"superPower ? 'red' : 'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] }, { "type":"symbol", "from":{"data":"ghosts"}, "encode":{ "enter":{ "size":{"signal":"pow(blockSize/20,2)"} }, "update":{ "x":{"signal":"gRedX", "offset":{"signal":"blockSize/8"}, "scale":"scaleX"}, "y":{"signal":"gRedY", "offset":{"signal":"blockSize/9"}, "scale":"scaleY"}, "shape":{"signal":"indata('eatenGhosts', 'color', datum.color) ? 'M16.459004,11.555034C15.659003,11.555034 15.009003,12.205034 15.009003,13.005036 15.009003,13.804038 15.659003,14.454039 16.459004,14.454039 17.258005,14.454039 17.909006,13.804038 17.909006,13.005036 17.909006,12.205034 17.258005,11.555034 16.459004,11.555034z M7.5419962,11.555034C6.7429954,11.555034 6.0919949,12.205034 6.0919949,13.005036 6.0919949,13.804038 6.7429954,14.454039 7.5419962,14.454039 8.3419973,14.454039 8.9919979,13.804038 8.9919979,13.005036 8.9919979,12.205034 8.3419973,11.555034 7.5419962,11.555034z M16.459004,9.5550298C18.361006,9.5550298 19.909006,11.103033 19.909006,13.005036 19.909006,14.90804 18.361006,16.454042 16.459004,16.454042 14.557002,16.454042 13.009001,14.90804 13.009001,13.005036 13.009001,11.103033 14.557002,9.5550298 16.459004,9.5550298z M7.5419962,9.5550298C9.4439976,9.5550298 10.991999,11.103033 10.991999,13.005036 10.991999,14.90804 9.4439976,16.454042 7.5419962,16.454042 5.6399948,16.454042 4.091993,14.90804 4.091993,13.005036 4.091993,11.103033 5.6399948,9.5550298 7.5419962,9.5550298z M12,1.9999994C6.4860079,1.9999995,2.0000002,6.3300156,2.0000004,11.650998L2.0000004,28.669975 5.102997,27.200983 8.9929964,29.12896 12.742996,27.202997 16.98201,29.106987 19.895004,27.116999 22,28.439995 22,11.650998C22,6.3300156,17.515,1.9999995,12,1.9999994z M12,0C18.617005,0,24,5.2260117,24,11.650998L24,32.056999 19.940003,29.507988 17.184998,31.390007 12.80101,29.421989 9.0080111,31.369011 5.0820009,29.424004 0,31.827995 0,11.650998C1.8747701E-07,5.2260117,5.3840029,0,12,0z' : 'M13.952596,15.068143C13.767538,15.066144 13.583578,15.095151 13.403586,15.157148 12.252587,15.553147 11.725549,17.163162 12.224572,18.753189 12.725547,20.342192 14.062582,21.309212 15.211566,20.914204 16.362564,20.518204 16.889541,18.908188 16.390579,17.318163 15.968584,15.977162 14.95058,15.077146 13.952596,15.068143z M7.7945876,6.1100698C7.2026091,6.0760732 6.4365583,6.7850791 5.9736071,7.8550807 5.4445558,9.0761004 5.5105953,10.302109 6.1215563,10.590106 6.7316013,10.881108 7.65555,10.126112 8.1855779,8.9070922 8.7145686,7.6860881 8.6485896,6.4610711 8.036592,6.1710754 7.9606028,6.1350642 7.8795486,6.1150752 7.7945876,6.1100698z M15.404559,5.9590679C15.383563,5.9580608 15.362566,5.9580608 15.34157,5.960075 14.674579,6.0020671 14.194539,7.1220723 14.275593,8.4590903 14.354573,9.7981063 14.962543,10.848119 15.631547,10.802114 16.300554,10.759113 16.778579,9.6401005 16.700576,8.3020907 16.622573,7.006074 16.049577,5.980064 15.404559,5.9590679z M12.317589,1.4699259E-05C15.527545,0.0050196948 18.757579,1.2870288 21.236579,3.8010436 24.038576,6.6430793 25.533567,12.005127 25.825559,15.861164 26.09155,19.371191 27.844537,19.518194 30.765552,22.228211 31.592515,22.995216 33.904521,25.825243 28.733512,26.053242 26.619564,26.146244 25.60156,25.739243 21.732549,22.850226 21.235542,22.545214 20.664558,22.733219 20.373542,22.885214 20.017526,23.07122 19.741586,23.925232 19.851572,24.215227 20.16456,25.583237 22.25855,25.135235 23.427553,26.313253 24.41156,27.305252 22.795536,29.807287 18.926586,29.29027 18.926586,29.29027 16.343582,28.587277 13.853597,25.258236 11.910547,25.242245 9.6305823,25.258236 9.6305823,25.258236 9.6305823,25.258236 9.6025672,26.705256 9.6425452,27.10626 10.271573,27.256254 10.777553,27.021252 13.298544,27.736271 14.150593,27.978262 16.663589,31.170292 8.7236018,30.424282 7.0135832,30.263287 7.1875944,30.721283 5.2576051,26.025242 4.2626119,23.604229 2.0076115,22.396212 0.6345674,17.082169 -0.27241354,14.207143 -0.21040192,11.068107 0.84159805,8.2280856 0.97556992,7.8450862 1.1235799,7.5130826 1.2786091,7.1980773 1.8406196,6.0020671 2.5815849,4.8720523 3.5156043,3.863056 5.9166007,1.2680314 9.107573,-0.0049901602 12.317589,1.4699259E-05z'"}, "fill":{"signal":"superPower? 'white' :datum.color"}, "opacity":[{"test":"restart", "value": 0},{"signal":"superPower?0.8:1"}] } } } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] }, { "name":"ghosts", "values":[ { "x":0, "y":0, "color":"red" } ] }, { "name":"eatenGhosts", "on": [{ "trigger":"testEatenGhost", "insert":"testEatenGhost" }, { "trigger":"!superPower", "remove":"!superPower" }] }, { "name":"gRedDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gums", "values":[ {"x":0, "y":1}, {"x":0, "y":2}, {"x":0, "y":3}, {"x":0, "y":4}, {"x":0, "y":7}, {"x":0, "y":10}, {"x":0, "y":11}, {"x":0, "y":12}, {"x":0, "y":14}, {"x":1, "y":0}, {"x":1, "y":2}, {"x":1, "y":4}, {"x":1, "y":7}, {"x":1, "y":10}, {"x":1, "y":12}, {"x":1, "y":13}, {"x":1, "y":14}, {"x":2, "y":0}, {"x":2, "y":2}, {"x":2, "y":3}, {"x":2, "y":4}, {"x":2, "y":7}, {"x":2, "y":10}, {"x":2, "y":13}, {"x":2, "y":14}, {"x":3, "y":0}, {"x":3, "y":1}, {"x":3, "y":2}, {"x":3, "y":4}, {"x":3, "y":5}, {"x":3, "y":6}, {"x":3, "y":7}, {"x":3, "y":8}, {"x":3, "y":9}, {"x":3, "y":10}, {"x":3, "y":12}, {"x":3, "y":13}, {"x":3, "y":14}, {"x":4, "y":0}, {"x":4, "y":2}, {"x":4, "y":6}, {"x":4, "y":10}, {"x":4, "y":11}, {"x":4, "y":12}, {"x":4, "y":14}, {"x":5, "y":0}, {"x":5, "y":2}, {"x":5, "y":3}, {"x":5, "y":4}, {"x":5, "y":5}, {"x":5, "y":6}, {"x":5, "y":7}, {"x":5, "y":8}, {"x":5, "y":10}, {"x":5, "y":12}, {"x":5, "y":14}, {"x":6, "y":0}, {"x":6, "y":2}, {"x":6, "y":5}, {"x":6, "y":6}, {"x":6, "y":7}, {"x":6, "y":8}, {"x":6, "y":10}, {"x":6, "y":12}, {"x":6, "y":13}, {"x":6, "y":14}, {"x":7, "y":0}, {"x":7, "y":1}, {"x":7, "y":2}, {"x":7, "y":6}, {"x":7, "y":8}, {"x":7, "y":9}, {"x":7, "y":10}, {"x":7, "y":14}, {"x":14, "y":0}, {"x":14, "y":1}, {"x":14, "y":2}, {"x":14, "y":3}, {"x":14, "y":4}, {"x":14, "y":7}, {"x":14, "y":10}, {"x":14, "y":11}, {"x":14, "y":12}, {"x":14, "y":14}, {"x":13, "y":0}, {"x":13, "y":2}, {"x":13, "y":4}, {"x":13, "y":7}, {"x":13, "y":10}, {"x":13, "y":12}, {"x":13, "y":13}, {"x":13, "y":14}, {"x":12, "y":0}, {"x":12, "y":2}, {"x":12, "y":3}, {"x":12, "y":4}, {"x":12, "y":7}, {"x":12, "y":10}, {"x":12, "y":13}, {"x":12, "y":14}, {"x":11, "y":0}, {"x":11, "y":1}, {"x":11, "y":2}, {"x":11, "y":4}, {"x":11, "y":5}, {"x":11, "y":6}, {"x":11, "y":7}, {"x":11, "y":8}, {"x":11, "y":9}, {"x":11, "y":10}, {"x":11, "y":12}, {"x":11, "y":13}, {"x":11, "y":14}, {"x":10, "y":0}, {"x":10, "y":2}, {"x":10, "y":6}, {"x":10, "y":10}, {"x":10, "y":11}, {"x":10, "y":12}, {"x":10, "y":14}, {"x":9, "y":0}, {"x":9, "y":2}, {"x":9, "y":3}, {"x":9, "y":4}, {"x":9, "y":5}, {"x":9, "y":6}, {"x":9, "y":7}, {"x":9, "y":8}, {"x":9, "y":10}, {"x":9, "y":12}, {"x":9, "y":14}, {"x":8, "y":0}, {"x":8, "y":2}, {"x":8, "y":5}, {"x":8, "y":6}, {"x":8, "y":7}, {"x":8, "y":8}, {"x":8, "y":10}, {"x":8, "y":12}, {"x":8, "y":13}, {"x":8, "y":14} ], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"powerGums", "values":[{"x":0, "y":0},{"x":14, "y":0}, {"x":0, "y":14}, {"x":14, "y":14}], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"eatenGums", "on":[ { "trigger":"testEaten", "insert":"testEaten" }, { "trigger":"testPowerEaten", "insert":"testPowerEaten" }, { "trigger":"restart", "remove":"restart" } ] }, { "name":"walls", "values":[ {"x":0, "y":0, "vertical":false}, {"x":1, "y":0, "vertical":false}, {"x":2, "y":0, "vertical":false}, {"x":3, "y":0, "vertical":false}, {"x":4, "y":0, "vertical":false}, {"x":5, "y":0, "vertical":false}, {"x":6, "y":0, "vertical":false}, {"x":7, "y":0, "vertical":false}, {"x":8, "y":0, "vertical":false}, {"x":9, "y":0, "vertical":false}, {"x":10, "y":0, "vertical":false}, {"x":11, "y":0, "vertical":false}, {"x":12, "y":0, "vertical":false}, {"x":13, "y":0, "vertical":false}, {"x":14, "y":0, "vertical":false}, {"x":0, "y":15, "vertical":false}, {"x":1, "y":15, "vertical":false}, {"x":2, "y":15, "vertical":false}, {"x":3, "y":15, "vertical":false}, {"x":4, "y":15, "vertical":false}, {"x":5, "y":15, "vertical":false}, {"x":6, "y":15, "vertical":false}, {"x":7, "y":15, "vertical":false}, {"x":8, "y":15, "vertical":false}, {"x":9, "y":15, "vertical":false}, {"x":10, "y":15, "vertical":false}, {"x":11, "y":15, "vertical":false}, {"x":12, "y":15, "vertical":false}, {"x":13, "y":15, "vertical":false}, {"x":14, "y":15, "vertical":false}, {"x":0, "y":0, "vertical":true}, {"x":0, "y":1, "vertical":true}, {"x":0, "y":2, "vertical":true}, {"x":0, "y":3, "vertical":true}, {"x":0, "y":4, "vertical":true}, {"x":0, "y":5, "vertical":false}, {"x":1, "y":5, "vertical":false}, {"x":2, "y":5, "vertical":false}, {"x":0, "y":7, "vertical":false}, {"x":1, "y":7, "vertical":false}, {"x":2, "y":7, "vertical":false}, {"x":0, "y":8, "vertical":false}, {"x":1, "y":8, "vertical":false}, {"x":0, "y":10, "vertical":false}, {"x":1, "y":10, "vertical":false}, {"x":2, "y":10, "vertical":false}, {"x":2, "y":8, "vertical":false}, {"x":3, "y":5, "vertical":true}, {"x":3, "y":6, "vertical":true}, {"x":3, "y":8, "vertical":true}, {"x":3, "y":9, "vertical":true}, {"x":0, "y":10, "vertical":true}, {"x":0, "y":11, "vertical":true}, {"x":0, "y":12, "vertical":true}, {"x":0, "y":13, "vertical":true}, {"x":0, "y":14, "vertical":true}, {"x":15, "y":0, "vertical":true}, {"x":15, "y":1, "vertical":true}, {"x":15, "y":2, "vertical":true}, {"x":15, "y":3, "vertical":true}, {"x":15, "y":4, "vertical":true}, {"x":12, "y":5, "vertical":true}, {"x":14, "y":5, "vertical":false}, {"x":13, "y":5, "vertical":false}, {"x":14, "y":7, "vertical":false}, {"x":13, "y":7, "vertical":false}, {"x":12, "y":7, "vertical":false}, {"x":12, "y":5, "vertical":false}, {"x":12, "y":6, "vertical":true}, {"x":14, "y":8, "vertical":false}, {"x":13, "y":8, "vertical":false}, {"x":14, "y":10, "vertical":false}, {"x":13, "y":10, "vertical":false}, {"x":12, "y":10, "vertical":false}, {"x":12, "y":8, "vertical":false}, {"x":12, "y":8, "vertical":true}, {"x":12, "y":9, "vertical":true}, {"x":15, "y":10, "vertical":true}, {"x":15, "y":11, "vertical":true}, {"x":15, "y":12, "vertical":true}, {"x":15, "y":13, "vertical":true}, {"x":15, "y":14, "vertical":true}, {"x":6, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":6, "vertical":false}, {"x":8, "y":5, "vertical":true}, {"x":8, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":3, "vertical":false}, {"x":8, "y":3, "vertical":false}, {"x":6, "y":3, "vertical":false}, {"x":6, "y":4, "vertical":true}, {"x":9, "y":3, "vertical":true}, {"x":9, "y":4, "vertical":true}, {"x":6, "y":3, "vertical":true}, {"x":3, "y":3, "vertical":false}, {"x":4, "y":3, "vertical":false}, {"x":3, "y":3, "vertical":true}, {"x":5, "y":3, "vertical":true}, {"x":3, "y":4, "vertical":false}, {"x":4, "y":4, "vertical":true}, {"x":5, "y":4, "vertical":true}, {"x":4, "y":5, "vertical":true}, {"x":5, "y":5, "vertical":true}, {"x":4, "y":6, "vertical":false}, {"x":10, "y":3, "vertical":false}, {"x":11, "y":3, "vertical":false}, {"x":10, "y":3, "vertical":true}, {"x":12, "y":3, "vertical":true}, {"x":11, "y":4, "vertical":false}, {"x":10, "y":4, "vertical":true}, {"x":11, "y":4, "vertical":true}, {"x":10, "y":5, "vertical":true}, {"x":11, "y":5, "vertical":true}, {"x":10, "y":6, "vertical":false}, {"x":1, "y":1, "vertical":true}, {"x":1, "y":1, "vertical":false}, {"x":2, "y":1, "vertical":false}, {"x":1, "y":2, "vertical":false}, {"x":2, "y":2, "vertical":false}, {"x":3, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":false}, {"x":4, "y":2, "vertical":false}, {"x":5, "y":1, "vertical":false}, {"x":6, "y":1, "vertical":false}, {"x":5, "y":2, "vertical":false}, {"x":6, "y":2, "vertical":false}, {"x":7, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":false}, {"x":9, "y":1, "vertical":false}, {"x":8, "y":2, "vertical":false}, {"x":9, "y":2, "vertical":false}, {"x":11, "y":1, "vertical":true}, {"x":10, "y":1, "vertical":false}, {"x":10, "y":2, "vertical":false}, {"x":12, "y":1, "vertical":true}, {"x":12, "y":1, "vertical":false}, {"x":13, "y":1, "vertical":false}, {"x":12, "y":2, "vertical":false}, {"x":13, "y":2, "vertical":false}, {"x":14, "y":1, "vertical":true}, {"x":1, "y":3, "vertical":true}, {"x":2, "y":3, "vertical":true}, {"x":1, "y":3, "vertical":false}, {"x":13, "y":4, "vertical":false}, {"x":13, "y":3, "vertical":true}, {"x":14, "y":3, "vertical":true}, {"x":13, "y":3, "vertical":false}, {"x":1, "y":4, "vertical":false}, {"x":6, "y":7, "vertical":true}, {"x":9, "y":7, "vertical":true}, {"x":7, "y":8, "vertical":false}, {"x":6, "y":8, "vertical":false}, {"x":8, "y":8, "vertical":false}, {"x":4, "y":7, "vertical":false}, {"x":4, "y":10, "vertical":false}, {"x":5, "y":10, "vertical":false}, {"x":6, "y":10, "vertical":false}, {"x":4, "y":7, "vertical":true}, {"x":4, "y":8, "vertical":true}, {"x":4, "y":9, "vertical":true}, {"x":5, "y":7, "vertical":true}, {"x":5, "y":8, "vertical":true}, {"x":7, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":6, "y":9, "vertical":false}, {"x":5, "y":9, "vertical":false}, {"x":10, "y":7, "vertical":false}, {"x":10, "y":10, "vertical":false}, {"x":9, "y":10, "vertical":false}, {"x":8, "y":10, "vertical":false}, {"x":10, "y":7, "vertical":true}, {"x":10, "y":8, "vertical":true}, {"x":11, "y":9, "vertical":true}, {"x":11, "y":7, "vertical":true}, {"x":11, "y":8, "vertical":true}, {"x":8, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":9, "y":9, "vertical":false}, {"x":8, "y":9, "vertical":false}, {"x":5, "y":11, "vertical":false}, {"x":6, "y":11, "vertical":false}, {"x":7, "y":11, "vertical":false}, {"x":8, "y":11, "vertical":false}, {"x":9, "y":11, "vertical":false}, {"x":10, "y":11, "vertical":true}, {"x":5, "y":11, "vertical":true}, {"x":5, "y":12, "vertical":false}, {"x":6, "y":12, "vertical":false}, {"x":8, "y":12, "vertical":false}, {"x":9, "y":12, "vertical":false}, {"x":7, "y":12, "vertical":true}, {"x":8, "y":12, "vertical":true}, {"x":7, "y":13, "vertical":true}, {"x":8, "y":13, "vertical":true}, {"x":7, "y":14, "vertical":false}, {"x":1, "y":13, "vertical":true}, {"x":0, "y":13, "vertical":false}, {"x":0, "y":14, "vertical":false}, {"x":2, "y":11, "vertical":false}, {"x":3, "y":11, "vertical":false}, {"x":1, "y":12, "vertical":false}, {"x":1, "y":11, "vertical":false}, {"x":2, "y":13, "vertical":false}, {"x":3, "y":12, "vertical":false}, {"x":4, "y":11, "vertical":true}, {"x":2, "y":12, "vertical":true}, {"x":1, "y":11, "vertical":true}, {"x":3, "y":12, "vertical":true}, {"x":4, "y":13, "vertical":false}, {"x":5, "y":13, "vertical":false}, {"x":4, "y":14, "vertical":false}, {"x":5, "y":14, "vertical":false}, {"x":4, "y":13, "vertical":true}, {"x":6, "y":13, "vertical":true}, {"x":9, "y":13, "vertical":false}, {"x":10, "y":13, "vertical":false}, {"x":9, "y":14, "vertical":false}, {"x":10, "y":14, "vertical":false}, {"x":9, "y":13, "vertical":true}, {"x":11, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":false}, {"x":14, "y":14, "vertical":false}, {"x":11, "y":11, "vertical":false}, {"x":13, "y":11, "vertical":false}, {"x":11, "y":12, "vertical":false}, {"x":12, "y":11, "vertical":false}, {"x":12, "y":13, "vertical":false}, {"x":13, "y":12, "vertical":false}, {"x":14, "y":11, "vertical":true}, {"x":12, "y":12, "vertical":true}, {"x":11, "y":11, "vertical":true}, {"x":13, "y":12, "vertical":true} ], "transform":[ { "type":"formula", "expr":"datum.x+'-'+datum.y+'-'+datum.vertical", "as":"key" } ] } ] })50:T10f3,([{ "name":"gRed", "init":"data('ghosts')[0]" }, { "name":"gRedDelta", "update":"{dx:pacManX-gRedX, dy: pacManY-gRedY}" }, { "name":"gRedLastDir", "update":"gRedDirection" }, { "name":"gRedPreferences", "update":"setdata('gRedDecisions',[{d:'up', i: (gRedLastDir === 'down' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gRedLastDir === 'up' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gRedLastDir === 'right' ? 4 : (abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gRedLastDir === 'left' ? 4 : abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gRedHasWallX", "update":"(gRedOffsetX<0 && !gRedCanLeft) || (gRedOffsetX>0 && !gRedCanRight) ? true : false" }, { "name":"gRedHasWallY", "update":"(gRedOffsetY<0 && !gRedCanUp) || (gRedOffsetY>0 && !gRedCanDown) ? true : false" }, { "name":"gRedCanLeft", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanUp", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-false')? false : true" }, { "name":"gRedCanRight", "update":"indata('walls', 'key', (gRedX + 1) + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanDown", "update":"indata('walls', 'key', gRedX + '-' + (gRedY+1) + '-false')? false : true" }, { "name":"gRedHasPacMan", "update":"superPower && ((gRedX + gRedOffsetX === pacManX) && (gRedY + gRedOffsetY === pacManY))" }, { "name":"gRedBlocked", "on": [ { "events":{"signal":"gRedProposedDirection"}, "force": true, "update":"!gRedProposedDirection ||(gRedProposedDirection === 'up' && !gRedCanUp) || (gRedProposedDirection === 'down' && !gRedCanDown) || (gRedProposedDirection === 'left' && !gRedCanLeft) || (gRedProposedDirection === 'right' && !gRedCanRight) ? true : false" } ] }, { "name":"gRedTry", "on": [ { "events":{"type":"timer", "throttle": 350}, "update":"gRedBlocked && gRedTry <3 ? gRedTry+1 : 0" } ] }, { "name":"gRedDecision", "update":"data('gRedDecisions')[gRedTry]" }, { "name":"gRedProposedDirection", "on": [{"events":{"signal":"gRedDecision"}, "force": true, "update":"gRedDecision ? gRedDecision.d : 'none'"}] }, { "name":"gRedDirection", "update":"gRedProposedDirection && !gRedBlocked ? gRedProposedDirection : gRedDirection" }, { "name":"gRedOffsetX", "update":"gRedDirection === 'left'? - 1 : gRedDirection === 'right'? 1 : 0" }, { "name":"gRedOffsetY", "update":"gRedDirection === 'up'? -1 : gRedDirection === 'down' ? 1 : 0" }, { "name":"gRedX", "init":"gRed.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 6 : (!restart && !gRedHasWallX && !gRedHasPacMan ? ((gRedOffsetX <0 && gRedX <= 0) ? grid.width - 1 : ((gRedOffsetX > 0 && gRedX >= grid.width -1) ? 0 : (gRedX + gRedOffsetX))) : gRedX)" }, { "events":{"signal":"restart"}, "update":"gRed.x", "force": true } ] }, { "name":"gRedY", "init":"gRed.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 7 : (!restart && !gRedHasWallY && !gRedHasPacMan ? ((gRedOffsetY <0 && gRedY <= 0) ? grid.height-1 : (gRedOffsetY > 0 && gRedY >= grid.height - 1)? 0 : gRedY + gRedOffsetY) : gRedY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gRed.y" } ] }])51:T4c9,md`- "gColorOfGhost" is the object from data source ghost representing a specific ghost - "gColorOfGhosX" and "gColorOfGhostY"are the current location of the ghost. They are updated periodically - "gColorOfGhostDelta" is the delta between PacMan and a ghost - "gColorOfGhostLastDirection" stores the last direction took by the ghost - "gColorOfGhostPreferences" is the decision table - "gColorOfGhostHasWallX", "gColorOfGhostHasWallY", "gColorOfGhostCanMoveUp", "gColorOfGhostCanMoveDown", "gColorOfGhostCanMoveLeft", "gColorOfGhostCanMoveRight", "gColorOfGhostHasPacMan" handle of collision detection with walls or pacMan or other ghosts - "gColorOfGhostBlocked" checks if the proposed direction is blocking the ghost - "gColorOfGhostTry" is the desired direction decision index - "gColorOfGhostDecision" is the current decision from decisions table - "gColorOfGhostProposedDirection": the current desired direction - "gColorOfGhostDirection", "gColorOfGhostOffsetX", "gColorOfGhostOffsetY": the current validated direction and related ghost offset - "gColorOfGhostX", "gColorOfGhost": the current ghost location PacMan can eat ghosts but can also loose the game when eaten by a ghost. Other signals are added or updated: `52:T111a,([{ "type":"symbol", "from":{"data":"ghosts"}, "encode":{ "enter":{ "size":{"signal":"pow(blockSize/20,2)"} }, "update":{ "x":{"signal":"gRedX", "offset":{"signal":"blockSize/8"}, "scale":"scaleX"}, "y":{"signal":"gRedY", "offset":{"signal":"blockSize/9"}, "scale":"scaleY"}, "shape":{"signal":"indata('eatenGhosts', 'color', datum.color) ? 'M16.459004,11.555034C15.659003,11.555034 15.009003,12.205034 15.009003,13.005036 15.009003,13.804038 15.659003,14.454039 16.459004,14.454039 17.258005,14.454039 17.909006,13.804038 17.909006,13.005036 17.909006,12.205034 17.258005,11.555034 16.459004,11.555034z M7.5419962,11.555034C6.7429954,11.555034 6.0919949,12.205034 6.0919949,13.005036 6.0919949,13.804038 6.7429954,14.454039 7.5419962,14.454039 8.3419973,14.454039 8.9919979,13.804038 8.9919979,13.005036 8.9919979,12.205034 8.3419973,11.555034 7.5419962,11.555034z M16.459004,9.5550298C18.361006,9.5550298 19.909006,11.103033 19.909006,13.005036 19.909006,14.90804 18.361006,16.454042 16.459004,16.454042 14.557002,16.454042 13.009001,14.90804 13.009001,13.005036 13.009001,11.103033 14.557002,9.5550298 16.459004,9.5550298z M7.5419962,9.5550298C9.4439976,9.5550298 10.991999,11.103033 10.991999,13.005036 10.991999,14.90804 9.4439976,16.454042 7.5419962,16.454042 5.6399948,16.454042 4.091993,14.90804 4.091993,13.005036 4.091993,11.103033 5.6399948,9.5550298 7.5419962,9.5550298z M12,1.9999994C6.4860079,1.9999995,2.0000002,6.3300156,2.0000004,11.650998L2.0000004,28.669975 5.102997,27.200983 8.9929964,29.12896 12.742996,27.202997 16.98201,29.106987 19.895004,27.116999 22,28.439995 22,11.650998C22,6.3300156,17.515,1.9999995,12,1.9999994z M12,0C18.617005,0,24,5.2260117,24,11.650998L24,32.056999 19.940003,29.507988 17.184998,31.390007 12.80101,29.421989 9.0080111,31.369011 5.0820009,29.424004 0,31.827995 0,11.650998C1.8747701E-07,5.2260117,5.3840029,0,12,0z' : 'M13.952596,15.068143C13.767538,15.066144 13.583578,15.095151 13.403586,15.157148 12.252587,15.553147 11.725549,17.163162 12.224572,18.753189 12.725547,20.342192 14.062582,21.309212 15.211566,20.914204 16.362564,20.518204 16.889541,18.908188 16.390579,17.318163 15.968584,15.977162 14.95058,15.077146 13.952596,15.068143z M7.7945876,6.1100698C7.2026091,6.0760732 6.4365583,6.7850791 5.9736071,7.8550807 5.4445558,9.0761004 5.5105953,10.302109 6.1215563,10.590106 6.7316013,10.881108 7.65555,10.126112 8.1855779,8.9070922 8.7145686,7.6860881 8.6485896,6.4610711 8.036592,6.1710754 7.9606028,6.1350642 7.8795486,6.1150752 7.7945876,6.1100698z M15.404559,5.9590679C15.383563,5.9580608 15.362566,5.9580608 15.34157,5.960075 14.674579,6.0020671 14.194539,7.1220723 14.275593,8.4590903 14.354573,9.7981063 14.962543,10.848119 15.631547,10.802114 16.300554,10.759113 16.778579,9.6401005 16.700576,8.3020907 16.622573,7.006074 16.049577,5.980064 15.404559,5.9590679z M12.317589,1.4699259E-05C15.527545,0.0050196948 18.757579,1.2870288 21.236579,3.8010436 24.038576,6.6430793 25.533567,12.005127 25.825559,15.861164 26.09155,19.371191 27.844537,19.518194 30.765552,22.228211 31.592515,22.995216 33.904521,25.825243 28.733512,26.053242 26.619564,26.146244 25.60156,25.739243 21.732549,22.850226 21.235542,22.545214 20.664558,22.733219 20.373542,22.885214 20.017526,23.07122 19.741586,23.925232 19.851572,24.215227 20.16456,25.583237 22.25855,25.135235 23.427553,26.313253 24.41156,27.305252 22.795536,29.807287 18.926586,29.29027 18.926586,29.29027 16.343582,28.587277 13.853597,25.258236 11.910547,25.242245 9.6305823,25.258236 9.6305823,25.258236 9.6305823,25.258236 9.6025672,26.705256 9.6425452,27.10626 10.271573,27.256254 10.777553,27.021252 13.298544,27.736271 14.150593,27.978262 16.663589,31.170292 8.7236018,30.424282 7.0135832,30.263287 7.1875944,30.721283 5.2576051,26.025242 4.2626119,23.604229 2.0076115,22.396212 0.6345674,17.082169 -0.27241354,14.207143 -0.21040192,11.068107 0.84159805,8.2280856 0.97556992,7.8450862 1.1235799,7.5130826 1.2786091,7.1980773 1.8406196,6.0020671 2.5815849,4.8720523 3.5156043,3.863056 5.9166007,1.2680314 9.107573,-0.0049901602 12.317589,1.4699259E-05z'"}, "fill":{"signal":"superPower? 'white' :datum.color"}, "opacity":[{"test":"restart", "value": 0},{"signal":"superPower?0.8:1"}] } } }])53:Tbb66,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 600, "height":600, "background":"black", "signals":[ { "name":"grid", "value":{"width":15, "height":15} }, { "name":"blockSize", "init":"min(width,height)/max(grid.width,grid.height)" }, { "name":"rangeWidthDelta", "update":"(width - blockSize*grid.width)/2" }, { "name":"rangeHeightDelta", "update":"(height - blockSize*grid.height)/2" }, { "name":"sizeFactor", "init":"blockSize*15/600" }, { "name":"key", "on":[ { "events":"window:keydown", "update":"event.code" }, { "events":{"signal":"restart"}, "force": true, "update":"null" } ] }, { "name":"pacManXOffset", "update":"key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0" }, { "name":"pacManYOffset", "update":"key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0" }, { "name":"pacManX", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"(!restart && pacManCanMoveX) ?((pacManXOffset <0 && pacManX <= 0) ? grid.width - 1 : ((pacManXOffset > 0 && pacManX >= grid.width -1) ? 0 : (pacManX + pacManXOffset))) : pacManX"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManY", "init":"7", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!restart && pacManCanMoveY ?((pacManYOffset <0 && pacManY <= 0) ? grid.height-1 : (pacManYOffset > 0 && pacManY >= grid.height - 1)? 0 : pacManY + pacManYOffset) : pacManY"}, {"events":{"signal":"restart"}, "force": true, "update":"7"} ] }, { "name":"pacManIsOpen", "init":"true", "on":[ {"events":{"type":"timer", "throttle": 500}, "update":"!pacManIsOpen"} ] }, { "name":"pacManHasWallX", "update":"(pacManXOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-true')) || (pacManXOffset>=0 && indata('walls', 'key', (pacManX + 1) + '-' + pacManY + '-true')) ? true : false" }, { "name":"pacManHasWallY", "update":"(pacManYOffset<=0 && indata('walls', 'key', pacManX + '-' + pacManY + '-false')) || (pacManYOffset>=0 && indata('walls', 'key', pacManX + '-' + (pacManY+1) + '-false')) ? true : false" }, { "name":"pacManCanMoveX", "update":"!pacManHasWallX && !pacManHasGhost" }, { "name":"pacManCanMoveY", "update":"!pacManHasWallY && !pacManHasGhost" }, { "name":"pacManHasGhost", "update":"!superPower && (((pacManX + pacManXOffset === gRedX) && (pacManY + pacManYOffset === gRedY)) || ((pacManX + pacManXOffset === gBlueX) && (pacManY + pacManYOffset === gBlueY)) || ((pacManX + pacManXOffset === gGreenX) && (pacManY + pacManYOffset === gGreenY)) || ((pacManX + pacManXOffset === gOrangeX) && (pacManY + pacManYOffset === gOrangeY)))" }, { "name":"win", "update":"length(data('gums')) + length(data('powerGums')) === length(data('eatenGums'))" }, { "name":"loose", "on":[{"events":{"type":"timer", "throttle": 400 }, "update":"!superPower && ((gRedX === pacManX && gRedY === pacManY) || (gBlueX === pacManX && gBlueY === pacManY) || (gGreenX === pacManX && gGreenY === pacManY) || (gOrangeX === pacManX && gOrangeY === pacManY))"}] }, { "name":"restart", "update":"win === true || loose === true" }, { "name":"testEaten", "update":"!restart && (indata('gums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"testPowerEaten", "update":"!restart && (indata('powerGums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null" }, { "name":"superPower", "init":"0", "on": [{"events":{"type":"timer", "throttle": 1000}, "force": true, "update":"superPower > 0 ? superPower - 1 : 0"}, {"events":{"signal":"testPowerEaten"}, "update":"testPowerEaten? 15 : superPower"}, {"events":{"signal":"restart"}, "force": true, "update":"0"}] } , { "name":"testEatenGhost", "update":"superPower ? ((gRedX === pacManX && gRedY === pacManY) ? gRed : (gBlueX === pacManX && gBlueY === pacManY) ? gBlue : (gGreenX === pacManX && gGreenY === pacManY) ? gGreen : (gOrangeX === pacManX && gOrangeY === pacManY) ? gOrange : null) : null" }, { "name":"gRed", "init":"data('ghosts')[0]" }, { "name":"gRedDelta", "update":"{dx:pacManX-gRedX, dy: pacManY-gRedY}" }, { "name":"gRedLastDir", "update":"gRedDirection" }, { "name":"gRedPreferences", "update":"setdata('gRedDecisions',[{d:'up', i: (gRedLastDir === 'down' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gRedLastDir === 'up' ? 4 : (abs(gRedDelta.dy) > abs(gRedDelta.dx) ? (gRedDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gRedLastDir === 'right' ? 4 : (abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gRedDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gRedLastDir === 'left' ? 4 : abs(gRedDelta.dy) < abs(gRedDelta.dx) ? (gRedDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gRedDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gRedHasWallX", "update":"(gRedOffsetX<0 && !gRedCanLeft) || (gRedOffsetX>0 && !gRedCanRight) ? true : false" }, { "name":"gRedHasWallY", "update":"(gRedOffsetY<0 && !gRedCanUp) || (gRedOffsetY>0 && !gRedCanDown) ? true : false" }, { "name":"gRedCanLeft", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanUp", "update":"indata('walls', 'key', gRedX + '-' + gRedY + '-false')? false : true" }, { "name":"gRedCanRight", "update":"indata('walls', 'key', (gRedX + 1) + '-' + gRedY + '-true') ? false : true" }, { "name":"gRedCanDown", "update":"indata('walls', 'key', gRedX + '-' + (gRedY+1) + '-false')? false : true" }, { "name":"gRedHasPacMan", "update":"superPower && ((gRedX + gRedOffsetX === pacManX) && (gRedY + gRedOffsetY === pacManY))" }, { "name":"gRedBlocked", "on": [ { "events":{"signal":"gRedProposedDirection"}, "force": true, "update":"!gRedProposedDirection ||(gRedProposedDirection === 'up' && !gRedCanUp) || (gRedProposedDirection === 'down' && !gRedCanDown) || (gRedProposedDirection === 'left' && !gRedCanLeft) || (gRedProposedDirection === 'right' && !gRedCanRight) ? true : false" } ] }, { "name":"gRedTry", "on": [ { "events":{"type":"timer", "throttle": 350}, "update":"gRedBlocked && gRedTry <3 ? gRedTry+1 : 0" } ] }, { "name":"gRedDecision", "update":"data('gRedDecisions')[gRedTry]" }, { "name":"gRedProposedDirection", "on": [{"events":{"signal":"gRedDecision"}, "force": true, "update":"gRedDecision ? gRedDecision.d : 'none'"}] }, { "name":"gRedDirection", "update":"gRedProposedDirection && !gRedBlocked ? gRedProposedDirection : gRedDirection" }, { "name":"gRedOffsetX", "update":"gRedDirection === 'left'? - 1 : gRedDirection === 'right'? 1 : 0" }, { "name":"gRedOffsetY", "update":"gRedDirection === 'up'? -1 : gRedDirection === 'down' ? 1 : 0" }, { "name":"gRedX", "init":"gRed.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 6 : (!restart && !gRedHasWallX && !gRedHasPacMan ? ((gRedOffsetX <0 && gRedX <= 0) ? grid.width - 1 : ((gRedOffsetX > 0 && gRedX >= grid.width -1) ? 0 : (gRedX + gRedOffsetX))) : gRedX)" }, { "events":{"signal":"restart"}, "update":"gRed.x", "force": true } ] }, { "name":"gRedY", "init":"gRed.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'red') ? 7 : (!restart && !gRedHasWallY && !gRedHasPacMan ? ((gRedOffsetY <0 && gRedY <= 0) ? grid.height-1 : (gRedOffsetY > 0 && gRedY >= grid.height - 1)? 0 : gRedY + gRedOffsetY) : gRedY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gRed.y" } ] }, { "name":"gBlue", "init":"data('ghosts')[1]" }, { "name":"gBlueDelta", "update":"{dx:pacManX-gBlueX, dy: pacManY-gBlueY}" }, { "name":"gBlueLastDir", "update":"gBlueDirection" }, { "name":"gBluePreferences", "update":"setdata('gBlueDecisions',[{d:'up', i: (gBlueLastDir === 'down' ? 4 : (abs(gBlueDelta.dy) > abs(gBlueDelta.dx) ? (gBlueDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gBlueDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gBlueLastDir === 'up' ? 4 : (abs(gBlueDelta.dy) > abs(gBlueDelta.dx) ? (gBlueDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gBlueDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gBlueLastDir === 'right' ? 4 : (abs(gBlueDelta.dy) < abs(gBlueDelta.dx) ? (gBlueDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gBlueDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gBlueLastDir === 'left' ? 4 : abs(gBlueDelta.dy) < abs(gBlueDelta.dx) ? (gBlueDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gBlueDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gBlueHasWallX", "update":"(gBlueOffsetX<0 && !gBlueCanLeft) || (gBlueOffsetX>0 && !gBlueCanRight) ? true : false" }, { "name":"gBlueHasWallY", "update":"(gBlueOffsetY<0 && !gBlueCanUp) || (gBlueOffsetY>0 && !gBlueCanDown) ? true : false" }, { "name":"gBlueHasGhost", "update":"(gBlueX == gRedX && gBlueY === gRedY)" }, { "name":"gBlueHasPacMan", "update":"superPower && ((gBlueX + gBlueOffsetX === pacManX) && (gBlueY + gBlueOffsetY === pacManY)) " }, { "name":"gBlueCanLeft", "update":"indata('walls', 'key', gBlueX + '-' + gBlueY + '-true') ? false : true" }, { "name":"gBlueCanUp", "update":"indata('walls', 'key', gBlueX + '-' + gBlueY + '-false')? false : true" }, { "name":"gBlueCanRight", "update":"indata('walls', 'key', (gBlueX + 1) + '-' + gBlueY + '-true') ? false : true" }, { "name":"gBlueCanDown", "update":"indata('walls', 'key', gBlueX + '-' + (gBlueY+1) + '-false')? false : true" }, { "name":"gBlueBlocked", "on": [ { "events":{"signal":"gBlueProposedDirection"}, "force": true, "update":"!gBlueProposedDirection || (gBlueProposedDirection === 'up' && !gBlueCanUp) || (gBlueProposedDirection === 'down' && !gBlueCanDown) || (gBlueProposedDirection === 'left' && !gBlueCanLeft) || (gBlueProposedDirection === 'right' && !gBlueCanRight) ? true : false" } ] }, { "name":"gBlueTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gBlueBlocked && gBlueTry <=3 ? gBlueTry+1 : 0" } ] }, { "name":"gBlueDecision", "update":"data('gBlueDecisions')[gBlueTry]" }, { "name":"gBlueProposedDirection", "on": [{"events":{"signal":"gBlueDecision"}, "force": true, "update":"gBlueDecision ? gBlueDecision.d : 'none'"}] }, { "name":"gBlueDirection", "update":"gBlueProposedDirection && !gBlueBlocked ? gBlueProposedDirection : gBlueDirection" }, { "name":"gBlueOffsetX", "update":"gBlueDirection === 'left'? - 1 : gBlueDirection === 'right'? 1 : 0" }, { "name":"gBlueOffsetY", "update":"gBlueDirection === 'up' ? -1 : gBlueDirection === 'down' ? 1 : 0" }, { "name":"gBlueX", "init":"gBlue.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'steelblue') ? 7 : (!restart && !gBlueHasWallX && !gBlueHasGhost && !gBlueHasPacMan ? ((gBlueOffsetX <0 && gBlueX <= 0) ? grid.width - 1 : ((gBlueOffsetX > 0 && gBlueX >= grid.width -1) ? 0 : (gBlueX + gBlueOffsetX))) : gBlueX)" }, { "events":{"signal":"restart"}, "update":"gBlue.x", "force": true } ] }, { "name":"gBlueY", "init":"gBlue.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'steelblue') ? 7 : (!restart && !gBlueHasWallY && !gBlueHasGhost && !gBlueHasPacMan ? ((gBlueOffsetY <0 && gBlueY <= 0) ? grid.height-1 : (gBlueOffsetY > 0 && gBlueY >= grid.height - 1)? 0 : gBlueY + gBlueOffsetY) : gBlueY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gBlue.y" } ] }, { "name":"gGreen", "init":"data('ghosts')[2]" }, { "name":"gGreenDelta", "update":"{dx:pacManX-gGreenX, dy: pacManY-gGreenY}" }, { "name":"gGreenLastDir", "update":"gGreenDirection" }, { "name":"gGreenPreferences", "update":"setdata('gGreenDecisions',[{d:'up', i: (gGreenLastDir === 'down' ? 4 : (abs(gGreenDelta.dy) > abs(gGreenDelta.dx) ? (gGreenDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gGreenDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gGreenLastDir === 'up' ? 4 : (abs(gGreenDelta.dy) > abs(gGreenDelta.dx) ? (gGreenDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gGreenDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gGreenLastDir === 'right' ? 4 : (abs(gGreenDelta.dy) < abs(gGreenDelta.dx) ? (gGreenDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gGreenDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gGreenLastDir === 'left' ? 4 : abs(gGreenDelta.dy) < abs(gGreenDelta.dx) ? (gGreenDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gGreenDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gGreenHasWallX", "update":"(gGreenOffsetX<0 && !gGreenCanLeft) || (gGreenOffsetX>0 && !gGreenCanRight) ? true : false" }, { "name":"gGreenHasWallY", "update":"(gGreenOffsetY<0 && !gGreenCanUp) || (gGreenOffsetY>0 && !gGreenCanDown) ? true : false" }, { "name":"gGreenHasGhost", "update":"(gGreenX === gRedX && gGreenY === gRedY) || (gGreenX === gBlueX && gGreenY+gGreenOffsetY === gBlueY)" }, { "name":"gGreenHasPacMan", "update":"superPower && ((gGreenX + gGreenOffsetX === pacManX) && (gGreenY + gGreenOffsetY === pacManY)) " }, { "name":"gGreenCanLeft", "update":"indata('walls', 'key', gGreenX + '-' + gGreenY + '-true') ? false : true" }, { "name":"gGreenCanUp", "update":"indata('walls', 'key', gGreenX + '-' + gGreenY + '-false')? false : true" }, { "name":"gGreenCanRight", "update":"indata('walls', 'key', (gGreenX + 1) + '-' + gGreenY + '-true') ? false : true" }, { "name":"gGreenCanDown", "update":"indata('walls', 'key', gGreenX + '-' + (gGreenY+1) + '-false')? false : true" }, { "name":"gGreenBlocked", "on": [ { "events":{"signal":"gGreenProposedDirection"}, "force": true, "update":"!gGreenProposedDirection || (gGreenProposedDirection === 'up' && !gGreenCanUp) || (gGreenProposedDirection === 'down' && !gGreenCanDown) || (gGreenProposedDirection === 'left' && !gGreenCanLeft) || (gGreenProposedDirection === 'right' && !gGreenCanRight) ? true : false" } ] }, { "name":"gGreenTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gGreenBlocked && gGreenTry <=3 ? gGreenTry+1 : 0" } ] }, { "name":"gGreenDecision", "update":"data('gGreenDecisions')[gGreenTry]" }, { "name":"gGreenProposedDirection", "on": [{"events":{"signal":"gGreenDecision"}, "force": true, "update":"gGreenDecision ? gGreenDecision.d : 'none'"}] }, { "name":"gGreenDirection", "update":"gGreenProposedDirection && !gGreenBlocked ? gGreenProposedDirection : gGreenDirection" }, { "name":"gGreenOffsetX", "update":"gGreenDirection === 'left'? - 1 : gGreenDirection === 'right'? 1 : 0" }, { "name":"gGreenOffsetY", "update":"gGreenDirection === 'up' ? -1 : gGreenDirection === 'down' ? 1 : 0" }, { "name":"gGreenX", "init":"gGreen.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'green') ? 8 : (!restart && !gGreenHasWallX && !gGreenHasGhost && !gGreenHasPacMan ? ((gGreenOffsetX <0 && gGreenX <= 0) ? grid.width - 1 : ((gGreenOffsetX > 0 && gGreenX >= grid.width -1) ? 0 : (gGreenX + gGreenOffsetX))) : gGreenX)" }, { "events":{"signal":"restart"}, "update":"gGreen.x", "force": true } ] }, { "name":"gGreenY", "init":"gGreen.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'green') ? 7 : (!restart && !gGreenHasWallY && !gGreenHasGhost && !gGreenHasPacMan ? ((gGreenOffsetY <0 && gGreenY <= 0) ? grid.height-1 : (gGreenOffsetY > 0 && gGreenY >= grid.height - 1)? 0 : gGreenY + gGreenOffsetY) : gGreenY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gGreen.y" } ] }, { "name":"gOrange", "init":"data('ghosts')[3]" }, { "name":"gOrangeDelta", "update":"{dx:pacManX-gOrangeX, dy: pacManY-gOrangeY}" }, { "name":"gOrangeLastDir", "update":"gOrangeDirection" }, { "name":"gOrangePreferences", "update":"setdata('gOrangeDecisions',[{d:'up', i: (gOrangeLastDir === 'down' ? 4 : (abs(gOrangeDelta.dy) > abs(gOrangeDelta.dx) ? (gOrangeDelta.dy<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gOrangeDelta.dy<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'down', i:(gOrangeLastDir === 'up' ? 4 : (abs(gOrangeDelta.dy) > abs(gOrangeDelta.dx) ? (gOrangeDelta.dy<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gOrangeDelta.dy<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2))))}, {d:'left', i: (gOrangeLastDir === 'right' ? 4 : (abs(gOrangeDelta.dy) < abs(gOrangeDelta.dx) ? (gOrangeDelta.dx<0 ? (superPower ? 4 : 1) : (superPower ? 1 : 4)) : (gOrangeDelta.dx<0 ? (superPower ? 3 : 2) : (superPower ? 2 : 3))))}, {d:'right', i:(gOrangeLastDir === 'left' ? 4 : abs(gOrangeDelta.dy) < abs(gOrangeDelta.dx) ? (gOrangeDelta.dx<0 ? (superPower ? 1 : 4) : (superPower ? 4 : 1)) : (gOrangeDelta.dx<0 ? (superPower ? 2 : 3) : (superPower ? 3 : 2)))}])" }, { "name":"gOrangeHasWallX", "update":"(gOrangeOffsetX<0 && !gOrangeCanLeft) || (gOrangeOffsetX>0 && !gOrangeCanRight) ? true : false" }, { "name":"gOrangeHasWallY", "update":"(gOrangeOffsetY<0 && !gOrangeCanUp) || (gOrangeOffsetY>0 && !gOrangeCanDown) ? true : false" }, { "name":"gOrangeHasGhost", "update":"(gOrangeX === gRedX && gOrangeY === gRedY) || (gOrangeX === gBlueX && gOrangeY === gBlueY) || (gOrangeX === gGreenX && gOrangeY === gGreenY)" }, { "name":"gOrangeCanLeft", "update":"indata('walls', 'key', gOrangeX + '-' + gOrangeY + '-true') ? false : true" }, { "name":"gOrangeCanUp", "update":"indata('walls', 'key', gOrangeX + '-' + gOrangeY + '-false')? false : true" }, { "name":"gOrangeCanRight", "update":"indata('walls', 'key', (gOrangeX + 1) + '-' + gOrangeY + '-true') ? false : true" }, { "name":"gOrangeCanDown", "update":"indata('walls', 'key', gOrangeX + '-' + (gOrangeY+1) + '-false')? false : true" }, { "name":"gOrangeBlocked", "on": [ { "events":{"signal":"gOrangeProposedDirection"}, "force": true, "update":"!gOrangeProposedDirection || (gOrangeProposedDirection === 'up' && !gOrangeCanUp) || (gOrangeProposedDirection === 'down' && !gOrangeCanDown) || (gOrangeProposedDirection === 'left' && !gOrangeCanLeft) || (gOrangeProposedDirection === 'right' && !gOrangeCanRight) ? true : false" } ] }, { "name":"gOrangeTry", "on": [ { "events":{"type":"timer", "throttle": 400}, "update":"gOrangeBlocked && gOrangeTry <=3 ? gOrangeTry+1 : 0" } ] }, { "name":"gOrangeHasPacMan", "update":"superPower && ((gOrangeX + gOrangeOffsetX === pacManX) && (gOrangeY + gOrangeOffsetY === pacManY)) " }, { "name":"gOrangeDecision", "update":"data('gOrangeDecisions')[gOrangeTry]" }, { "name":"gOrangeProposedDirection", "on": [{"events":{"signal":"gOrangeDecision"}, "force": true, "update":"gOrangeDecision ? gOrangeDecision.d : 'none'"}] }, { "name":"gOrangeDirection", "update":"gOrangeProposedDirection && !gOrangeBlocked ? gOrangeProposedDirection : gOrangeDirection" }, { "name":"gOrangeOffsetX", "update":"gOrangeDirection === 'left'? - 1 : gOrangeDirection === 'right'? 1 : 0" }, { "name":"gOrangeOffsetY", "update":"gOrangeDirection === 'up' ? -1 : gOrangeDirection === 'down' ? 1 : 0" }, { "name":"gOrangeX", "init":"gOrange.x", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'orange') ? 7 : (!restart && !gOrangeHasWallX && !gOrangeHasGhost && !gOrangeHasPacMan ? ((gOrangeOffsetX <0 && gOrangeX <= 0) ? grid.width - 1 : ((gOrangeOffsetX > 0 && gOrangeX >= grid.width -1) ? 0 : (gOrangeX + gOrangeOffsetX))) : gOrangeX)" }, { "events":{"signal":"restart"}, "update":"gOrange.x", "force": true } ] }, { "name":"gOrangeY", "init":"gOrange.y", "on":[ { "events":{"type":"timer", "throttle": 500}, "update":"indata('eatenGhosts', 'color', 'orange') ? 7 : (!restart && !gOrangeHasWallY && !gOrangeHasGhost && !gOrangeHasPacMan ? ((gOrangeOffsetY <0 && gOrangeY <= 0) ? grid.height-1 : (gOrangeOffsetY > 0 && gOrangeY >= grid.height - 1)? 0 : gOrangeY + gOrangeOffsetY) : gOrangeY)" }, { "events":{"signal":"restart"}, "force":true, "update":"gOrange.y" } ] } ], "scales":[ { "name":"scaleX", "type":"band", "domain":{"data":"columns", "field":"data"}, "range":[{"signal": "rangeWidthDelta"},{"signal":"width-rangeWidthDelta"}] }, { "name":"scaleY", "type":"band", "domain":{"data":"rows", "field":"data"}, "range":[{"signal": "rangeHeightDelta"},{"signal":"height-rangeHeightDelta"}] } ], "marks":[ { "type":"rect", "from":{"data":"walls"}, "encode":{ "enter":{ "x":{"signal":"datum.x < grid.width ? datum.x : grid.width-1", "scale":"scaleX", "offset":{"signal":"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0"}}, "y":{"signal":"datum.y < grid.height ? datum.y : grid.height-1", "scale":"scaleY", "offset":{"signal":"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10"}}, "fill":{"value":"blue"}, "width":{"signal":"datum.vertical?blockSize/10:blockSize"}, "height":{"signal":"datum.vertical?blockSize:blockSize/10"} } } }, { "type":"symbol", "from":{"data":"gums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"grey"}, "size":{"signal":"pow(10*sizeFactor, 2)"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"symbol", "from":{"data":"powerGums"}, "encode":{ "enter":{ "x":{"field":"x", "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"field":"y", "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "size":{"signal":"pow(18*sizeFactor, 2)"}, "fill":{"value":"white"} }, "update":{ "opacity":[{"test":"indata('eatenGums', 'key', datum.x+'-'+datum.y)", "value": 0}, {"value":1}] } } }, { "type":"group", "name":"pacMan", "encode":{ "update":{ "x":{"signal":"pacManX", "scale":"scaleX"}, "y":{"signal":"pacManY", "scale":"scaleY"} } }, "marks":[ { "type":"arc", "encode":{ "enter":{ "outerRadius":{"signal":"(blockSize/2)*0.8"}, "stroke":{"value":"black"}, "x":{"signal":"blockSize/2"}, "y":{"signal":"blockSize/2"} }, "update":{ "fill":{"signal":"superPower ? 'red' : 'yellow'"}, "endAngle":{"signal":"(pacManIsOpen? 5*PI/2-PI/6:5*PI/2-0.001) * (pacManXOffset ? pacManXOffset : 1)"}, "startAngle":{"signal":"(pacManIsOpen? PI/2+PI/6:PI/2) * (pacManXOffset ? pacManXOffset : 1)"} } } }, { "type":"symbol", "encode":{ "enter":{ "y":{"signal":"blockSize/2", "offset":{"signal":"-blockSize/5"}}, "size":{"signal":"pow(blockSize/10, 2)"}, "fill":{"value":"black"} }, "update":{ "x":{"signal":"blockSize/2", "offset":{"signal":"2 * (pacManXOffset ? pacManXOffset : 1)"}} } } } ] }, { "type":"symbol", "from":{"data":"ghosts"}, "encode":{ "enter":{ "size":{"signal":"pow(blockSize/20,2)"} }, "update":{ "x":{"signal":"datum.color === 'red' ? gRedX : datum.color === 'steelblue'? gBlueX : datum.color === 'green'? gGreenX : gOrangeX", "offset":{"signal":"blockSize/8"}, "scale":"scaleX"}, "y":{"signal":"datum.color === 'red' ? gRedY : datum.color === 'steelblue'? gBlueY : datum.color === 'green'? gGreenY : gOrangeY", "offset":{"signal":"blockSize/9"}, "scale":"scaleY"}, "shape":{"signal":"indata('eatenGhosts', 'color', datum.color) ? 'M16.459004,11.555034C15.659003,11.555034 15.009003,12.205034 15.009003,13.005036 15.009003,13.804038 15.659003,14.454039 16.459004,14.454039 17.258005,14.454039 17.909006,13.804038 17.909006,13.005036 17.909006,12.205034 17.258005,11.555034 16.459004,11.555034z M7.5419962,11.555034C6.7429954,11.555034 6.0919949,12.205034 6.0919949,13.005036 6.0919949,13.804038 6.7429954,14.454039 7.5419962,14.454039 8.3419973,14.454039 8.9919979,13.804038 8.9919979,13.005036 8.9919979,12.205034 8.3419973,11.555034 7.5419962,11.555034z M16.459004,9.5550298C18.361006,9.5550298 19.909006,11.103033 19.909006,13.005036 19.909006,14.90804 18.361006,16.454042 16.459004,16.454042 14.557002,16.454042 13.009001,14.90804 13.009001,13.005036 13.009001,11.103033 14.557002,9.5550298 16.459004,9.5550298z M7.5419962,9.5550298C9.4439976,9.5550298 10.991999,11.103033 10.991999,13.005036 10.991999,14.90804 9.4439976,16.454042 7.5419962,16.454042 5.6399948,16.454042 4.091993,14.90804 4.091993,13.005036 4.091993,11.103033 5.6399948,9.5550298 7.5419962,9.5550298z M12,1.9999994C6.4860079,1.9999995,2.0000002,6.3300156,2.0000004,11.650998L2.0000004,28.669975 5.102997,27.200983 8.9929964,29.12896 12.742996,27.202997 16.98201,29.106987 19.895004,27.116999 22,28.439995 22,11.650998C22,6.3300156,17.515,1.9999995,12,1.9999994z M12,0C18.617005,0,24,5.2260117,24,11.650998L24,32.056999 19.940003,29.507988 17.184998,31.390007 12.80101,29.421989 9.0080111,31.369011 5.0820009,29.424004 0,31.827995 0,11.650998C1.8747701E-07,5.2260117,5.3840029,0,12,0z' : 'M13.952596,15.068143C13.767538,15.066144 13.583578,15.095151 13.403586,15.157148 12.252587,15.553147 11.725549,17.163162 12.224572,18.753189 12.725547,20.342192 14.062582,21.309212 15.211566,20.914204 16.362564,20.518204 16.889541,18.908188 16.390579,17.318163 15.968584,15.977162 14.95058,15.077146 13.952596,15.068143z M7.7945876,6.1100698C7.2026091,6.0760732 6.4365583,6.7850791 5.9736071,7.8550807 5.4445558,9.0761004 5.5105953,10.302109 6.1215563,10.590106 6.7316013,10.881108 7.65555,10.126112 8.1855779,8.9070922 8.7145686,7.6860881 8.6485896,6.4610711 8.036592,6.1710754 7.9606028,6.1350642 7.8795486,6.1150752 7.7945876,6.1100698z M15.404559,5.9590679C15.383563,5.9580608 15.362566,5.9580608 15.34157,5.960075 14.674579,6.0020671 14.194539,7.1220723 14.275593,8.4590903 14.354573,9.7981063 14.962543,10.848119 15.631547,10.802114 16.300554,10.759113 16.778579,9.6401005 16.700576,8.3020907 16.622573,7.006074 16.049577,5.980064 15.404559,5.9590679z M12.317589,1.4699259E-05C15.527545,0.0050196948 18.757579,1.2870288 21.236579,3.8010436 24.038576,6.6430793 25.533567,12.005127 25.825559,15.861164 26.09155,19.371191 27.844537,19.518194 30.765552,22.228211 31.592515,22.995216 33.904521,25.825243 28.733512,26.053242 26.619564,26.146244 25.60156,25.739243 21.732549,22.850226 21.235542,22.545214 20.664558,22.733219 20.373542,22.885214 20.017526,23.07122 19.741586,23.925232 19.851572,24.215227 20.16456,25.583237 22.25855,25.135235 23.427553,26.313253 24.41156,27.305252 22.795536,29.807287 18.926586,29.29027 18.926586,29.29027 16.343582,28.587277 13.853597,25.258236 11.910547,25.242245 9.6305823,25.258236 9.6305823,25.258236 9.6305823,25.258236 9.6025672,26.705256 9.6425452,27.10626 10.271573,27.256254 10.777553,27.021252 13.298544,27.736271 14.150593,27.978262 16.663589,31.170292 8.7236018,30.424282 7.0135832,30.263287 7.1875944,30.721283 5.2576051,26.025242 4.2626119,23.604229 2.0076115,22.396212 0.6345674,17.082169 -0.27241354,14.207143 -0.21040192,11.068107 0.84159805,8.2280856 0.97556992,7.8450862 1.1235799,7.5130826 1.2786091,7.1980773 1.8406196,6.0020671 2.5815849,4.8720523 3.5156043,3.863056 5.9166007,1.2680314 9.107573,-0.0049901602 12.317589,1.4699259E-05z'"}, "fill":{"signal":"superPower? 'white' :datum.color"}, "opacity":[{"test":"restart", "value": 0},{"signal":"superPower?0.8:1"}] } } } ], "data":[ { "name": "columns", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.width" }, "step": 1 } ] }, { "name": "rows", "transform": [ { "type": "sequence", "start": 0, "stop": { "signal": "grid.height" }, "step": 1 } ] }, { "name":"ghosts", "values":[ { "x":0, "y":0, "color":"red" }, { "x":14, "y":0, "color":"steelblue" }, { "x":0, "y":14, "color":"green" }, { "x":14, "y":14, "color":"orange" } ] }, { "name":"eatenGhosts", "on": [{ "trigger":"testEatenGhost", "insert":"testEatenGhost" }, { "trigger":"!superPower", "remove":"!superPower" }] }, { "name":"gRedDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gBlueDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gGreenDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gOrangeDecisions", "values":[], "transform":[ {"type":"collect", "sort":{"field":"i"} } ] }, { "name":"gums", "values":[ {"x":0, "y":1}, {"x":0, "y":2}, {"x":0, "y":3}, {"x":0, "y":4}, {"x":0, "y":7}, {"x":0, "y":10}, {"x":0, "y":11}, {"x":0, "y":12}, {"x":0, "y":14}, {"x":1, "y":0}, {"x":1, "y":2}, {"x":1, "y":4}, {"x":1, "y":7}, {"x":1, "y":10}, {"x":1, "y":12}, {"x":1, "y":13}, {"x":1, "y":14}, {"x":2, "y":0}, {"x":2, "y":2}, {"x":2, "y":3}, {"x":2, "y":4}, {"x":2, "y":7}, {"x":2, "y":10}, {"x":2, "y":13}, {"x":2, "y":14}, {"x":3, "y":0}, {"x":3, "y":1}, {"x":3, "y":2}, {"x":3, "y":4}, {"x":3, "y":5}, {"x":3, "y":6}, {"x":3, "y":7}, {"x":3, "y":8}, {"x":3, "y":9}, {"x":3, "y":10}, {"x":3, "y":12}, {"x":3, "y":13}, {"x":3, "y":14}, {"x":4, "y":0}, {"x":4, "y":2}, {"x":4, "y":6}, {"x":4, "y":10}, {"x":4, "y":11}, {"x":4, "y":12}, {"x":4, "y":14}, {"x":5, "y":0}, {"x":5, "y":2}, {"x":5, "y":3}, {"x":5, "y":4}, {"x":5, "y":5}, {"x":5, "y":6}, {"x":5, "y":7}, {"x":5, "y":8}, {"x":5, "y":10}, {"x":5, "y":12}, {"x":5, "y":14}, {"x":6, "y":0}, {"x":6, "y":2}, {"x":6, "y":5}, {"x":6, "y":6}, {"x":6, "y":7}, {"x":6, "y":8}, {"x":6, "y":10}, {"x":6, "y":12}, {"x":6, "y":13}, {"x":6, "y":14}, {"x":7, "y":0}, {"x":7, "y":1}, {"x":7, "y":2}, {"x":7, "y":6}, {"x":7, "y":8}, {"x":7, "y":9}, {"x":7, "y":10}, {"x":7, "y":14}, {"x":14, "y":0}, {"x":14, "y":1}, {"x":14, "y":2}, {"x":14, "y":3}, {"x":14, "y":4}, {"x":14, "y":7}, {"x":14, "y":10}, {"x":14, "y":11}, {"x":14, "y":12}, {"x":14, "y":14}, {"x":13, "y":0}, {"x":13, "y":2}, {"x":13, "y":4}, {"x":13, "y":7}, {"x":13, "y":10}, {"x":13, "y":12}, {"x":13, "y":13}, {"x":13, "y":14}, {"x":12, "y":0}, {"x":12, "y":2}, {"x":12, "y":3}, {"x":12, "y":4}, {"x":12, "y":7}, {"x":12, "y":10}, {"x":12, "y":13}, {"x":12, "y":14}, {"x":11, "y":0}, {"x":11, "y":1}, {"x":11, "y":2}, {"x":11, "y":4}, {"x":11, "y":5}, {"x":11, "y":6}, {"x":11, "y":7}, {"x":11, "y":8}, {"x":11, "y":9}, {"x":11, "y":10}, {"x":11, "y":12}, {"x":11, "y":13}, {"x":11, "y":14}, {"x":10, "y":0}, {"x":10, "y":2}, {"x":10, "y":6}, {"x":10, "y":10}, {"x":10, "y":11}, {"x":10, "y":12}, {"x":10, "y":14}, {"x":9, "y":0}, {"x":9, "y":2}, {"x":9, "y":3}, {"x":9, "y":4}, {"x":9, "y":5}, {"x":9, "y":6}, {"x":9, "y":7}, {"x":9, "y":8}, {"x":9, "y":10}, {"x":9, "y":12}, {"x":9, "y":14}, {"x":8, "y":0}, {"x":8, "y":2}, {"x":8, "y":5}, {"x":8, "y":6}, {"x":8, "y":7}, {"x":8, "y":8}, {"x":8, "y":10}, {"x":8, "y":12}, {"x":8, "y":13}, {"x":8, "y":14} ], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"powerGums", "values":[{"x":0, "y":0},{"x":14, "y":0}, {"x":0, "y":14}, {"x":14, "y":14}], "transform":[ {"type":"formula", "expr":"datum.x+'-'+datum.y", "as":"key"} ] }, { "name":"eatenGums", "on":[ { "trigger":"testEaten", "insert":"testEaten" }, { "trigger":"testPowerEaten", "insert":"testPowerEaten" }, { "trigger":"restart", "remove":"restart" } ] }, { "name":"walls", "values":[ {"x":0, "y":0, "vertical":false}, {"x":1, "y":0, "vertical":false}, {"x":2, "y":0, "vertical":false}, {"x":3, "y":0, "vertical":false}, {"x":4, "y":0, "vertical":false}, {"x":5, "y":0, "vertical":false}, {"x":6, "y":0, "vertical":false}, {"x":7, "y":0, "vertical":false}, {"x":8, "y":0, "vertical":false}, {"x":9, "y":0, "vertical":false}, {"x":10, "y":0, "vertical":false}, {"x":11, "y":0, "vertical":false}, {"x":12, "y":0, "vertical":false}, {"x":13, "y":0, "vertical":false}, {"x":14, "y":0, "vertical":false}, {"x":0, "y":15, "vertical":false}, {"x":1, "y":15, "vertical":false}, {"x":2, "y":15, "vertical":false}, {"x":3, "y":15, "vertical":false}, {"x":4, "y":15, "vertical":false}, {"x":5, "y":15, "vertical":false}, {"x":6, "y":15, "vertical":false}, {"x":7, "y":15, "vertical":false}, {"x":8, "y":15, "vertical":false}, {"x":9, "y":15, "vertical":false}, {"x":10, "y":15, "vertical":false}, {"x":11, "y":15, "vertical":false}, {"x":12, "y":15, "vertical":false}, {"x":13, "y":15, "vertical":false}, {"x":14, "y":15, "vertical":false}, {"x":0, "y":0, "vertical":true}, {"x":0, "y":1, "vertical":true}, {"x":0, "y":2, "vertical":true}, {"x":0, "y":3, "vertical":true}, {"x":0, "y":4, "vertical":true}, {"x":0, "y":5, "vertical":false}, {"x":1, "y":5, "vertical":false}, {"x":2, "y":5, "vertical":false}, {"x":0, "y":7, "vertical":false}, {"x":1, "y":7, "vertical":false}, {"x":2, "y":7, "vertical":false}, {"x":0, "y":8, "vertical":false}, {"x":1, "y":8, "vertical":false}, {"x":0, "y":10, "vertical":false}, {"x":1, "y":10, "vertical":false}, {"x":2, "y":10, "vertical":false}, {"x":2, "y":8, "vertical":false}, {"x":3, "y":5, "vertical":true}, {"x":3, "y":6, "vertical":true}, {"x":3, "y":8, "vertical":true}, {"x":3, "y":9, "vertical":true}, {"x":0, "y":10, "vertical":true}, {"x":0, "y":11, "vertical":true}, {"x":0, "y":12, "vertical":true}, {"x":0, "y":13, "vertical":true}, {"x":0, "y":14, "vertical":true}, {"x":15, "y":0, "vertical":true}, {"x":15, "y":1, "vertical":true}, {"x":15, "y":2, "vertical":true}, {"x":15, "y":3, "vertical":true}, {"x":15, "y":4, "vertical":true}, {"x":12, "y":5, "vertical":true}, {"x":14, "y":5, "vertical":false}, {"x":13, "y":5, "vertical":false}, {"x":14, "y":7, "vertical":false}, {"x":13, "y":7, "vertical":false}, {"x":12, "y":7, "vertical":false}, {"x":12, "y":5, "vertical":false}, {"x":12, "y":6, "vertical":true}, {"x":14, "y":8, "vertical":false}, {"x":13, "y":8, "vertical":false}, {"x":14, "y":10, "vertical":false}, {"x":13, "y":10, "vertical":false}, {"x":12, "y":10, "vertical":false}, {"x":12, "y":8, "vertical":false}, {"x":12, "y":8, "vertical":true}, {"x":12, "y":9, "vertical":true}, {"x":15, "y":10, "vertical":true}, {"x":15, "y":11, "vertical":true}, {"x":15, "y":12, "vertical":true}, {"x":15, "y":13, "vertical":true}, {"x":15, "y":14, "vertical":true}, {"x":6, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":6, "vertical":false}, {"x":8, "y":5, "vertical":true}, {"x":8, "y":5, "vertical":false}, {"x":7, "y":5, "vertical":true}, {"x":7, "y":3, "vertical":false}, {"x":8, "y":3, "vertical":false}, {"x":6, "y":3, "vertical":false}, {"x":6, "y":4, "vertical":true}, {"x":9, "y":3, "vertical":true}, {"x":9, "y":4, "vertical":true}, {"x":6, "y":3, "vertical":true}, {"x":3, "y":3, "vertical":false}, {"x":4, "y":3, "vertical":false}, {"x":3, "y":3, "vertical":true}, {"x":5, "y":3, "vertical":true}, {"x":3, "y":4, "vertical":false}, {"x":4, "y":4, "vertical":true}, {"x":5, "y":4, "vertical":true}, {"x":4, "y":5, "vertical":true}, {"x":5, "y":5, "vertical":true}, {"x":4, "y":6, "vertical":false}, {"x":10, "y":3, "vertical":false}, {"x":11, "y":3, "vertical":false}, {"x":10, "y":3, "vertical":true}, {"x":12, "y":3, "vertical":true}, {"x":11, "y":4, "vertical":false}, {"x":10, "y":4, "vertical":true}, {"x":11, "y":4, "vertical":true}, {"x":10, "y":5, "vertical":true}, {"x":11, "y":5, "vertical":true}, {"x":10, "y":6, "vertical":false}, {"x":1, "y":1, "vertical":true}, {"x":1, "y":1, "vertical":false}, {"x":2, "y":1, "vertical":false}, {"x":1, "y":2, "vertical":false}, {"x":2, "y":2, "vertical":false}, {"x":3, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":true}, {"x":4, "y":1, "vertical":false}, {"x":4, "y":2, "vertical":false}, {"x":5, "y":1, "vertical":false}, {"x":6, "y":1, "vertical":false}, {"x":5, "y":2, "vertical":false}, {"x":6, "y":2, "vertical":false}, {"x":7, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":true}, {"x":8, "y":1, "vertical":false}, {"x":9, "y":1, "vertical":false}, {"x":8, "y":2, "vertical":false}, {"x":9, "y":2, "vertical":false}, {"x":11, "y":1, "vertical":true}, {"x":10, "y":1, "vertical":false}, {"x":10, "y":2, "vertical":false}, {"x":12, "y":1, "vertical":true}, {"x":12, "y":1, "vertical":false}, {"x":13, "y":1, "vertical":false}, {"x":12, "y":2, "vertical":false}, {"x":13, "y":2, "vertical":false}, {"x":14, "y":1, "vertical":true}, {"x":1, "y":3, "vertical":true}, {"x":2, "y":3, "vertical":true}, {"x":1, "y":3, "vertical":false}, {"x":13, "y":4, "vertical":false}, {"x":13, "y":3, "vertical":true}, {"x":14, "y":3, "vertical":true}, {"x":13, "y":3, "vertical":false}, {"x":1, "y":4, "vertical":false}, {"x":6, "y":7, "vertical":true}, {"x":9, "y":7, "vertical":true}, {"x":7, "y":8, "vertical":false}, {"x":6, "y":8, "vertical":false}, {"x":8, "y":8, "vertical":false}, {"x":4, "y":7, "vertical":false}, {"x":4, "y":10, "vertical":false}, {"x":5, "y":10, "vertical":false}, {"x":6, "y":10, "vertical":false}, {"x":4, "y":7, "vertical":true}, {"x":4, "y":8, "vertical":true}, {"x":4, "y":9, "vertical":true}, {"x":5, "y":7, "vertical":true}, {"x":5, "y":8, "vertical":true}, {"x":7, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":6, "y":9, "vertical":false}, {"x":5, "y":9, "vertical":false}, {"x":10, "y":7, "vertical":false}, {"x":10, "y":10, "vertical":false}, {"x":9, "y":10, "vertical":false}, {"x":8, "y":10, "vertical":false}, {"x":10, "y":7, "vertical":true}, {"x":10, "y":8, "vertical":true}, {"x":11, "y":9, "vertical":true}, {"x":11, "y":7, "vertical":true}, {"x":11, "y":8, "vertical":true}, {"x":8, "y":9, "vertical":true}, {"x":6, "y":10, "vertical":false}, {"x":9, "y":9, "vertical":false}, {"x":8, "y":9, "vertical":false}, {"x":5, "y":11, "vertical":false}, {"x":6, "y":11, "vertical":false}, {"x":7, "y":11, "vertical":false}, {"x":8, "y":11, "vertical":false}, {"x":9, "y":11, "vertical":false}, {"x":10, "y":11, "vertical":true}, {"x":5, "y":11, "vertical":true}, {"x":5, "y":12, "vertical":false}, {"x":6, "y":12, "vertical":false}, {"x":8, "y":12, "vertical":false}, {"x":9, "y":12, "vertical":false}, {"x":7, "y":12, "vertical":true}, {"x":8, "y":12, "vertical":true}, {"x":7, "y":13, "vertical":true}, {"x":8, "y":13, "vertical":true}, {"x":7, "y":14, "vertical":false}, {"x":1, "y":13, "vertical":true}, {"x":0, "y":13, "vertical":false}, {"x":0, "y":14, "vertical":false}, {"x":2, "y":11, "vertical":false}, {"x":3, "y":11, "vertical":false}, {"x":1, "y":12, "vertical":false}, {"x":1, "y":11, "vertical":false}, {"x":2, "y":13, "vertical":false}, {"x":3, "y":12, "vertical":false}, {"x":4, "y":11, "vertical":true}, {"x":2, "y":12, "vertical":true}, {"x":1, "y":11, "vertical":true}, {"x":3, "y":12, "vertical":true}, {"x":4, "y":13, "vertical":false}, {"x":5, "y":13, "vertical":false}, {"x":4, "y":14, "vertical":false}, {"x":5, "y":14, "vertical":false}, {"x":4, "y":13, "vertical":true}, {"x":6, "y":13, "vertical":true}, {"x":9, "y":13, "vertical":false}, {"x":10, "y":13, "vertical":false}, {"x":9, "y":14, "vertical":false}, {"x":10, "y":14, "vertical":false}, {"x":9, "y":13, "vertical":true}, {"x":11, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":true}, {"x":14, "y":13, "vertical":false}, {"x":14, "y":14, "vertical":false}, {"x":11, "y":11, "vertical":false}, {"x":13, "y":11, "vertical":false}, {"x":11, "y":12, "vertical":false}, {"x":12, "y":11, "vertical":false}, {"x":12, "y":13, "vertical":false}, {"x":13, "y":12, "vertical":false}, {"x":14, "y":11, "vertical":true}, {"x":12, "y":12, "vertical":true}, {"x":11, "y":11, "vertical":true}, {"x":13, "y":12, "vertical":true} ], "transform":[ { "type":"formula", "expr":"datum.x+'-'+datum.y+'-'+datum.vertical", "as":"key" } ] } ] })54:T7bb,([{ "type":"text", "encode":{ "enter":{ "x":{"value":7, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":3, "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"yellow"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"14*sizeFactor"} }, "update":{ "text":{"value":"score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":7, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":4, "scale":"scaleY"}, "fill":{"value":"yellow"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"25*sizeFactor"} }, "update":{ "text":{"signal":"score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":5, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":11, "scale":"scaleY", "offset":{"signal":"blockSize/2"}}, "fill":{"value":"lightblue"}, "align":{"value":"left"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"14*sizeFactor"} }, "update":{ "opacity":{"signal":"highScore?1:0"}, "text":{"value":"high score"} } } }, { "type":"text", "encode":{ "enter":{ "x":{"value":8, "scale":"scaleX", "offset":{"signal":"blockSize/2"}}, "y":{"value":11, "scale":"scaleY","offset":{"signal":"blockSize/2"}}, "fill":{"value":"lightblue"}, "align":{"value":"center"}, "baseline":{"value":"middle"}, "fontSize":{"signal":"20*sizeFactor"} }, "update":{ "opacity":{"signal":"highScore?1:0"}, "text":{"signal":"highScore"} } } }])55:[] 43:{"id":"59feb25ca49401e1","slug":null,"title":"How to create a PacMan game with Vega","thumbnail":"13525021d1de4227a685a8e66ed6682e8bb2f79c584072738b2e911baf36eb62","access_level":"public","create_time":"$D2023-11-16T00:52:09.158Z","update_time":"$D2023-11-16T00:52:09.158Z","view_time":null,"first_public_time":"$D2023-11-16T00:52:09.158Z","has_unpublished_edits":null,"fork":{"id":"c23cf728419280b9","slug":"how-to-create-a-pacman-game-with-vega","title":"How to create a PacMan game with Vega","owner":{"id":"1ab1463344b266e0","login":"mathiastiberghien","name":"Mathias Tiberghien"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca27641953c33f91","login":"nadiafank","name":"Nadia Fankhauser","avatar_url":"https://avatars-next.observableusercontent.com/b50e1e756de7989728519e7a95778298312e092b47c7f530b9d626cf9b9a43f5","tier":"starter_2024","bio":"","following":false},"version":283,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f46a12a631243b11","login":"nadiafank","name":"Nadia Fankhauser","avatar_url":"https://avatars-next.observableusercontent.com/b50e1e756de7989728519e7a95778298312e092b47c7f530b9d626cf9b9a43f5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f46a12a631243b11","login":"nadiafank","name":"Nadia Fankhauser","avatar_url":"https://avatars-next.observableusercontent.com/b50e1e756de7989728519e7a95778298312e092b47c7f530b9d626cf9b9a43f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to create a PacMan game with Vega","cells":[{"id":0,"value":"md`# How to create a PacMan game with Vega\nThis tutorial details the creation of a PacMan game. A great opportunity to work on responsivity, interactions, and triggers.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md `*Ensure the visualization has the focus clicking on it then use Ctrl and the Arrows to move PacMan*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n1. [Responsive Game Area](#game-area)\n2. [PacMan](#pacman)\n3. [Walls](#walls)\n4. [Gums](#gums)\n5. [Ghosts](#ghosts)\n6. [Score](#score)\n7. [Possible Improvments](#improvments)\n\n## Responsive Game Area\n\nThe area game will be a grid made of blocks. Each block will represent a possible position for Pacman, a ghost, a gum or a wall.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`It requires the following signals:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"([\n {\n \"name\":\"grid\",\n \"value\":{\"width\":15, \"height\":15}\n },\n\t {\n \"name\":\"blockSize\",\n \"init\":\"min(width,height)/max(grid.width,grid.height)\"\n },\n {\n \"name\":\"rangeWidthDelta\",\n \"update\":\"(width - blockSize*grid.width)/2\"\n },\n {\n \"name\":\"rangeHeightDelta\",\n \"update\":\"(height - blockSize*grid.height)/2\"\n },\n {\n \"name\":\"sizeFactor\",\n \"init\":\"blockSize*15/600\"\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"([\n{\n \"name\": \"columns\",\n \"transform\": [\n {\n \"type\": \"sequence\",\n \"start\": 0,\n \"stop\": { \"signal\": \"grid.width\" },\n \"step\": 1\n }\n ]\n },\n {\n \"name\": \"rows\",\n \"transform\": [\n {\n \"type\": \"sequence\",\n \"start\": 0,\n \"stop\": { \"signal\": \"grid.height\" },\n \"step\": 1\n }\n ]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`These sequences from 0 to \"grid\" width and height will be used as the domain of the location scales of the game.\n\nFinally we create the location scales:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"([{\n \"name\":\"scaleX\",\n \"type\":\"band\",\n \"domain\":{\"data\":\"columns\", \"field\":\"data\"},\n \"range\":[{\"signal\": \"rangeWidthDelta\"},{\"signal\":\"width-rangeWidthDelta\"}]\n },\n {\n \"name\":\"scaleY\",\n \"type\":\"band\",\n \"domain\":{\"data\":\"rows\", \"field\":\"data\"},\n \"range\":[{\"signal\": \"rangeHeightDelta\"},{\"signal\":\"height-rangeHeightDelta\"}]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`With these scale we can now locate any object in the grid using a column and row index.\n\nThe gaming area will not be represented but to check that everything is working fine, let’s create some marks:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`Once this is done, we can change the \"width\", \"height\" of the visualization and of the grid to check that whatever the values you are using, you always have a grid centered in the visualization, the text never overflowing. You will use the \"blockSize\" and the \"sizeFactor\" signal in the other marks to ensure that the entire visualization will always be responsive.\n\n This is of course optional: you might prefer to use a fixed width and height for the visuzalization, but users are used to responsiveness and it's not a lot of work to achieve it.\n\n ## PacMan\n\n Now that we have the game area, let’s create the PacMan.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`Here are the PacMan signals:\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`- \"key\" will capture the keyboard inputs\n- \"pacManXOffset\" and \"pacManYOffset\" will contain the horizontal and vertical offset to apply to PacMan coordinates according to the arrows of the keyboard\n- \"pacManIsOpen\" is the PacMan mouth animation based on a timer\n- \"pacManX\" and \"pacManY\" represent the location of the PacMan in the grid. There is a test ensuring that PacMan always remains inside the grid.\n\nThis is the mark to create PacMan:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`Pac man is a group containing one arc for the body and one symbol for the eye. Location is based on \"pacManX\" and \"pacManY\" using the location scales. The size of the arc and symbol are based on \"blockSize\" and \"sizeFactor\". the \"startAngle\" and \"endAngle\" are related to \"pacManIsOpen\" for the angle and \"pacManXoffset\" for the direction.\n\nPacMan is now alive and ready to discover the world!\n\n## Walls\n\nThe walls are defining the maze and should block the PacMan.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`Walls are defined in a data source:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"([{ \n \"name\":\"walls\",\n \"values\":[\n {\"x\":13, \"y\":15, \"vertical\":false},\n {\"x\":14, \"y\":15, \"vertical\":false}, \n\n {\"x\":0, \"y\":0, \"vertical\":true},\n {\"x\":0, \"y\":1, \"vertical\":true}\n ],\n \"transform\":[\n {\n \"type\":\"formula\",\n \"expr\":\"datum.x+'-'+datum.y+'-'+datum.vertical\",\n \"as\":\"key\"\n }\n ]\n}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\n - \"x\" and \"y\" properties are defining the location of the wall\n - \"vertical\" defines the orientation\n\n They are represented using a rect mark:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"([{\n \"type\":\"rect\",\n \"from\":{\"data\":\"walls\"},\n \"encode\":{\n \"enter\":{\n \"x\":{\"signal\":\"datum.x < grid.width ? datum.x : grid.width-1\", \"scale\":\"scaleX\", \"offset\":{\"signal\":\"datum.vertical? (datum.x < grid.width ? datum.x === 0 ? 0 : -1 : blockSize - blockSize/10):0\"}},\n \"y\":{\"signal\":\"datum.y < grid.height ? datum.y : grid.height-1\", \"scale\":\"scaleY\", \"offset\":{\"signal\":\"datum.vertical? 0: datum.y < grid.height? datum.y === 0 ? 0 : -1 : blockSize -blockSize/10\"}},\n \"fill\":{\"value\":\"blue\"},\n \"width\":{\"signal\":\"datum.vertical?blockSize/10:blockSize\"},\n \"height\":{\"signal\":\"datum.vertical?blockSize:blockSize/10\"} \n\n }\n }\n}])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`It will display horizontal or vertical rectangle adjusting the offsets to fit into the grid and to join 2 perpendicular walls.\n\nAs PacMan should not be able to pass trough a wall, we need to add or update some signals:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`- \"pacManHasWallX\" and \"pacManHasWally\" are testing if the next coordinates of the pacMan will meet a wall using indata function\n- \"pacManCanMoveX\" and \"pacManCanMoveY\" will check if a move is possible. For the moment it only check for wall but later we will also need to check for ghosts\n- \"pacManX\" and \"pacManY\" have been update to apply the offset only if the move is allowed\n\nThis system allows us to change or maze without affecting the wall detection. We can also imagine adding a level property in the \"walls\" data source and filter by level, allowing the game to support multiple levels.\n\n## Gums\n\nThe gums are elements that can be eaten. Some of them are giving the PacMan a big power.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`The gums require 3 data sources:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"([{\n \"name\":\"gums\",\n \"values\":[\n {\"x\":0, \"y\":1},\n {\"x\":0, \"y\":2},\n {\"x\":0, \"y\":3},\n {\"x\":0, \"y\":4},\n \n ],\n \"transform\":[\n {\"type\":\"formula\", \"expr\":\"datum.x+'-'+datum.y\", \"as\":\"key\"}\n ]\n },\n {\n \"name\":\"powerGums\",\n \"values\":[{\"x\":0, \"y\":0},{\"x\":14, \"y\":0}, {\"x\":0, \"y\":14}, {\"x\":14, \"y\":14}],\n \"transform\":[\n {\"type\":\"formula\", \"expr\":\"datum.x+'-'+datum.y\", \"as\":\"key\"}\n ]\n },\n {\n \"name\":\"eatenGums\",\n \"on\":[\n {\n \"trigger\":\"testEaten\",\n \"insert\":\"testEaten\"\n },\n {\n \"trigger\":\"testPowerEaten\",\n \"insert\":\"testPowerEaten\"\n },\n {\n \"trigger\":\"restart\",\n \"remove\":\"restart\"\n }\n ]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`- \"gums\" will contain the location of normal gums\n - \"powerGums\" will contain the location of power gums\n - \"eatenGums\" will contain all the gums eaten by the PacMan\n\n To update the eaten gums and check if PacMan suceed to finish a level we will use the following signals:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"([{\n \"name\":\"win\",\n \"update\":\"length(data('gums')) + length(data('powerGums')) === length(data('eatenGums'))\"\n },\n {\n \"name\":\"restart\",\n \"update\":\"win === true\"\n },\n {\n \"name\":\"testEaten\",\n \"update\":\"!restart && (indata('gums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null\"\n },\n {\n \"name\":\"testPowerEaten\",\n \"update\":\"!restart && (indata('powerGums', 'key', pacManX+'-'+pacManY) && !indata('eatenGums', 'key', pacManX+'-'+pacManY)) ? {x:pacManX, y:pacManY, key:pacManX+'-'+pacManY} : null\"\n },\n {\n \"name\":\"superPower\",\n \"init\":\"0\",\n \"on\": [{\"events\":{\"type\":\"timer\", \"throttle\": 1000}, \"force\": true, \"update\":\"superPower > 0 ? superPower - 1 : 0\"},\n {\"events\":{\"signal\":\"testPowerEaten\"}, \"update\":\"testPowerEaten? 15 : superPower\"},\n {\"events\":{\"signal\":\"restart\"}, \"update\":\"0\"}]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`- \"win\" will evaluate if all the gums have been eaten comparing the size of all gums data sources\n- \"restart\" will be triggered when win is true. It will clear the \"eatenGums\" table and reset PacMan location\n- \"testEaten\" and \"testPowerEaten\" evaluate if the PacMan location meet a gum. They will trigger inserts into the \"eatenGums\" table\n- \"superPower\" is triggered when a powerGum has been eaten. It will set the power mode to 15 seconds\n\nTo render the gums we will use the symbols:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"([{\n \"type\":\"symbol\",\n \"from\":{\"data\":\"gums\"},\n \"encode\":{\n \"enter\":{\n \"x\":{\"field\":\"x\", \"scale\":\"scaleX\", \"offset\":{\"signal\":\"blockSize/2\"}},\n \"y\":{\"field\":\"y\", \"scale\":\"scaleY\", \"offset\":{\"signal\":\"blockSize/2\"}},\n \"fill\":{\"value\":\"grey\"},\n \"size\":{\"signal\":\"pow(10*sizeFactor, 2)\"}\n },\n \"update\":{\n \"opacity\":[{\"test\":\"indata('eatenGums', 'key', datum.x+'-'+datum.y)\", \"value\": 0}, {\"value\":1}]\n }\n }\n },\n {\n \"type\":\"symbol\",\n \"from\":{\"data\":\"powerGums\"},\n \"encode\":{\n \"enter\":{\n \"x\":{\"field\":\"x\", \"scale\":\"scaleX\", \"offset\":{\"signal\":\"blockSize/2\"}},\n \"y\":{\"field\":\"y\", \"scale\":\"scaleY\", \"offset\":{\"signal\":\"blockSize/2\"}},\n \"size\":{\"signal\":\"pow(18*sizeFactor, 2)\"},\n \"fill\":{\"value\":\"white\"}\n },\n \"update\":{\n \"opacity\":[{\"test\":\"indata('eatenGums', 'key', datum.x+'-'+datum.y)\", \"value\": 0}, {\"value\":1}]\n }\n }\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`- the \"opacity\" of the gums will depend of an indata test\n- the location is related to the \"blockSize\" and the size to the \"sizeFactor\" to ensure responsivity\n\n## Ghosts\n\nThe ghost is certainly the most complicated part: because they are not moved by a human we need to create an algorithm that will make them trying to catch PacMan or escape from him trying to avoid:\n-\tfreeze against a wall maze\n-\tOverlapping another ghost\n-\tNot pass through the walls\n-\tBe blocked in a loop\nAnd the challenge is that for the algorithm you can’t rely on custom methods, iteration, or local variable declaration. You will have to rely on signal, data sources and the ternary operator “?:” which is great but not so easy to read or debug.\nTo achieve that we must first simplify the ghosts to one unique ghost and once its algorithm has been approved create the other with the same logic.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`Here is the approach for the ghost “IA”.\n- First, I tried to use the delta of the ghost position and PacMan position to set the ghost direction. But when the ghost met a wall in is way to PacMan it stays without moving.\n- I then added a condition checking if the ghost was blocked and if it was, to move in the direction transversal. The ghost was not blocked but enter in loops going backward and forward.\n- I finally opted for a table of preferences: according to the delta with PacMan it will ordonate the directions it want to follow, using the opposite of the last chosen direction as the last wish.\nWhen a ghost is blocked a timer change the directions index so that the ghost will always select the path that doesn’t block going backward being always the last option. To avoid circular references, I was forced to use a timer and I had to calibrate experimentally the delay to change the direction index.\n\nEach ghost will require the same set of signal and data.\nThe data sources are:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"([{\n \"name\":\"ghosts\",\n \"values\":[\n {\n \"x\":0,\n \"y\":0,\n \"color\":\"red\"\n }\n ]\n },\n {\n \"name\":\"eatenGhosts\",\n \"on\": [{\n \"trigger\":\"testEatenGhost\",\n \"insert\":\"testEatenGhost\"\n },\n {\n \"trigger\":\"!superPower\",\n \"remove\":\"!superPower\"\n }]\n },\n {\n \"name\":\"gRedDecisions\",\n \"values\":[],\n \"transform\":[\n {\"type\":\"collect\",\n \"sort\":{\"field\":\"i\"}\n }\n ]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`- the \"ghosts\" table will contain the initial location and the color of each ghost\n- the \"eatenGhosts\" table will the ghosts eaten by PacMan when the super mode is activated\n- the \"g(ColorOfTheGhost)Decisions\" table will store and order the desired directions for each ghost\n\nThe signals are:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"([{\n \"name\":\"testEatenGhost\",\n \"update\":\"superPower ? ((gRedX === pacManX && gRedY === pacManY) ? gRed : null) : null\"\n },\n {\n \"name\":\"pacManHasGhost\",\n \"update\":\"!superPower && ((pacManX + pacManXOffset === gRedX) && (pacManY + pacManYOffset === gRedY))\"\n },\n {\n \"name\":\"loose\",\n \"on\":[{\"events\":{\"type\":\"timer\", \"throttle\": 400 }, \"update\":\"!superPower && (pacManX === gRedX && pacManY === gRedY)\"}]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`- \"testEatenGhost\" will update the eatenGhosts table when PacMan is in powerMode\n- \"pacManHasGhost\" will test if the next move will meet a Ghost\n- \"loose\" will check if a ghost has eaten PacMan and trigger a game restart\n\nThe ghosts are represented as a symbol mark with a custom shape:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`The size of the ghost will be related to the \"blockSize\" to ensure responsivity.\n\nTo create all the ghost, once the IA has been validated on one ghost, we just have to copy past the signals ghost related and update the pacMan ghost detection.\n\nBecause the ghosts were ending to overlap. I had to add a ghost detection signal on some ghosts:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"([{\n \"name\":\"gBlueHasGhost\",\n \"update\":\"(gBlueX == gRedX && gBlueY === gRedY)\"\n },\n {\n \"name\":\"gGreenHasGhost\",\n \"update\":\"(gGreenX === gRedX && gGreenY === gRedY) || (gGreenX === gBlueX && gGreenY+gGreenOffsetY === gBlueY)\"\n },\n {\n \"name\":\"gOrangeHasGhost\",\n \"update\":\"(gOrangeX === gRedX && gOrangeY === gRedY) || (gOrangeX === gBlueX && gOrangeY === gBlueY) || (gOrangeX === gGreenX && gOrangeY === gGreenY)\"\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`Some ghosts won't move when overlapped.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## Score\n\n This is a final touch: score adds user interest, and more if she have a high-score to beat.\n\n Let's add some signals:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"([{\n \"name\":\"score\",\n \"init\":\"0\",\n \"on\": [\n {\"events\":{\"signal\":\"testEaten\"},\"update\":\"testEaten ? score + 10 : score\"},\n {\"events\":{\"signal\":\"testPowerEaten\"},\"update\":\"testPowerEaten ? score + 50 : score\"},\n {\"events\":{\"signal\":\"testEatenGhost\"},\"update\":\"testEatenGhost ? score + 100 : score\"},\n {\"events\":{\"signal\":\"loose\"}, \"force\":true ,\"update\":\"restart ? 0 : score\"}\n ]\n },\n {\n \"name\":\"highScore\",\n \"init\":\"0\",\n \"on\":[\n {\"events\":{\"signal\":\"score\"}, \"update\":\"max(score,highScore)\"}\n ]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`\n- \"score\" will be increased when PacMan eats a gum a power gum or a ghost and will be set to 0 when is eaten by a ghost\n- \"highScore\" will stores the best score\n\nThe scores are represented by text marks:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`The \"fontSize\" property is related to \"sizeFactor\" to ensure responsivity.\n\n## Possible Improvments\n\nHere are some ideas, for people who wants to improve the game.\n\n-\tThe IA could certainly be improved, and also individualized as in the original version\n-\tShould handle levels with different maze\n-\tCreate an animation when PacMan die\n-\tCreate a win animation\n-\tSupports PacMan lives`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 44:"$43:body"