js实现2.5d等距地形生成器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现2.5d等距地形生成器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  text-align: center;
  
  background: -moz-linear-gradient(top, rgba(20,129,153,1) 0%, rgba(55,55,79,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,129,153,1)), color-stop(100%, rgba(55,55,79,1)));
  background: -webkit-linear-gradient(top, rgba(20,129,153,1) 0%, rgba(55,55,79,1) 100%);
  background: -o-linear-gradient(top, rgba(20,129,153,1) 0%, rgba(55,55,79,1) 100%);
  background: -ms-linear-gradient(top, rgba(20,129,153,1) 0%, rgba(55,55,79,1) 100%);
  background: linear-gradient(to bottom, rgba(20,129,153,1) 0%, rgba(55,55,79,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#148199', endColorstr='#37374f', GradientType=0 );
}
</style>



  
  
</head>

<body translate="no">
  <canvas id="terrain" width="800" height="800"></canvas>
  
    <script >
console.clear();

function toDegrees(rad) {
  return rad * Math.PI / 180;
}

function fromDegrees(deg) {
  return deg * 180 / Math.PI;
}

function between(a, b, c) {
  return Math.max(a, Math.min(b, c));
}

function random(a, b) {
  a = a === undefined ? 1 : a;
  b = b === undefined ? 0 : b;

  var length = Math.abs(a - b);
  var min = Math.min(a, b);

  return min + Math.random() * length;
}

function randomFloor(a, b) {
  return Math.floor(random(a, b));
}

function getLength(a, b) {
  return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}

function getDistance(x1, y1, x2, y2) {
  return getLength(x2 - x1, y2 - y1);
}

function getAngle(x, y) {
  return fromDegrees(Math.atan2(y, x));
}

function coordToVector(x, y, w) {
  return y * w + x;
}

function createColor(red, green, blue, alpha, darkness, brightness) {
  darkness = darkness === undefined ? 1 : darkness;
  brightness = brightness === undefined ? 1 : brightness;
  return (
    "rgba(" +
    [
    between(0, 255, red * darkness * brightness),
    between(0, 255, green * darkness * brightness),
    between(0, 255, blue * darkness * brightness),
    between(0, 1, alpha)].
    join(",") +
    ")");

}

function createGradient(
ctx,
x,
y,
radius,
centerX,
centerY,
red,
green,
blue,
darkness,
brightness,
useAlpha)
{
  useAlpha = useAlpha === undefined ? true : false;
  brightness = brightness === undefined ? 1 : brightness;

  var color = ctx.createRadialGradient(
  x + centerX,
  y + centerY,
  0,
  x,
  y,
  radius);

  color.addColorStop(
  0,
  createColor(
  red,
  green,
  blue,
  1,
  darkness,
  brightness * (useAlpha ? 1 : 1.2)));


  color.addColorStop(
  1,
  createColor(
  red,
  green,
  blue,
  useAlpha ? 0 : 1,
  darkness,
  brightness * (useAlpha ? 1 : 0.5)));



  return color;
}

function drawLine(ctx, x, y, color, height, lineWidth) {
  ctx.beginPath();
  ctx.lineWidth = lineWidth || 1;
  ctx.lineCap = "round";
  ctx.moveTo(x, y);
  ctx.lineTo(x, y + (height || 1));
  ctx.closePath();
  ctx.strokeStyle = color;
  ctx.stroke();
}

function drawCircle(ctx, x, y, r, color, alpha) {
  ctx.globalAlpha = alpha;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
  ctx.globalAlpha = 1;
}

function drawEllipse(ctx, x, y, r1, r2, angle, color, alpha) {
  ctx.globalAlpha = alpha;
  ctx.beginPath();
  ctx.ellipse(x, y, r1, r2, angle, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
  ctx.globalAlpha = 1;
}

function drawRect(ctx, x, y, w, h, angle, color, alpha) {
  ctx.globalAlpha = alpha;
  ctx.save();

  var halfW = w / 2;
  var halfH = h / 2;

  ctx.beginPath();
  ctx.translate(x + halfW, y + halfH);
  ctx.rotate(angle * Math.PI / 180);
  ctx.rect(-halfW, -halfH, w, h);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
  ctx.restore();
  ctx.globalAlpha = 1;
}

function drawNoiseStep(ctx, x, y, width, height, angle, colorValue, alpha) {
  var color;
  var r = Math.round(Math.max(width, height) / 2);
  switch (randomFloor(1)) {
    case 0:
      r = width / 2;
      color = createGradient(
      ctx,
      x,
      y,
      r,
      random(-r, r),
      random(-r, r),
      colorValue,
      colorValue,
      colorValue);

      drawCircle(ctx, x, y, r, color, alpha);
      break;
    case 1:
      color = createGradient(
      ctx,
      x,
      y,
      r,
      random(-r, r),
      random(-r, r),
      colorValue,
      colorValue,
      colorValue);

      drawEllipse(ctx, x, y, width, height, angle, color, alpha);
      break;
    case 2:
      color = createGradient(
      ctx,
      x,
      y,
      r,
      random(-r, r),
      random(-r, r),
      colorValue,
      colorValue,
      colorValue);

      drawRect(ctx, x, y, width, height, angle, color, alpha);
      break;}

}

functi.........完整代码请登录后点击上方下载按钮下载查看