var water = "#1E90FF"; var beach = "#ffff00"; var grass = "#008000"; var maxValue = 30; var minValue = -30; var tilesColor = [water,beach,grass] var board_numbers = []; var cycle = 50; var tile_width=32; var tile_height=32; var width = Math.floor(640 / tile_width); var height = Math.floor(640 / tile_height); var current_noise = []; var currentBoardArray = []; var clickCounter = 0; var startx = 0; var starty = 0; var endx = 0; var endy = 0; function findHeighestNumber(array){ var heighest = Number.MIN_VALUE; for(var i = 0; i < array.length; i++){ var row = array[i]; for(var j = 0; j < row.length; j++){ if(row[j] > heighest){ heighest = row[j]; } } } return heighest; } function findSmallestNumber(array){ var smallest = Number.MAX_VALUE; for(var i = 0; i < array.length; i++){ var row = array[i]; for(var j = 0; j < row.length; j++){ if(row[j] < smallest){ smallest = row[j]; } } } return smallest; } /* * The representation of a tile * * color value between 0,1,2 */ class Tile { constructor(x,y,color){ this.x = x; this.y = y; this.color = color; if(color === 0){ this.accessible = true; } else { this.accessible = false; } } } class Ship{ constructor(x,y,speed){ this.x = x; this.y = y; this.speed = speed; this.dx = 1*speed; this.dy = 1*speed; } draw(context){ var img = new Image(); img.src = "ship.png"; img.height = "16"; img.width = "16"; context.drawImage(img,this.x,this.y); } update(){ this.x += dx; this.y += dy; this.draw(context); } } function createBoard(height, width, array){ var board = document.getElementById("can"); var context = board.getContext("2d"); ////console.log(array); for(var i = 0; i < height; i++){ for(var j = 0; j < width; j++){ var color = array[i][j].color; context.fillStyle = tilesColor[color]; context.fillRect(i*tile_height+1, j*tile_width+1, tile_width, tile_height); } } } /** * This function interpolates values in a Array */ function interpolate(startValue, endValue,y){ var m = (endValue - startValue)/(y); var result = []; result.push(startValue); for(var i = 1; i < y; i++){ result[i] = m * i + startValue; } result.push(endValue); return result; } function generate_perlin_noise(rounds,height,width){ var result = []; var points_width = width; var points_height = height; for(var r = 0; r < rounds; r++){ var tmp_array = []; ////console.log("------------------ Step "+r+" --------------"); // Interpolation für Reihen. Imprinzip ist das ganzschön ineffizient, da manche Reihen wieder überschrieben werden aber kein bock das zu ändern. for(var i = 0; i < height; i++){ var row = []; var startValue = Math.random() * (maxValue - minValue) + minValue; //Stupid, but i always forgot, how to set the boundries var counter = 0; for(var j = 0; j < width; j++){ ////console.log(counter); ////console.log("Step "+i+"+"+j+":"); ////console.log("counter: "+counter); if (j % (points_width - 1) === 0 && !(j === 0) || j === (width - 1)){ ////console.log(counter); let endValue = Math.random() * (maxValue - minValue) + minValue; //Stupid, but i always forgot, how to set the boundries interpolate(startValue, endValue, counter); row = row.concat(interpolate(startValue, endValue, counter)); startValue = endValue; counter = 0; } else { counter++; } } ////console.log(row); tmp_array.push(row); } // Spalten interpolation for(var i = 0; i < width; i++){ var startValue = tmp_array[0][i]; var counter = 0; for(var j = 0; j < height; j++){ if(j % (height-1) === 0 && !(j === 0) || j === (height - 1)){ var endValue = tmp_array[j][i]; var tmp_interpolate = interpolate(startValue, endValue, counter); startValue = endValue; for(var k = 0; k < counter; k++){ tmp_array[j-counter][i] = tmp_interpolate[k]; } counter = 0; } else { counter++; } } } result.push(tmp_array) points_width = Math.floor(points_width / 2)+1; points_height = Math.floor(points_height / 2)+1; } //console.log(result); //return result; var combi = []; for (var i = 0; i < height; i++){ var rows = []; for (var j = 0; j < width; j++){ rows[j] = 0; } combi.push(rows); } //console.log("------------- Ergebnisse ----------- Ergebnisse -------------"); //console.log(combi); // adding all array to one array for(var r = 0; r < rounds; r++){ var tmp = result.pop(); for (var i = 0; i < height; i++){ for (var j = 0; j < width; j++){ combi[i][j] = combi[i][j] + tmp[i][j]; } } } var smallest = findSmallestNumber(combi); for (var i = 0; i < height; i++){ for (var j = 0; j < width; j++){ combi[i][j] = combi[i][j] - smallest; } } //Adding smallest Element to Noise_Array // ???? Anomalie ???? //console.log(result); //console.log(combi); return combi; } /** * This function starts the perlin noise generation process * */ function run_perlin_noise(){ var noise_array = generate_perlin_noise(cycle,width,height); //console.log(noise_array); current_noise = noise_array; currentBoardArray = createBoardArray(current_noise, height, width); createBoard(height,width,currentBoardArray); //currentBoardArray = createBoardArray(current_noise, height, width); //dijkstra(currentBoardArray,startx,15,15,30,30); } function createBoardArray(array,height,width){ var result = []; var heighestNumber = findHeighestNumber(array); for(var i = 0; i < height; i++){ var row = []; for(var j = 0; j < width; j++){ var x = (array[i][j]/ heighestNumber)*100; var color = 0; if(x <= 100.00 && x >= 70.00){ color = 1; } if(x <= 69.00 && x >= 65.00){ color = 1; } if(x <= 65.00 && x >= 0){ color = 0; } var tmp_tile = new Tile(j, i, color); row.push(tmp_tile); } result.push(row); } return result; } function moveShip(canvas, e){ var rect = canvas.getBoundingClientRect(); var x = Math.floor(e.clientX - rect.left); var y = Math.floor(e.clientY - rect.top); var ship = new Ship(x,y,5); ship.draw(canvas.getContext("2d")); //console.log("x: "+x+" y: "+y); } window.onload = (function(){ var can = document.getElementById("can"); rect = can.getBoundingClientRect(); can.addEventListener('mousedown', function(e){ var x = Math.floor((e.clientX - rect.left)/tile_width); var y = Math.floor((e.clientY - rect.top )/tile_height); if(clickCounter === 2){ clickcounter = 1; endx = x; endy = y; console.log(startx+" "+starty+" : "+endx+" "+endy); currentBoardArray = createBoardArray(current_noise, height, width); dijkstra(currentBoardArray, startx, starty,endx,endy); } else { clickCounter++; startx = x; starty = y; } createBoard(height,width,currentBoardArray); moveShip(can, e); }); run_perlin_noise(); });