ben.burlingham
/
ricochet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Foundation for arrow-based paths.

Browse Source
master
Ben Burlingham 5 years ago
parent ab460d6af8
commit 212ff7b227
4 changed files with 255 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 317
      client/board.js
  2. 24
      index.css
  3. 12
      index.html
  4. 2
      server/game.js

317
client/board.js
Unescape View File

@ -22,7 +22,7 @@ Board.prototype.drawRobots = function(robots) {
// Get robot from ij: document.querySelector('[data-robot=i-j]')
const robot = document.createElement('div');
robot.className = 'content-robot';
robot.style.background = color;
robot.style.background = `radial-gradient(circle at ${s/3}px ${s/3}px, ${color} 10%, #000)`;
robot.style.borderRadius = (s / 2) + 'px';
robot.style.height = s + 'px';
robot.style.width = s + 'px';
@ -33,19 +33,81 @@ Board.prototype.drawRobots = function(robots) {
const shadow = document.createElement('div');
shadow.className = 'content-shadow';
shadow.style.background = color;
shadow.style.background = `radial-gradient(circle at ${s/3}px ${s/3}px, ${color} 10%, #000)`;
shadow.style.borderRadius = (s / 2) + 'px';
shadow.style.height = s + 'px';
shadow.style.width = s + 'px';
shadow.style.left = x + 'px';
shadow.style.top = y + 'px';
shadow.id = `shadow-${id}`;
shadow.dataset.parentRobot = id;
shadow.dataset.currentIJ = `${i}-${j}`;
this.parent.appendChild(robot);
const up = document.createElement('div');
up.className = 'content-arrow';
up.innerHTML = "▲"
up.style.left = x + 'px';
up.style.top = (y - s) + 'px';
up.style.lineHeight = s + 'px';
up.style.height = s + 'px';
up.style.width = s + 'px';
up.dataset.i = i;
up.dataset.j = j;
up.dataset.direction = 'up';
up.dataset.parentRobot = id;
up.addEventListener('click', this.moveRobot.bind(this));
const down = document.createElement('div');
down.className = 'content-arrow';
down.innerHTML = "▼"
down.style.left = x + 'px';
down.style.top = (y + s) + 'px';
down.style.lineHeight = s + 'px';
down.style.height = s + 'px';
down.style.width = s + 'px';
down.dataset.i = i;
down.dataset.j = j;
down.dataset.direction = 'down';
down.dataset.parentRobot = id;
down.addEventListener('click', this.moveRobot.bind(this));
const left = document.createElement('div');
left.className = 'content-arrow';
left.innerHTML = "◀"
left.style.left = (x - s) + 'px';
left.style.top = y + 'px';
left.style.lineHeight = s + 'px';
left.style.height = s + 'px';
left.style.width = s + 'px';
left.dataset.i = i;
left.dataset.j = j;
left.dataset.direction = 'left';
left.dataset.parentRobot = id;
left.addEventListener('click', this.moveRobot.bind(this));
const right = document.createElement('div');
right.className = 'content-arrow';
right.innerHTML = "▶"
right.style.left = (x + s) + 'px';
right.style.top = y + 'px';
right.style.lineHeight = s + 'px';
right.style.height = s + 'px';
right.style.width = s + 'px';
right.dataset.i = i;
right.dataset.j = j;
right.dataset.direction = 'right';
right.dataset.parentRobot = id;
right.addEventListener('click', this.moveRobot.bind(this));
// this.parent.appendChild(robot);
this.parent.appendChild(shadow);
this.parent.appendChild(up);
this.parent.appendChild(down);
this.parent.appendChild(left);
this.parent.appendChild(right);
shadow.addEventListener('mousedown', this.onRobotDragStart.bind(this));
// shadow.addEventListener('mousedown', this.onRobotDragStart.bind(this));
});
};
@ -104,111 +166,174 @@ Board.prototype.drawWalls = function(edges) {
})
};
// i1 and j1 are the original position.
// i2 and j2 are the requested position.
// Check all the edges crossed between the two to find if it's a valid move.
Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
if (i1 !== i2 && j1 !== j2) {
return "diagonal move";
}
Board.prototype.moveRobot = function(evt) {
const i = evt.currentTarget.dataset.i * 1;
const j = evt.currentTarget.dataset.j * 1;
const direction = evt.currentTarget.dataset.direction;
const id = evt.currentTarget.dataset.parentRobot;
if (i1 === i2 && j1 == j2) {
return;
} else if (i1 === i2 && j1 > j2) {
// Moving up.
for (let j = j2; j < j1; j++) {
const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
const ij = `${i1}-${j}`;
const { i: i2, j: j2 } = this.findNextObstacle({ direction, i, j });
if (this.robots[ij]) {
return document.querySelector(`[data-robot='${ij}']`);
}
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else if (i1 === i2 && j1 < j2) {
// Moving down.
for (let j = j1; j < j2; j++) {
const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
const ij = `${i1}-${j + 1}`;
const {x, y} = this.squares.ijToXy({ i: i2, j: j2 });
const robot = document.getElementById(`shadow-${id}`);
robot.style.left = x + 'px'
robot.style.top = y + 'px'
};
if (this.robots[ij]) {
return document.querySelector(`[data-robot='${ij}']`);
}
Board.prototype.findNextObstacle = function({ direction, i, j }) {
switch (direction) {
case 'right':
for (let ii = i + 1; ii < this.squares.perSide; ii++) {
const edge = `${ii + 1}-${j}-${ii + 1}-${j + 1}`;
const ij = `${ii}-${j}`;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
if (this.robots[ij] || this.walls[edge]) {
return { i: ii, j };
}
}
}
} else if (j1 === j2 && i1 < i2) {
// Moving right.
for (let i = i1; i < i2; i++) {
const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
const ij = `${i + 1}-${j1}`;
if (this.robots[ij]) {
return document.querySelector(`[data-robot='${ij}']`);
break;
case 'left':
for (let ii = i - 1; ii >= 0; ii--) {
const edge = `${ii}-${j}-${ii}-${j + 1}`;
const ij = `${ii}-${j}`;
if (this.robots[ij] || this.walls[edge]) {
return { i: ii, j };
}
}
break;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else {
// Moving left.
for (let i = i2; i < i1; i++) {
const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
const ij = `${i}-${j1}`;
if (this.robots[ij]) {
return document.querySelector(`[data-robot='${ij}']`);
}
case 'up':
for (let jj = j - 1; jj >= 0; jj--) {
const edge = `${i}-${jj}-${i + 1}-${jj}`;
const ij = `${i}-${jj}`;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
if (this.robots[ij] || this.walls[edge]) {
return { i, j: jj };
}
}
}
}
};
Board.prototype.onRobotDragStart = function(evt) {
evt.stopPropagation();
evt.preventDefault();
break;
this.listeners.onRobotDragStop = this.onRobotDragStop.bind(this);
this.listeners.onRobotDrag = this.onRobotDrag.bind(this, evt.currentTarget);
document.body.addEventListener('mouseup', this.listeners.onRobotDragStop);
document.body.addEventListener('mousemove', this.listeners.onRobotDrag);
const { x, y } = this.squares.ijToXy(this.squares.xyToIj(evt));
evt.currentTarget.style.left = x + 'px';
evt.currentTarget.style.top = y + 'px';
};
case 'down':
for (let jj = j + 1; jj < this.squares.perSide; jj++) {
const edge = `${i}-${jj + 1}-${i + 1}-${jj + 1}`;
const ij = `${i}-${jj}`;
Board.prototype.onRobotDrag = function(dragTarget, evt) {
const [ i1, j1 ] = dragTarget.dataset.currentIJ.split('-').map(v => v * 1);
// cost { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });
if (this.robots[ij] || this.walls[edge]) {
return { i, j: jj };
}
}
break;
}
const blockage = this.getBlockers({ i1, j1, i2, j2 });
throw Error("Could not find next obstacle, no direction found. ", direction, i, j);
}
if (blockage) {
// console.log(blockage)
return;
}
// i1 and j1 are the original position.
// i2 and j2 are the requested position.
// Check all the edges crossed between the two to find if it's a valid move.
// Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
// if (i1 !== i2 && j1 !== j2) {
// return "diagonal move";
// }
// if (i1 === i2 && j1 == j2) {
// return;
// } else if (i1 === i2 && j1 > j2) {
// // Moving up.
// for (let j = j2; j < j1; j++) {
// const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
// const ij = `${i1}-${j}`;
// if (this.robots[ij]) {
// return document.querySelector(`[data-robot='${ij}']`);
// }
// if (this.walls[edge]) {
// return document.querySelector(`[data-wall='${edge}']`);
// }
// }
// } else if (i1 === i2 && j1 < j2) {
// // Moving down.
// for (let j = j1; j < j2; j++) {
// const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
// const ij = `${i1}-${j + 1}`;
// if (this.robots[ij]) {
// return document.querySelector(`[data-robot='${ij}']`);
// }
// if (this.walls[edge]) {
// return document.querySelector(`[data-wall='${edge}']`);
// }
// }
// } else if (j1 === j2 && i1 < i2) {
// // Moving right.
// for (let i = i1; i < i2; i++) {
// const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
// const ij = `${i + 1}-${j1}`;
// if (this.robots[ij]) {
// return document.querySelector(`[data-robot='${ij}']`);
// }
// if (this.walls[edge]) {
// return document.querySelector(`[data-wall='${edge}']`);
// }
// }
// } else {
// // Moving left.
// for (let i = i2; i < i1; i++) {
// const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
// const ij = `${i}-${j1}`;
// if (this.robots[ij]) {
// return document.querySelector(`[data-robot='${ij}']`);
// }
// if (this.walls[edge]) {
// return document.querySelector(`[data-wall='${edge}']`);
// }
// }
// }
// };
// Board.prototype.onRobotDragStart = function(evt) {
// evt.stopPropagation();
// evt.preventDefault();
// this.listeners.onRobotDragStop = this.onRobotDragStop.bind(this);
// this.listeners.onRobotDrag = this.onRobotDrag.bind(this, evt.currentTarget);
// document.body.addEventListener('mouseup', this.listeners.onRobotDragStop);
// document.body.addEventListener('mousemove', this.listeners.onRobotDrag);
// const { x, y } = this.squares.ijToXy(this.squares.xyToIj(evt));
// evt.currentTarget.style.left = x + 'px';
// evt.currentTarget.style.top = y + 'px';
// };
// Board.prototype.onRobotDrag = function(dragTarget, evt) {
// const [ i1, j1 ] = dragTarget.dataset.currentIJ.split('-').map(v => v * 1);
// // cost { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
// const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });
// const blockage = this.getBlockers({ i1, j1, i2, j2 });
// if (blockage) {
// // console.log(blockage)
// return;
// }
const { x, y } = this.squares.ijToXy({ i: i2, j: j2 });
// const { x, y } = this.squares.ijToXy({ i: i2, j: j2 });
dragTarget.style.left = x + 'px';
dragTarget.style.top = y + 'px';
};
// dragTarget.style.left = x + 'px';
// dragTarget.style.top = y + 'px';
// };
Board.prototype.onRobotDragStop = function(_) {
document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
};
// Board.prototype.onRobotDragStop = function(_) {
// document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
// document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
// };

24
index.css
Unescape View File

@ -16,6 +16,8 @@ body {
#controls-container {
background: #e7e7e7;
border: solid #c7c7c7;
border-width: 0 1px;
bottom: 0;
left: 20px;
position: absolute;
@ -60,7 +62,6 @@ body {
#controls-guesses {
background: salmon;
}
.controls-guess {
@ -77,6 +78,15 @@ body {
background: orange;
}
#controls-footer {
background: #9A748C;
bottom: 0;
left: 0;
padding: 24px;
position: absolute;
right: 0;
}
#content-container {
background-color: #28313b;
background-image: linear-gradient(315deg, #28313b 0%, #1A2026 74%);
@ -117,4 +127,16 @@ body {
.content-shadow {
position: absolute;
transition: left 0.4s cubic-bezier(0,1,.5,1), top 0.4s cubic-bezier(0,1,.5,1);
}
.content-arrow {
color: #aaa;
cursor: pointer;
position: absolute;
text-align: center;
}
.content-arrow:hover {
color: #000;
}

12
index.html
Unescape View File

@ -21,11 +21,15 @@
<button type='button'>&gt;</button>
<div class="controls-room-errors"></div>
</div>
<!-- <div class="rounds">
<div>Reset your board</div>
<button type='button' id='game-start'>Start New Round</button>
<div class="timer">0:42</div>
<button type='button'>Skip Timer</button>
</div>
<!-- <div class="rounds">
</div> -->
<div id="controls-players">
@ -38,6 +42,10 @@
<div id="controls-guesses">
<div class='controls-subtitle'>Guess</div>
</div>
<div id="controls-footer">
<div>Heart (match head height)</div>
</div>
</div>
<div id="content-container">

2
server/game.js
Unescape View File

@ -25,7 +25,7 @@ Game.prototype.getRobots = function() {
return [
{i: 4, j: 3, color: '#E00000' },
{i: 4, j: 7, color: '#00C000' },
{i: 1, j: 19, color: '#0000C0' }
{i: 1, j: 19, color: '#0000FF' }
];
}

Write Preview
Loading…
Cancel
Save