I have this code, in script (p5.js), I am running it and works as expected, but the moment I include the path code, that helps in finding the previous parents to form a path to the end goal, the browser crushes, as the images show. It fist colors the 3 cells then crashes. Here is the code.
var col = 12, row = 12, grid = new Array(col), openSet = [], closeSet = [], start, end, w, h, path = [];
function removefromArray(array_, element){
for(var i = array_.length - 1; i >= 0; i--){
if(array_[i] == element){
array_.splice(i, 1);
}
}
}
function heuristic(a, b){
var distance = abs(a.i - b.i) + abs(a.j - b.j);
return distance;
}
function Spot(i, j){
this.i = i;
this.j = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function (color){
fill(color);
if(this.wall){
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid){
var i = this.i, j = this.j;
if(i < col - 1){
this.neighbor.push(grid[i+1] [j]);
}
if(i > 0){
this.neighbor.push(grid[i-1] [j]);
}
if(j < row-1){
this.neighbor.push(grid[i] [j+1]);
}
if(j > 0){
this.neighbor.push(grid[i] [j-1]);
}
}
}
function setup(){
createCanvas(500,500);
console.log("A*");
w = width / col;
h = height / row;
for( var i = 0; i< col; i++){
grid[i] = new Array(row);
}
//Adding a spot
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j] = new Spot(i,j);
}
}
//Adding a neighbor
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j].addNeighbor(grid);
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
openSet.push(start);
}
function draw(){
var winner = 0;
if(openSet.length > 0){
for( var i = 0; i< openSet.length; i++){
if(openSet[i].f < openSet[winner].f){
winner = i;
}
}
var current = openSet[winner];
if(current === end){
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for(var i = 0; i < neighbors.length; i++){
var the_neighbor = neighbors[i];
if(!closeSet.includes(the_neighbor)){
var tempG = current.g + 1;
}
if(openSet.includes(the_neighbor)){
if(tempG < the_neighbor.g){
the_neighbor.g = tempG;
}
}
else{
the_neighbor.g = tempG;
openSet.push(the_neighbor);
}
the_neighbor.h = heuristic(the_neighbor, end);
the_neighbor.f = the_neighbor.g + the_neighbor.h;
the_neighbor.parent = current; // the previous node
}
}
else{
// no solution
}
background(0)
for( var i = 0; i< col; i++){
for( var j = 0; j< row; j++){
grid[i][j].show(color(255));
}
}
for( var i = 0; i< openSet.length; i++){
openSet[i].show(color("green"));
}
for( var i = 0; i< closeSet.length; i++){
closeSet[i].show(color("red"));
}
// path = [];
// var temp = current;
// path.push(temp);
// while(temp.parent){
// path.push(temp.parent);
// temp = temp.parent;
// }
// for(var i = 0; i < path.length; i++){
// path[i].show(color(0,0,255));
// }
}
If I try to remove the comments slash for this last part, the system will run for about 5secs then crashes. Someone with the solution, I will highly appreciate.
Result when the path part is uncommented
You are generating a cycle somehow in the chain of parents (i.e. Spot A has parent Spot B and Spot B has parent Spot A), which is causing an infinite loop. I'm not sure exactly where/why this is happening. Your code is a bit hard to read. You should avoid nondescript one letter variable & property names.
Also there are several scoping issues that may be causing unexpected behavior. The keyword var is the worst element of any programming language since goto and it should be scoured from the face of the internet with the fire of 1000 suns. Please use let. See the comments below for more explanation.
var col = 12,
row = 12,
grid = new Array(col),
openSet = [],
closeSet = [],
start, end, w, h, path = [];
function removefromArray(array_, element) {
for (let i = array_.length - 1; i >= 0; i--) {
if (array_[i] == element) {
array_.splice(i, 1);
}
}
}
function heuristic(a, b) {
var distance = abs(a.i - b.i) + abs(a.j - b.j);
return distance;
}
function Spot(i, j) {
this.i = i;
this.j = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function(color) {
fill(color);
if (this.wall) {
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid) {
let i = this.i,
j = this.j;
if (i < col - 1) {
this.neighbor.push(grid[i + 1][j]);
}
if (i > 0) {
this.neighbor.push(grid[i - 1][j]);
}
if (j < row - 1) {
this.neighbor.push(grid[i][j + 1]);
}
if (j > 0) {
this.neighbor.push(grid[i][j - 1]);
}
}
}
function setup() {
createCanvas(500, 500);
console.log("A*");
w = width / col;
h = height / row;
for (let i = 0; i < col; i++) {
grid[i] = new Array(row);
}
//Adding a spot
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j] = new Spot(i, j);
}
}
//Adding a neighbor
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].addNeighbor(grid);
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
openSet.push(start);
}
function draw() {
let winner = 0;
let current
if (openSet.length > 0) {
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].f < openSet[winner].f) {
winner = i;
}
}
current = openSet[winner];
if (current === end) {
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for (let i = 0; i < neighbors.length; i++) {
var the_neighbor = neighbors[i];
// The use of var here results in very weird behavior
// where tempG's value is preserved from the previous
// iteration of this loop even when it is not assigned
// a value. If that is desired you should declare this
// variable outside of the for loop.
//
// If you always use let isntead of var you will get
// errors instead of bizarre behavior. That will help
// you be deliberate about your variable scoping.
if (!closeSet.includes(the_neighbor)) {
var tempG = current.g + 1;
} else {
print('tempG not set');
}
if (openSet.includes(the_neighbor)) {
if (tempG < the_neighbor.g) {
the_neighbor.g = tempG;
}
} else {
print(`tempG: ${tempG}`);
the_neighbor.g = tempG;
openSet.push(the_neighbor);
print(`openSet: ${openSet.length}`);
}
the_neighbor.h = heuristic(the_neighbor, end);
the_neighbor.f = the_neighbor.g + the_neighbor.h;
the_neighbor.parent = current; // the previous node
}
} else {
// no solution
}
background(0)
for (let i = 0; i < col; i++) {
for (var j = 0; j < row; j++) {
grid[i][j].show(color(255));
}
}
for (let i = 0; i < openSet.length; i++) {
openSet[i].show(color("green"));
}
for (let i = 0; i < closeSet.length; i++) {
closeSet[i].show(color("red"));
}
path = [];
let temp = current;
path.push(temp);
while (temp.parent) {
if (path.includes(temp.parent)) {
print('Cycle detected!');
console.log({ current: { i: temp.i, j: temp.j }, parent: { i: temp.parent.i, j: temp.parent.j } });
break;
}
path.push(temp.parent);
temp = temp.parent;
}
for (let i = 0; i < path.length; i++) {
path[i].show(color(0, 0, 255));
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
Update: Infinite Loop Fix
The part of your code that updates neighbors deviates from the definition of A* pretty substantially. Here's what I came up with (single letter variable names replaces with meaningful names):
let tentativePathScore = current.shortestPathScore + 1;
if (the_neighbor.heuristicScore === undefined) {
the_neighbor.heuristicScore = heuristic(the_neighbor, end);
}
if (the_neighbor.combinedScore === undefined ||
tentativePathScore + the_neighbor.heuristicScore < the_neighbor.combinedScore) {
// Update the path score and combined score for this neighbor.
the_neighbor.shortestPathScore = tentativePathScore;
the_neighbor.combinedScore = the_neighbor.shortestPathScore + the_neighbor.heuristicScore;
the_neighbor.parent = current; // the previous node
if (!openSet.includes(the_neighbor)) {
openSet.push(the_neighbor);
}
}
And here's a working snippet with walls added:
let col = 12,
row = 12,
grid = new Array(col),
openSet = [],
closeSet = [],
start, end, w, h, path = [];
function removefromArray(array_, element) {
for (let i = array_.length - 1; i >= 0; i--) {
if (array_[i] == element) {
array_.splice(i, 1);
}
}
}
function heuristic(a, b) {
if (a.wall) {
return Infinity;
}
return abs(a.i - b.i) + abs(a.j - b.j);
}
function Spot(i, j) {
this.i = i;
this.j = j;
this.combinedScore = undefined;
this.shortestPathScore = undefined;
this.heuristicScore = undefined;
this.neighbor = [];
this.parent = undefined;
this.wall = false;
this.show = function(color) {
fill(color);
if (this.wall) {
fill(0);
}
noStroke();
rect(this.i * w, this.j * h, w - 1, h - 1);
}
this.addNeighbor = function(grid) {
let i = this.i,
j = this.j;
if (i < col - 1) {
this.neighbor.push(grid[i + 1][j]);
}
if (i > 0) {
this.neighbor.push(grid[i - 1][j]);
}
if (j < row - 1) {
this.neighbor.push(grid[i][j + 1]);
}
if (j > 0) {
this.neighbor.push(grid[i][j - 1]);
}
}
}
function setup() {
createCanvas(500, 500);
console.log("A*");
w = width / col;
h = height / row;
for (let i = 0; i < col; i++) {
grid[i] = new Array(row);
}
//Adding a spot
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j] = new Spot(i, j);
}
}
//Adding a neighbor
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].addNeighbor(grid);
}
}
// make walls
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
if ((i > 1 || j > 1) && (i < col - 2 || j < row - 2) && random() < 0.2) {
grid[i][j].wall = true;
}
}
}
start = grid[0][0];
end = grid[col - 1][row - 1];
start.shortestPathScore = 0;
start.heuristicScore = heuristic(start, end);
start.combinedScore = start.shortestPathScore + start.heuristicScore;
openSet.push(start);
}
function draw() {
let winner = 0;
let current;
if (openSet.length > 0) {
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].combinedScore < openSet[winner].combinedScore) {
winner = i;
}
}
current = openSet[winner];
if (current === end) {
noLoop();
console.log("Done!");
}
removefromArray(openSet, current);
closeSet.push(current);
var neighbors = current.neighbor;
for (let i = 0; i < neighbors.length; i++) {
var the_neighbor = neighbors[i];
let tentativePathScore = current.shortestPathScore + 1;
if (the_neighbor.heuristicScore === undefined) {
the_neighbor.heuristicScore = heuristic(the_neighbor, end);
}
if (the_neighbor.combinedScore === undefined ||
tentativePathScore + the_neighbor.heuristicScore < the_neighbor.combinedScore) {
// Update the path score and combined score for this neighbor.
the_neighbor.shortestPathScore = tentativePathScore;
the_neighbor.combinedScore = the_neighbor.shortestPathScore + the_neighbor.heuristicScore;
the_neighbor.parent = current; // the previous node
if (!openSet.includes(the_neighbor)) {
openSet.push(the_neighbor);
}
}
}
} else {
// no solution
}
background(0)
for (let i = 0; i < col; i++) {
for (let j = 0; j < row; j++) {
grid[i][j].show(color(255));
}
}
for (let i = 0; i < openSet.length; i++) {
openSet[i].show(color("green"));
}
for (let i = 0; i < closeSet.length; i++) {
closeSet[i].show(color("red"));
}
path = [];
let temp = current;
path.push(temp);
while (temp.parent) {
if (path.includes(temp.parent)) {
print('Cycle detected!');
break;
}
path.push(temp.parent);
temp = temp.parent;
}
for (let i = 0; i < path.length; i++) {
path[i].show(color(0, 0, 255));
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
Related
I am working on visualizing A*. I have a problem where the algorithm finds a path, but it is not the shortest. If I remove the part of the A* function code which is commented as 'tie-breaking', the algorithm finds the shortest path, but it searches the whole grid just like Dijkstra's algorithm, which I don't think A* is supposed to do. These are the pictures of the results with and without tie-breaking:
With Tie-Breaking
Without Tie-Breaking
What is wrong? Here is my A* function:
async a_star_search() {
this.clearSearchNotWalls();
let openSet = [];
let closedSet = [];
let start, end;
let path = [];
this.findNeighbors();
//shapes is a 2d array of squares... a grid
for (let i = 0; i < this.shapes.length; i++) {
for (let j = 0; j < this.shapes[0].length; j++) {
if (this.shapes[i][j].type == "Start") {
start = this.shapes[i][j];
}
if (this.shapes[i][j].type == "End") {
end = this.shapes[i][j];
}
}
}
openSet.push(start);
while (openSet.length > 0) {
let lowestIndex = 0;
//find lowest index
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].F < openSet[lowestIndex].F)
lowestIndex = i;
}
//current node
let current = openSet[lowestIndex];
//if reached the end
if (openSet[lowestIndex] === end) {
path = [];
let temp = current;
path.push(temp);
while (temp.cameFrom) {
path.push(temp.cameFrom);
temp = temp.cameFrom;
}
console.log("Done!");
for (let i = path.length - 1; i >= 0; i--) {
this.ctxGrid.fillStyle = "#ffff00";
this.ctxGrid.fillRect(path[i].x, path[i].y, 14, 14);
await new Promise(resolve =>
setTimeout(() => {
resolve();
}, this.animDelay / 2)
);
}
break;
}
this.removeFromArray(openSet, current);
closedSet.push(current);
let my_neighbors = current.neighbors;
for (let i = 0; i < my_neighbors.length; i++) {
var neighbor = my_neighbors[i];
if (!closedSet.includes(neighbor) && neighbor.type != "Wall") {
let tempG = current.G + 1;
let newPath = false;
if (openSet.includes(neighbor)) {
if (tempG < neighbor.G) {
neighbor.G = tempG;
newPath = true;
}
} else {
neighbor.G = tempG;
newPath = true;
openSet.push(neighbor);
}
if (newPath) {
neighbor.H = this.heuristic(neighbor, end);
neighbor.G = neighbor.F + neighbor.H;
neighbor.cameFrom = current;
}
}
}
//draw
for (let i = 0; i < closedSet.length; i++) { //BLUE
this.ctxGrid.fillStyle = "#4287f5";
this.ctxGrid.fillRect(closedSet[i].x, closedSet[i].y, 14, 14);
}
for (let i = 0; i < openSet.length; i++) { //GREEN
this.ctxGrid.fillStyle = "#00ff00";
this.ctxGrid.fillRect(openSet[i].x, openSet[i].y, 14, 14);
}
await new Promise(resolve =>
setTimeout(() => {
resolve();
}, 10)
);
}
if (openSet.length <= 0) {
//no solution
}
}
Here is my heuristic function:
heuristic(a, b) {
//let d = Math.sqrt(Math.pow(b.I - a.I, 2) + Math.pow(b.J - a.J, 2));
let d = Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
return d;
}
I know that some other questions posted are related to this topic but their answers don't help me.
I'm trying to implement battleship in js and while debugging I get SCRIPT16389: SCRIPT16389: Unspecified error. in the microsoft edge console.
Here's my js code so far: (I'm a beginner in javascript so sorry if serious mistakes)
var board = null;
var boats = null;
var rows = 8;
var columns = 8;
$(document).ready(function(){
if(typeof(Storage)!=="undefined"){
boats = JSON.parse(localStorage.getItem("boats"));
console.log(boats);
if(boats===null){
boats = [
{size:2, letter:'f', name:'fragate'},
{size:3, letter:'b', name:'buque'},
{size:3, letter:'s', name:'submarine'},
{size:4, letter:'d', name:'destructor'},
{size:5, letter:'p', name:'portplanes'},
];
localStorage.setItem("boats", JSON.stringify(boats));
}
rows = parseInt(localStorage.getItem("rows"));
columns = parseInt(localStorage.getItem("columns"));
if(isNaN(rows)|| isNaN(columns)){
rows = 8;
columns = 8;
localStorage.setItem("rows", 8);
localStorage.setItem("columns", 8);
}
}else {
console.log("We don't have localStorage")
}
});
function createMatrix(row,col){
var matrix;
matrix = new Array(row);
for (var i=0; i<row; i++){
matriz[i] = new Array(col);
}
return matrix;
}
function createFullMatrix(row,col,inside){
var matrix = new Array(row);
for(var i=0; i<row; i++){
matrix[i] = new Array(col);
for(var j=0; j<col; j++){
matrix[i][j]=inside;
}
}
return matrix;
}
function matrix2console(matrix){
var aux;
for(var i=0; i<matrix.length; i++){
aux = "";
for(var j=0; j<matrix[i].length; j++){
aux+=matrix[i][j]+'\t';
}
console.log(aux);
}
}
function createBoard(){
var html='<table>';
for(var i=0; i<rows; i++){
html+='<tr>';
for (var j=0; j<columns; j++){
html+='<td id="cel_'+i+'_'+j+'" class = "water"+ onclick=shoot("celd_'+i+'_'+j+'",'+i+','+j+')></td>';
}
html+='</tr>';
}
html+='</table>'
document.getElementById("match").innerHTML=html;
}
function createBoardjQ(){
$("#match").empty();
var table = $("<table />");
for(var i=0; i<rows; i++){
var row = $("<tr/>");
for(var j=0; j<columns; j++){
var celd = $('<td id="celd_'+i+'_'+j+'" onclick=shoot("celd_'+i+'_'+j+'",'+i+','+j+') > </td>');
celd.addClass("water");
row.append(celd);
}
table.append(row);
}
$("#match").append(table);
}
function createMatch(){
board = createMatrix(rows,columns);
startMatrix('a',board);
setBoats(board);
createBoardjQ();
matrix2console(board);
}
function shoot(celd, i, j){
switch (board[i][j]) {
case 'a':
board[i][j]= 'A';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('miss')
break;
case 'b':
board[i][j]= 'B';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('boats')
break;
case 'd':
board[i][j]= 'd';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('boats')
break;
case 'f':
board[i][j]= 'F';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('boats')
break;
case 'p':
board[i][j]= 'P';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('boats')
break;
case 's':
board[i][j]= 'S';
$('#'+celd).removeClass('water');
$('#'+celd).addClass('boats')
break;
}
}
function startMatrix(data, matrix){
for(var i=0; i<matrix.length;){
for(var j=0; j<matrix[i].length;){
matrix[i][j]=data;
}
}
}
function dice(value){
var random;
random = Math.floor(Math.random()*(value));
return random;
}
function coin(){
return (dice(2));
}
function setBoats(matrix){
for (var i=0; i<boats.length; i++){
var boats = boats[i];
do{
var free=true;
var direction = coin();
if(!direction){
var row = dice(matrix.length);
var col = dice(matrix[row].length-boat.size);
for(var j=0; j<boat.size;j++){
if(matrix[row][j]!='a'){
free = false;
}
}
if(free){
for(var j=0; j<boat.size; j++){
matrix[row][j+col]=boat.letter;
}
}
}else{
var row = dice(matrix.length-boat.size);
var col = dice(matrix[row].length);
var row = dice(matrix.length);
var col = dice(matrix[row].length-boat.size);
for(var j=0; j<boat.size;j++){
if(matrix[j+row][col]!='a'){
free = false;
}
}
if(free){
for(var j=0; j<boat.size; j++){
matrix[j+row][col]=boat.letter;
}
}
}
}while(!free);
}
}
After correcting a number of typos and reviewing the logic, the primary issue reported was in startMatrix() where the for loops were not incrementing their counters. This caused an infinite loop.
Consider the following to fix:
function startMatrix(data, matrix) {
var singleRow, singleCol;
for (var r = 0; r < matrix.length; r++) {
for (var c = 0; c < matrix[r].length; c++) {
matrix[r][c] = data;
}
}
console.log("SM: Matrix Complete", matrix);
}
Full example: https://jsfiddle.net/Twisty/L1m6jw5q/58/
HTML
<div id="match">
</div>
CSS
#match td {
width: 20px;
height: 20px;
}
#match .water {
background-color: #ccf;
}
#match .miss {
background-color: #eee;
}
#match .boats {
background-color: #ccc;
}
JavaScript
var board = null;
var boats = null;
var rows = 8;
var columns = 8;
function createMatrix(row, col) {
var matrix;
matrix = new Array(row);
for (var i = 0; i < row; i++) {
matrix[i] = new Array(col);
}
console.log("CM: New Matrix Created", matrix);
return matrix;
}
function startMatrix(data, matrix) {
var singleRow, singleCol;
for (var r = 0; r < matrix.length; r++) {
for (var c = 0; c < matrix[r].length; c++) {
matrix[r][c] = data;
}
}
console.log("SM: Matrix Complete", matrix);
}
function createFullMatrix(row, col, inside) {
var matrix = new Array(row);
for (var i = 0; i < row; i++) {
matrix[i] = new Array(col);
for (var j = 0; j < col; j++) {
matrix[i][j] = inside;
}
}
return matrix;
}
function matrix2console(matrix) {
var aux;
for (var i = 0; i < matrix.length; i++) {
aux = "";
for (var j = 0; j < matrix[i].length; j++) {
aux += matrix[i][j] + '\t';
}
console.log(aux);
}
}
function createBoardjQ() {
$("#match").empty();
var table = $("<table />");
for (var i = 0; i < rows; i++) {
var row = $("<tr/>");
for (var j = 0; j < columns; j++) {
var celd = $('<td id="celd_' + i + '_' + j + '" data-shoot="celd_' + i + '_' + j + ',' + i + ',' + j + '"></td>');
celd.addClass("water");
row.append(celd);
}
table.append(row);
}
$("#match").append(table);
}
function createMatch() {
console.log("CMa: Make Board");
board = createMatrix(rows, columns);
console.log("CMa: Start Matrix", 'a', board);
startMatrix('a', board);
console.log("CMa: Set Boats", board);
setBoats(board);
console.log("CMa: Create Board jQ");
createBoardjQ();
console.log("CMa: Matrix to Console");
matrix2console(board);
}
function shoot(celd, i, j) {
switch (board[i][j]) {
case 'a':
board[i][j] = 'A';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('miss');
console.log("Miss");
break;
case 'b':
board[i][j] = 'B';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('boats');
console.log("Hit");
break;
case 'd':
board[i][j] = 'd';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('boats');
console.log("Hit");
break;
case 'f':
board[i][j] = 'F';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('boats');
console.log("Hit");
break;
case 'p':
board[i][j] = 'P';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('boats');
console.log("Hit");
break;
case 's':
board[i][j] = 'S';
$('#' + celd).removeClass('water');
$('#' + celd).addClass('boats');
console.log("Hit");
break;
}
}
function dice(value) {
var random;
random = Math.floor(Math.random() * (value));
return random;
}
function coin() {
return (dice(2));
}
function setBoats(matrix) {
var i, j, row, col, free;
for (i = 0; i < boats.length; i++) {
var boat = boats[i];
do {
free = true;
var direction = coin();
if (!direction) {
row = dice(matrix.length);
col = dice(matrix[row].length - boat.size);
for (j = 0; j < boat.size; j++) {
if (matrix[row][j] != 'a') {
free = false;
}
}
if (free) {
for (j = 0; j < boat.size; j++) {
matrix[row][j + col] = boat.letter;
}
}
} else {
row = dice(matrix.length - boat.size);
col = dice(matrix[row].length);
//row = dice(matrix.length);
//col = dice(matrix[row].length - boat.size);
for (j = 0; j < boat.size; j++) {
var k = (j + row) >= 1 ? (j + row) - 1 : 0;
console.log(j, row, k, boat.size);
if (k > matrix.length) {
free = false;
} else {
if (matrix[k][col] != 'a') {
free = false;
}
}
}
if (free) {
for (j = 0; j < boat.size; j++) {
matrix[j + row][col] = boat.letter;
}
}
}
} while (!free);
}
}
$(document).ready(function() {
if (typeof(Storage) !== "undefined") {
boats = JSON.parse(localStorage.getItem("boats"));
console.log(boats);
if (boats === null) {
boats = [{
size: 2,
letter: 'f',
name: 'fragate'
},
{
size: 3,
letter: 'b',
name: 'buque'
},
{
size: 3,
letter: 's',
name: 'submarine'
},
{
size: 4,
letter: 'd',
name: 'destructor'
},
{
size: 5,
letter: 'p',
name: 'portplanes'
},
];
localStorage.setItem("boats", JSON.stringify(boats));
}
rows = parseInt(localStorage.getItem("rows"));
columns = parseInt(localStorage.getItem("columns"));
if (isNaN(rows) || isNaN(columns)) {
rows = 8;
columns = 8;
localStorage.setItem("rows", 8);
localStorage.setItem("columns", 8);
}
console.log(rows, columns);
createMatch();
$(".water").click(function(e) {
console.log("Firing Shot", $(this));
var c = $(this).data("shoot").split(",");
shoot(c[0], c[1], c[2]);
});
} else {
console.log("We don't have localStorage");
}
});
Once the infinite loop was addressed, there was another logical error in setBoards(). Basically, there was a point where j + row would be greater than the index of matrix. You will want to review it and maybe even draw it out to make sure boats do not get placed off the board (which was always my favorite way to beat my brother at Battleship as a kid).
I also moved the click callback to jQuery. Just made it easier, so I stored the shot data in a data attribute for each cell. Easy to parse out and pass to shoot() for each click.
Hope that helps.
In the following code, the console.log from the line 92 and 93 (switchPosition function) doesn't provide the same result. I am, I have to admit, stuck.
Any thoughts, ideas, explanations?
Thanks you for the time taken,
var Carrousel = (function () {
var self = {},
config = {
item: 3, // item to be displayed
scroll: 2 // number of items to be scrolled
},
container = null,
items = null,
nbItems = null,
nbSlide = null,
position = [],
searchPositionDepending = []
;
self.init = function (opts) {
options = opts || {}
execute();
}
// Private Method
execute = function () {
container = document.getElementById('carrousel');
items = document.getElementsByClassName('flux');
var containerWidth = container.offsetWidth;
var containerHeight = items[0].offsetHeight * 1.5;
container.style.height = '' + containerHeight + '';
nbItems = document.getElementsByClassName('flux').length;
nbSlide = nbItems / config.item;
// Initialisation du Carrousel
for (i = 0; i < nbItems; i++) {
items[i].style.width = '' + (containerWidth / config.item) + '';
items[i].style.display = 'none';
items[i].style.position = 'absolute';
items[i].style.top = "0";
items[i].style.left = "0";
items[i].setAttribute('data-position', '' + (i + 1) + '');
items[i].setAttribute('data-number', '' + i + '');
}
searchPosition();
placement();
document.getElementById('next').onclick = function () {
next();
searchPosition();
switchPosition();
placement();
// position();
}
document.getElementById('previous').onclick = function () {
// previous();
// searchPosition();
// position();
}
}
searchPosition = function () {
for (i = 0; i < config.item; i++) {
searchPositionDepending[i] = (function () { //Appending a function searchPosition per item displayed
for (j = 1; j <= config.item; j++) { //Passing through the first items to get their position
if (items[i].dataset.position === '' + j + '') {
position[j] = items[i];
return true;
} else {
}
}
;
})();
}
}
switchPosition = function () {
for (i = 0, j = 0; i < nbItems; i++, j++) {
if (items[i].dataset.position === '' + j + '') {
position[i] = position[i];
}
}
for (i = config.item, j = 1; i < nbItems; i++, j++) { //Replacing in good order, except for the one that are place into the variable position[];
items[i] = items[j];
}
for (i = (nbItems - config.item +1), j = 1; i <= nbItems; i++, j++) { //Replacing in good order the one that are place into variable position[];
items[i] = position[j];
console.log(i);
console.log(j);
console.log(position[j]);
console.log(items[i]);
}
for (i = 0; i < nbItems; i++) {
console.log(items[i]);
}
console.log(items[10]);
}
placement = function () {
for (i = 1; i <= config.item; i++) {
var rect = items[0].getBoundingClientRect();
item_width = Math.floor(rect.width);
item_height = Math.floor(rect.height);
var x = item_width * (i - 1) * 1.1;
items[i].style.display = 'block';
items[i].style.transform = "translate3D(" + x + "px, 0px, 0px)";
}
}
next = function () {
for (i = config.item, j = 1; i < nbItems; i++, j++) { //Updating all dataset position, except for the items that are displayed.
items[i].dataset.position = j;
}
for (i = 1, j = 2; i <= config.item; i++, j--) {
position[i].dataset.position = nbItems - j;
position[i].style.display = "none";
}
}
return self;
})();
I have some markers on google maps and I would like to identify clusters by point-to-point distance between them. However, I am having a bit of difficulty:
First I loop through all the markers and create an array which is:
for (var i = 0; i < MARKERS.length - 1; i++) {
for (var j = i + 1; j < MARKERS.length; j++) {
var distance_between = google.maps.geometry.spherical.computeDistanceBetween(point_i, point_j)
var valueToPush = {}
valueToPush.fromMarker = name_i
valueToPush.toMarker = name_j
valueToPush.distance = distance_between
cluster_array.push(valueToPush)
}
}
What I would then like to do is run a hierarchical clustering algorithm like this:
var cluster = .cluster(cluster_array, MAX, threshold)
Where if I specify 500 for threshold then I get a list like this
Cluster 0: Marker A, Marker Y, Marker C
Cluster 1: Marker B
Cluster 2: Marker D, Marker E
etc.
Where each cluster shows me the markers that are within 500 metres of each other.
Thanks very much
If it helps this is what I ended up doing:
function the_clusterer(cluster_array, num_radius) {
console.log('Clustering distance array')
for (var i = 0; i < cluster_array.length - 1; i++) {
if (typeof(cluster_array[i]) != 'undefined') {
var size_outer = 0,
key_outer;
for (key_outer in cluster_array[i]) {
if (cluster_array[i].hasOwnProperty(key_outer));
size_outer++;
}
for (var j = 0; j < size_outer; j++) {
for (var k = i + 1; k < cluster_array.length; k++) {
if (typeof(cluster_array[i]) != 'undefined') {
var size_inner = 0,
key_inner;
for (key_inner in cluster_array[k]) {
if (cluster_array[k].hasOwnProperty(key_inner));
size_inner++;
}
var found_outer = 0
for (var l = 0; l < size_inner; l++) {
if (found_outer === 1) {
break;
}
if (cluster_array[k][l] == cluster_array[i][j]) {
found_outer++
}
}
if (found_outer > 0) {
for (var l = 0; l < size_inner; l++) {
var found_inner = 0
for (var m = 0; m < size_outer; m++) {
if (cluster_array[i][m] == cluster_array[k][l]) {
found_inner++
}
}
if (found_inner == 0) {
cluster_array[i][size_outer] = cluster_array[k][l]
size_outer++
}
}
delete cluster_array[k];
}
}
}
}
}
}
txtOutput.value += "Start Clusters: " + num_radius + "m.\n"
var k = 0
for (var i = 0; i < cluster_array.length - 1; i++) {
var size_outer = 0,
key_outer;
for (key_outer in cluster_array[i]) {
if (cluster_array[i].hasOwnProperty(key_outer));
size_outer++;
}
if (size_outer > 0) {
k++
var temp_line = "Cluster " + k + ":"
for (var j = 0; j < size_outer; j++) {
temp_line = temp_line + " Marker " + cluster_array[i][j]
}
txtOutput.value += temp_line + ".\n"
}
}
}
Keep in mind this is unfinished, the only question I have is why does the console.log produce this output?
/>B /* This is what I expected */
/>B-D /* The second output I expected to be just ">/D" I am conused as to how it is coming up with >/"B-D" */
graphArray = ["4","A","B","C","D","A-B","B-D","B-C","C-D"];
pointsArray = [];
linesArray = [];
nodes = graphArray[0];
for (i = 1; i < graphArray.length; i++) {
if (i <= nodes) {
pointsArray.push(graphArray[i]);
}
if (i > nodes) {
linesArray.push(graphArray[i]);
}
}
nextpoint = pointsArray[0];
patt = new RegExp(/-.*/);
patt2 = new RegExp(nextpoint + "-");
for (i = 0; i < linesArray.length; i++) {
x = 0;
while (x < linesArray.length) {
if (linesArray[x].replace(patt,"") === nextpoint) {
nextpoint = linesArray[x].replace(patt2,"");
console.log(nextpoint);
}
x++;
}
}
Edit: Smacks forehead it must be getting too late for me I can't believe I missed that. Thank you for point that out. Solved.
Your patt2 = new RegExp(nextpoint + "-"); should be inside the loop
for (i = 0; i < linesArray.length; i++) {
x = 0;
while (x < linesArray.length) {
patt2 = new RegExp(nextpoint + "-");
if (linesArray[x].replace(patt,"") === nextpoint) {
nextpoint = linesArray[x].replace(patt2,"");
console.log(nextpoint);
}
x++;
}
}