62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
window.onload = function () {
|
|
|
|
// GET THE IMAGE.
|
|
var rock = new Image();
|
|
rock.src = 'rock.png';
|
|
var background = new Image();
|
|
var grass = new Image();
|
|
grass.src = 'grass.png'
|
|
var sea = new Image();
|
|
sea.src = 'sea.png'
|
|
var hills = new Image();
|
|
hills.src = 'hills.png'
|
|
tiles = [grass,hills,sea,rock];
|
|
background.src = 'background.png';
|
|
// WAIT TILL IMAGE IS LOADED.
|
|
background.onload = function () {
|
|
fill_canvas(); // FILL THE CANVAS WITH THE IMAGE.
|
|
}
|
|
|
|
function fill_canvas() {
|
|
// CREATE CANVAS CONTEXT.
|
|
var canvas = document.getElementById('canvas');
|
|
canvas.width = 576;
|
|
canvas.height = 576;
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
ctx.drawImage(background, 0, 0); // DRAW THE IMAGE TO THE CANVAS.
|
|
let x, y = 0
|
|
noise.seed(Math.random())
|
|
for(x = 0; x < getBlockDimensions()[0]; x++){
|
|
for(y = 0; y < getBlockDimensions()[1]; y++){
|
|
|
|
var value = (noise.perlin2(x/3.0, y/3.0))*10;
|
|
if (value >= -3) {
|
|
ctx.drawImage(tiles[0], x*24,y*24)
|
|
} else if (value < -3) {
|
|
ctx.drawImage(tiles[2], x*24,y*24)
|
|
}
|
|
if (value > 1.4) {
|
|
ctx.drawImage(tiles[1], x*24,y*24)
|
|
}
|
|
|
|
}
|
|
}
|
|
for (i = 0; i < 90; i++){
|
|
ctx.drawImage(tiles[3], randomNumber(0,24)*24,randomNumber(0,24)*24)
|
|
}
|
|
}
|
|
}
|
|
|
|
function getBlockDimensions(){
|
|
|
|
return [canvas.width/24, canvas.height/24]
|
|
}
|
|
|
|
function randomNumber(min, max) {
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
}
|