html--是男人就上一百层

最新推荐文章于 2024-07-17 18:00:00 发布
最新推荐文章于 2024-07-17 18:00:00 发布
阅读量482 收藏 8
点赞数 9
分类专栏： html 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139350239
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>body {
  background-color: #444;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

#container {
  transform-origin: 50% 0;
}
</style>
 </HEAD>

 <BODY>
<div id="container">
  <canvas height="900" width="1600"></canvas>
</div>
  <script>var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Point = function Point(x, y) {
  _classCallCheck(this, Point);

  this.x = x;
  this.y = y;
};

var OffScreenCanvas = function OffScreenCanvas(width, height) {
  _classCallCheck(this, OffScreenCanvas);

  var c = document.createElement('canvas');
  c.width = width;
  c.height = height;
  this.ctx = c.getContext('2d');
  this.canvas = c;
};

var Opening = function () {
  function Opening(x, y) {
    _classCallCheck(this, Opening);

    this.x = x;
    this.y = y;
  }

  _createClass(Opening, [{
    key: 'draw',
    value: function draw($) {
      var center = this.x - $.state.pos.x,
          l = getCirclePoint(600, 800, center - $.platform.width / 2),
          r = getCirclePoint(600, 800, center + $.platform.width / 2);

      if (l > r) {
        var sl = getCirclePoint(560, 800, center - $.platform.width / 2),
            sr = getCirclePoint(560, 800, center + $.platform.width / 2),
            c = new OffScreenCanvas(1600, 250),
            sc = new OffScreenCanvas(1600, 250),
            smallDoor = drawDoor(sc, '#b9e2d7', sr, sl - sr, 250, '#262525'),
            bigDoor = drawDoor(c, $.ctx.createPattern(smallDoor, 'no-repeat'), r, l - r, 250);

        $.ctx.drawImage(bigDoor, 0, this.y + $.state.pos.y);
      }
    }
  }]);

  return Opening;
}();

function prepareGraphics() {
  var b = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/21151/';

  prepareImage($, b + 'c-standing.png', 'standing', 0, false);
  prepareImage($, b + 'c-standing.png', 'standing', 1, true);

  prepareImage($, b + 'c-jumping3.png', 'jumpingUp', 0, false);
  prepareImage($, b + 'c-jumping3.png', 'jumpingUp', 1, true);

  prepareImage($, b + 'c-jumpingdown.png', 'jumpingDown', 0, false);
  prepareImage($, b + 'c-jumpingdown.png', 'jumpingDown', 1, true);

  prepareImage($, b + 'Slice 1_copy.png', 'runningLeft', 0, false);
  prepareImage($, b + 'Slice 1_copy.png', 'runningLeft', 1, false);
  prepareImage($, b + 'c-walking3.png', 'runningLeft', 2, false);
  prepareImage($, b + 'c-walking3.png', 'runningLeft', 3, false);

  prepareImage($, b + 'Slice 1_copy.png', 'runningRight', 0, true);
  prepareImage($, b + 'Slice 1_copy.png', 'runningRight', 1, true);
  prepareImage($, b + 'c-walking3.png', 'runningRight', 2, true);
  prepareImage($, b + 'c-walking3.png', 'runningRight', 3, true);
}

function prepareImage($, src, type, index, flipped) {
  var temp = new OffScreenCanvas(317, 300),
      image = new Image();

  image.onload = function () {
    if (flipped) {
      temp.ctx.save();
      temp.ctx.scale(-1, 1);
    }

    temp.ctx.drawImage(image, 0, 0, 317 * (flipped ? -1 : 1), 300);

    if (flipped) {
      temp.ctx.restore();
    }

    $.animationFrames[type][index] = temp.canvas;
  };

  image.src = src;

  return temp.canvas;
}

function drawDoor(c, color, x, width, height, bg) {
  var y = 90;

  if (bg) {
    c.ctx.fillStyle = bg;
    c.ctx.fillRect(0, 0, c.canvas.width, c.canvas.height);
  }

  c.ctx.fillStyle = color;
  c.ctx.beginPath();
  c.ctx.moveTo(x, y);
  c.ctx.lineTo(x, y + height);
  c.ctx.lineTo(x + width, y + height);
  c.ctx.lineTo(x + width, y);
  c.ctx.ellipse(x + width / 2, y, width / 2, 90, 0, 0, Math.PI, true);
  c.ctx.fill();

  return c.canvas;
}

var Platform = function () {
  function Platform(x, y) {
    _classCallCheck(this, Platform);

    this.x = x;
    this.y = y;
    this.infront = false;
    this.outerBox = null;
  }

  _createClass(Platform, [{
    key: 'getY',
    value: function getY($) {
      return this.y + $.state.pos.y;
    }
  }, {
    key: 'isInFront',
    value: function isInFront($) {
      var center = this.x - $.state.pos.x,
          innerBox = getBox($, 600, center),
          outerBox = getBox($, 680, center);

      this.infront = outerBox.left > outerBox.right;
      return this.infront;
    }
  }, {
    key: 'drawFront',
    value: function drawFront($) {
      $.ctx.fillStyle = $.colors.wood2;
      $.ctx.fillRect(this.outerBox.left, this.getY($), this.outerBox.width, $.platform.height);
    }
  }, {
    key: 'draw',
    value: function draw($) {
      var center = this.x - $.state.pos.x,
          innerBox = getBox($, 600, center),
          outerBox = getBox($, 680, center),
          isLeftSide = innerBox.left > outerBox.left;

      this.infront = outerBox.left > outerBox.right;

      var _arr = ['left', 'right'];
      for (var _i = 0; _i < _arr.length; _i++) {
        var dir = _arr[_i];
        var adjust = dir === 'left' ? outerBox.unit : outerBox.unit * 6,
            outer = {
          top: {
            left: new Point(outerBox.left + adjust, this.getY($) + $.platform.height),
            right: new Point(outerBox.left + outerBox.unit + adjust, this.getY($) + $.platform.height)
          },
          bottom: {
            left: new Point(innerBox.left + adjust, this.getY($) + 70),
            right: new Point(innerBox.left + innerBox.unit + adjust, this.getY($) + 70)
          }
        },
            inner = {
          top: {
            left: new Point(outerBox.left + adjust, this.getY($) + ($.platform.height - 10)),
            right: new Point(outerBox.left + outerBox.unit + adjust, this.getY($) + ($.platform.height - 10))
          },
          bottom: {
            left: new Point(innerBox.left + adjust, this.getY($) + 60),
            right: new Point(innerBox.left + innerBox.unit + adjust, this.getY($) + 60)
          }
        };

        drawPolygon($, $.colors.wood3, inner.top.left, inner.bottom.left, inner.bottom.right, inner.top.right);
        drawPolygon($, $.colors.wood4, outer.top.left, outer.bottom.left, outer.bottom.right, outer.top.right);

        if (!isLeftSide) {
          drawPolygon($, $.colors.wood5, inner.top.right, outer.top.right, outer.bottom.right, inner.bottom.right);
        } else {
          drawPolygon($, $.colors.wood5, inner.top.left, outer.top.left, outer.bottom.left, inner.bottom.left);
        }
      }

      $.ctx.fillStyle = $.colors.wood1;
      if (isLeftSide) {
        $.ctx.fillRect(innerBox.left, this.getY($), outerBox.left - innerBox.left, $.platform.height);
      } else {
        $.ctx.fillRect(outerBox.right, this.getY($), innerBox.left - outerBox.left, $.platform.height);
      }

      this.outerBox = outerBox;
    }
  }]);

  return Platform;
}();

function drawPolygon($, color) {
  $.ctx.fillStyle = color;
  $.ctx.beginPath();

  for (var _len = arguments.length, points = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    points[_key - 2] = arguments[_key];
  }

  $.ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    $.ctx.lineTo(points[i].x, points[i].y);
  }
  $.ctx.fill();
}

function getBox($, radius, center) {
  var l = getCirclePoint(radius, 800, center - $.platform.width / 2),
      r = getCirclePoint(radius, 800, center + $.platform.width / 2);

  return {
    left: l,
    right: r,
    width: r - l,
    unit: (r - l) / 8
  };
}

var fallbackCanvas = new OffScreenCanvas(10, 10).canvas;

var $ = {
  container: null,
  canvas: null,
  ctx: null,
  platforms: [new Platform(1600, 600), new Platform(1585, 600), new Platform(1570, 600), new Platform(1540, 500), new Platform(1525, 500), new Platform(1480, 500), new Platform(1465, 500), new Platform(1435, 400), new Platform(1415, 270), new Platform(1435, 135), new Platform(1465, 40), new Platform(1480, 40), new Platform(1500, -80), new Platform(1520, -200), new Platform(1520, -335), new Platform(1490, -460), new Platform(1460, -535), new Platform(1430, -610), new Platform(1415, -610), new Platform(1370, -610), new Platform(1355, -610), new Platform(1355, -610), new Platform(1330, -710), new Platform(1305, -810), new Platform(1280, -910), new Platform(1265, -910), new Platform(1220, -910), new Platform(1205, -910)],
  openings: [new Opening(1600, 350), new Opening(1205, -1160)],
  brick: {
    shine: "",
    shade: "rgba(256, 256, 256, 0.8)",
    color: "rgba(186, 186, 173, 0.8)", // #BABAAD
    width: 16,
    height: 48,
    padding: 4
  },
  platform: {
    height: 22,
    width: 13, /* Degrees */
    color: '#5A4142'
  },
  tower: {
    width: 1200,
    shadowWidth: 130,
    skyWidth: 200
  },
  sky: {
    bg: '#1F0B22',
    starSizes: [2, 3, 4, 5],
    starColors: ['#6C586F', '#857188', '#D1BDD4', '#E6D1A8']
  },
  colors: {
    bg: '#FBD0D0',
    wood1: '#BC8550', // side
    wood2: '#ECC897', // front
    wood3: '#4B3937', // back support
    wood4: '#FFB287', // front support
    wood5: '#D58212' // side support
  },
  settings: {
    maxSpeed: 0.09, // left right
    minSpeed: 0.01, // left right
    friction: 0.7, // left right
    acceleration: 0.02, // left right
    jump: {
      gravity: {
        boost: 0.0014,
        normal: 0.003,
        down: 0.004
      },
      maxSpeed: 0.6,
      fallStartSpeed: 0.07,
      friction: 0.98
    }
  },
  storage: {
    bricks: null,
    sky: null,
    shadows: null
  },
  input: {
    left: false,
    right: false,
    jump: false
  },
  animationFrames: {
    standing: [fallbackCanvas, fallbackCanvas],
    jumpingUp: [fallbackCanvas, fallbackCanvas],
    jumpingDown: [fallbackCanvas, fallbackCanvas],
    runningLeft: [fallbackCanvas, fallbackCanvas, fallbackCanvas, fallbackCanvas],
    runningRight: [fallbackCanvas, fallbackCanvas, fallbackCanvas, fallbackCanvas]
  },
  savedState: null,
  state: {
    paused: false,
    titles: {
      opacity: 0,
      ready: false,
      text: "Game Over"
    },
    climbstarted: false,
    time: null,
    dt: null,
    climbspeed: {
      normal: 0.05,
      fast: 0.12
    },
    pos: {
      x: 1485,
      y: 0
    },
    activePlatforms: [],
    jump: {
      isGrounded: true,
      isJumping: false,
      isBoosting: false,
      speed: 0,
      nextY: 0
    },
    player: {
      dir: 1,
      x: 725,
      y: 350,
      prevY: 350,
      speed: 0,
      animationFrame: 0,
      animationFrameCount: 0
    }
  }
};

$.container = document.getElementById('container');
$.canvas = document.getElementsByTagName('canvas')[0];
$.ctx = $.canvas.getContext('2d');

resize();
if (!$.savedState) {
  $.savedState = JSON.parse(JSON.stringify($.state));
}

prepareGraphics();
draw();

window.addEventListener("keydown", keyDown, false);
window.addEventListener("keyup", keyUp, false);

function keyUp(e) {
  move(e, false);
}

function keyDown(e) {
  move(e, true);
}

function move(e, keyDown) {
  if (e.keyCode === 37) $.input.left = keyDown;
  if (e.keyCode === 39) $.input.right = keyDown;
  if (e.keyCode === 32) $.input.jump = keyDown;
}

function resize() {
  $.rect = $.container.getBoundingClientRect();

  if ($.canvas.height > window.innerHeight) {
    $.container.style.transform = 'scale(' + window.innerHeight / $.canvas.height + ')';
  }
}

window.addEventListener('resize', function (event) {
  resize();
});

function draw() {
  var now = new Date().getTime();
  $.state.dt = now - ($.state.time || now);
  $.state.time = now;

  if (!$.state.paused) {
    doCalculations();
  }

  if (!$.state.paused && $.state.titles.opacity !== 100) {
    drawSky();
    drawPlatforms(false);
    drawBricks();
    drawDoors();
    drawShadows();
    drawPlatforms(true);
    drawPlayer($);
  }

  if ($.state.paused) {
    drawTitles();
  }

  requestAnimationFrame(draw);
}

function drawTitles() {
  if ($.state.titles.opacity < 100) {
    $.state.titles.opacity += Math.floor($.state.dt * 0.2);
  }

  if ($.state.titles.opacity > 100) $.state.titles.opacity = 100;

  $.ctx.fillStyle = "rgba(0, 0, 0, " + $.state.titles.opacity / 100 + ")";
  $.ctx.rect(0, 0, $.canvas.width, $.canvas.height);
  $.ctx.fill();

  $.ctx.fillStyle = "rgba(251, 199, 15, " + $.state.titles.opacity / 100 + ")";
  $.ctx.font = "96px 'Germania One', cursive";
  $.ctx.fillText($.state.titles.text, 600, 520 - easing($.state.titles.opacity / 100) * 40);

  if ($.state.titles.opacity == 100 && !$.input.jump) {
    $.state.titles.ready = true;
  }

  if ($.state.titles.ready && $.input.jump) {
    $.state = JSON.parse(JSON.stringify($.savedState));
  }
}

function easing(n) {
  // https://github.com/component/ease
  var s = 1.70158;
  return --n * n * ((s + 1) * n + s) + 1;
}

function drawPlayer($) {
  var drawY = $.state.player.y + $.state.pos.y - 48,
      drawX = $.state.player.x - ($.state.player.dir ? 120 : 80);

  if ($.state.jump.isJumping) {
    if ($.state.jump.speed > 0) {
      $.ctx.drawImage($.animationFrames.jumpingUp[$.state.player.dir], drawX, drawY);
    } else {
      $.ctx.drawImage($.animationFrames.jumpingDown[$.state.player.dir], drawX, drawY);
    }
  } else if ($.state.player.speed !== 0) {
    if ($.state.player.dir) {
      $.ctx.drawImage($.animationFrames.runningRight[$.state.player.animationFrame], drawX, drawY);
    } else {
      $.ctx.drawImage($.animationFrames.runningLeft[$.state.player.animationFrame], drawX, drawY);
    }
  } else {
    $.ctx.drawImage($.animationFrames.standing[$.state.player.dir], drawX, drawY);
  }

  //$.ctx.fillRect($.state.player.x, $.state.player.y + $.state.pos.y, 150, 250);
  $.state.player.animationFrameCount += $.state.dt;

  if ($.state.player.animationFrameCount > 50) {
    $.state.player.animationFrame += 1;
    $.state.player.animationFrameCount = 0;
  }

  if ($.state.player.animationFrame > 3) {
    $.state.player.animationFrame = 0;
  }
}

function drawDoors() {
  for (var i = 0; i < $.openings.length; i++) {
    var opening = $.openings[i];

    if (opening.x < $.state.pos.x - 40) continue;

    if (opening.x > $.state.pos.x + 220) continue;

    opening.draw($);
  }
}

function drawPlatforms(drawInfrontPlatforms) {
  if (drawInfrontPlatforms) {
    $.state.activePlatforms = [];
  }

  for (var i = 0; i < $.platforms.length; i++) {
    var platform = $.platforms[i];

    if (platform.x < $.state.pos.x - 40) continue;

    if (platform.x > $.state.pos.x + 220) continue;

    if (drawInfrontPlatforms) {
      if (platform.isInFront($)) {
        platform.draw($);
        $.state.activePlatforms.push(platform);
      }
    } else if (!platform.isInFront($)) {
      platform.draw($);
    }
  }

  for (var _i2 = 0; _i2 < $.state.activePlatforms.length; _i2++) {
    $.state.activePlatforms[_i2].drawFront($);
  }
}

function doCalculations() {
  if ($.input.left) {
    $.state.player.speed += $.settings.acceleration;
  } else if ($.input.right) {
    $.state.player.speed -= $.settings.acceleration;
  } else if ($.state.player.speed !== 0) {
    $.state.player.speed *= $.state.jump.isJumping ? $.settings.jump.friction : $.settings.friction;
  }

  if (Math.abs($.state.player.speed) > $.settings.maxSpeed) {
    $.state.player.speed = $.state.player.speed > 0 ? $.settings.maxSpeed : -1 * $.settings.maxSpeed;
  } else if (Math.abs($.state.player.speed) < $.settings.minSpeed) {
    $.state.player.speed = 0;
  }

  if ($.state.player.speed !== 0) {
    var currentSpeed = $.state.jump.isJumping ? $.state.player.speed * 0.7 : $.state.player.speed;
    $.state.pos.x += $.state.player.speed < 0 ? Math.ceil(currentSpeed * $.state.dt) : Math.floor(currentSpeed * $.state.dt);
    $.state.player.dir = currentSpeed > 0 ? 0 : 1;
  }

  if (!$.state.climbstarted && $.input.jump) {
    $.state.climbstarted = true;
  }

  if ($.input.jump || $.state.jump.isJumping) {
    if ($.state.jump.isGrounded) {
      $.state.jump.isGrounded = false;
      $.state.jump.isJumping = true;
      $.state.jump.isBoosting = true;
      $.state.jump.speed = $.settings.jump.maxSpeed;
    }

    if ($.state.jump.isJumping) {
      var upwards = $.state.jump.speed > 0,
          adjust = $.state.dt < 30 ? 30 - $.state.dt : 0; // .·´¯`(>▂<)´¯`·.

      if (!upwards && $.state.jump.isBoosting) {
        $.state.jump.isBoosting = false;
      }

      $.state.player.prevY = $.state.player.y;
      $.state.player.y -= $.state.jump.speed * $.state.dt;
      $.state.jump.speed -= ($.settings.jump.gravity[upwards ? $.state.jump.isBoosting ? 'boost' : 'normal' : 'down'] - adjust * 0.00002) * $.state.dt;
    }
  }

  if ($.state.jump.isBoosting && !$.input.jump) {
    $.state.jump.isBoosting = false;
  }

  if ($.state.climbstarted && $.state.pos.y < 1440) {
    $.state.pos.y += ($.state.player.y + $.state.pos.y < 250 ? $.state.climbspeed.fast : $.state.climbspeed.normal) * $.state.dt;
  }

  collisionDetection();

  if ($.state.player.y + $.state.pos.y > 900) {
    $.state.paused = true;
  }
}

function collisionDetection() {
  if ($.state.jump.isJumping && $.state.jump.speed < 0) {
    for (var i = 0; i < $.state.activePlatforms.length; i++) {
      var platform = $.state.activePlatforms[i];

      if (Math.abs(platform.x - ($.state.pos.x + 90)) < 10) {
        var playerFloor = $.state.player.y + 250,
            playerFloorPrev = $.state.player.prevY + 250;

        if (playerFloor > platform.y && playerFloorPrev < platform.y) {
          $.state.player.y = platform.y - 250;
          $.state.jump.isGrounded = true;
          $.state.jump.isJumping = false;
          $.state.jump.isBoosting = false;
          $.state.jump.speed = 0;
        }
      }
    }
  } else if ($.state.jump.isGrounded) {
    var groundToStandOnFound = false;

    for (var _i3 = 0; _i3 < $.state.activePlatforms.length; _i3++) {
      var _platform = $.state.activePlatforms[_i3];

      if (Math.abs(_platform.x - ($.state.pos.x + 90)) < 10) {
        if (_platform.y - ($.state.player.y + 250) === 0) {
          groundToStandOnFound = true;
          break;
        }
      }
    }

    if (!groundToStandOnFound) {
      $.state.jump.isGrounded = false;
      $.state.jump.isJumping = true;
      $.state.jump.isBoosting = true;
      $.state.jump.speed = $.settings.jump.fallStartSpeed;
    }
  }
}

function drawSky() {
  if ($.storage.sky == null) {
    var height = $.canvas.height,
        temp = new OffScreenCanvas($.canvas.width, height);
    temp.ctx.fillStyle = $.sky.bg;
    temp.ctx.fillRect(0, 0, $.canvas.width, height);

    for (var i = 0; i < 150; i++) {
      var starSize = Math.floor(Math.random() * $.sky.starSizes.length);
      temp.ctx.fillStyle = $.sky.starColors[starSize];
      temp.ctx.beginPath();
      temp.ctx.arc(Math.floor(Math.random() * $.canvas.width), Math.floor(Math.random() * height), $.sky.starSizes[starSize], 0, 2 * Math.PI);
      temp.ctx.fill();
    }

    $.storage.sky = temp.canvas;
  } else {
    var skypos = ($.state.pos.x - 2000) % 200 * 8 * -1,
        skyYPos = $.state.pos.y % $.canvas.height;

    $.ctx.drawImage($.storage.sky, skypos, skyYPos);
    $.ctx.drawImage($.storage.sky, skypos - $.canvas.width, skyYPos);
    $.ctx.drawImage($.storage.sky, skypos, skyYPos - $.canvas.height);
    $.ctx.drawImage($.storage.sky, skypos - $.canvas.width, skyYPos - $.canvas.height);
  }
}

function drawShadows() {
  if ($.storage.shadows) {
    $.ctx.drawImage($.storage.shadows, $.tower.skyWidth, 0);
  } else {
    var temp = new OffScreenCanvas($.tower.width, $.canvas.height);
    drawTowerShadow(temp.ctx, 0, $.tower.shadowWidth + 80, $.canvas.height, '#727C80', 'transparent');
    drawTowerShadow(temp.ctx, 0, $.tower.shadowWidth, $.canvas.height, '#00011F', 'transparent');
    drawTowerShadow(temp.ctx, temp.canvas.width - ($.tower.shadowWidth + 80), $.tower.shadowWidth + 80, $.canvas.height, 'transparent', '#727C80');
    drawTowerShadow(temp.ctx, temp.canvas.width - $.tower.shadowWidth, $.tower.shadowWidth, $.canvas.height, 'transparent', '#00011F');
    $.storage.shadows = temp.canvas;
  }
}

function drawTowerShadow(ctx, start, width, height, from, to) {
  var grd = ctx.createLinearGradient(start, 0, start + width, 0);
  grd.addColorStop(0, from);
  grd.addColorStop(1, to);

  ctx.fillStyle = grd;
  ctx.fillRect(start, 0, width, height);
}

function drawBricks() {
  var brickRowHeight = $.brick.height * 2 + $.brick.padding * 2;

  if (!$.storage.bricks) {
    $.storage.bricks = {};
    for (var i = 0; i < 16; i++) {
      $.storage.bricks["brick" + i] = brickFactory(brickRowHeight, i);
    }
  }

  for (var row = -1; row < 12; row++) {
    $.ctx.drawImage($.storage.bricks["brick" + $.state.pos.x % $.brick.width], $.tower.skyWidth, brickRowHeight * row + $.state.pos.y % brickRowHeight);
  }
}

function brickFactory(height, pos) {
  var temp = new OffScreenCanvas($.tower.width, height),
      x = $.brick.padding,
      y = $.brick.padding,
      pointA = { x: 0, y: 0 },
      pointB = void 0,
      step = $.brick.width,
      halfrow = true,
      gradient = temp.ctx.createLinearGradient(0, 0, temp.canvas.width, height);

  gradient.addColorStop(0, "black");
  gradient.addColorStop(0.35, "#353637");
  gradient.addColorStop(0.65, "#353637");
  gradient.addColorStop(1, "black");

  temp.ctx.fillStyle = gradient;

  temp.ctx.fillRect(0, 0, temp.canvas.width, temp.canvas.height);

  for (var i = 0; i < 2; i++) {
    for (var j = 180 + pos; j <= 360; j += step) {
      pointA = getCirclePoint(600, 600, j);

      if (halfrow) {
        j += step / 2;
        halfrow = false;
      }

      pointB = getCirclePoint(600, 600, j + step);

      // Main
      temp.ctx.fillStyle = $.brick.color;
      temp.ctx.fillRect(pointA, y, pointB - pointA - $.brick.padding, $.brick.height);

      // Shade
      temp.ctx.fillStyle = $.brick.shade;
      temp.ctx.fillRect(pointA, y, pointB - pointA - $.brick.padding, 3);
    }

    y += $.brick.padding;
    y += $.brick.height;
  }

  return temp.canvas;
}

function getCirclePoint(radius, center, angle) {
  var radian = angle / 180 * Math.PI;

  return center + radius * Math.cos(radian);
}

function norm(value, min, max) {
  return (value - min) / (max - min);
}

function lerp(norm, min, max) {
  return (max - min) * norm + min;
}

function map(value, sourceMin, sourceMax, destMin, destMax) {
  return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
}

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}</script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
H5小游戏1—— 是男人就下一百层（附完整源码）
前端好玩的小案例、游戏、工具
10-21 1万+
H5小游戏1—— 是男人就下一百层源码也可在文末免费获取。 演示地址：https://code.haiyong.site/moyu/100/ 演示视频：https://www.bilibili.com/video/BV1bK411D7cJ
是男人就上一百层.7z
01-11
《是男人就上一百层》是一款基于HTML和JavaScript技术开发的闯关游戏，它展示了Web技术在游戏制作领域的应用。HTML（HyperText Markup Language）是网页的基础，用于定义页面结构和内容，而JavaScript则是一种强大的...
是男人就上一百层
wshyb0314的博客
11-16 757
今天分享一个小游戏源码——《是男人就上一百层》有趣又好玩的代码，零基础也能轻松把控。
好玩小游戏---是男人就下100层
aeaxea43的博客
02-10 427
200多KB,紧张刺激,适合长期编程人员放松以下. 也很简单, 直接操作鼠标往下跳即可. 楼主最高记录也就30多层,不知道有没有高手出现. 下载地址: http://traffic189.com/f-92.html ...
HTML5游戏开发_是男人就下100层
dbp5156的博客
10-21 70
项目流程 　　市场调研（可行性分析）--> 可行性报告书 需求分析师、客户经理 　　需求分析--> 需求说明书 项目经理、需求分析师 　　概要设计--> 概要设计说明书（ER图， UML） 项目经理、项目组长 　　详细设计--> 详细设计说明书(流程图) 数据库建好、项目周期表(甘特图) office project visio 项...
gdufe1538-是男人就上100层-（三维bfs）
dengpan1889的博客
03-03 102
Problem Description: 桐老爷和UGO终于来到了名为“是男人就上一百层的塔”的下面，听说大祭司在第100层沉睡。为了题目需要，我把这个塔的层数随机打乱，层数的话大家就忘了前面的100吧，用n*m的一个矩阵来代替。前面提到大祭司在沉睡，所以桐人和尤吉欧希望赶快到达大祭司面前杠正面，但是有些层有整合骑士看守。只有在桐人或者UGO有“Enhance armament”（武装...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
十一月廿七风雨大作
05-07 4094
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作博主的话游戏展示编程工具介绍游戏代码代码讲解js 第一步 切换div的显示与隐藏js 第二步 在菜单页面用lufylegend插件封装英雄js 第三步 在菜单页面实现挑选英雄js 第四步 在游戏页面生成英雄js 第五步 在游戏页面制作滚动的背景js 第六步 在游戏页面添加地板！js 第七步 定义英雄上升、下降、死亡函数js 第八步 英雄与...
HTML5小游戏【是男人就下100层--100c优秀H5小游戏合集】游戏源码分享下载 --- 100c.zip
我的昵称：程序员SUMER（全网同名）
06-04 168
HTML5小游戏【是男人就下100层--100c优秀H5小游戏合集】游戏源码分享下载 --- 100c.zip
个人开发独立游戏《是男人就上一百层》源码
a88868886的博客
01-02 707
上大学时，本人电脑里有一款小游戏，名字叫《是男人就上100层》，当时觉得这个游戏挺有意思，难度看似很高，但掌握了规律后能玩很久，还有点让人上瘾的感觉。进一步了解，才知道该游戏的原名叫《NS-Tower》，由日本Nagi-P公司开发。 后来接触了安卓开发，便想在安卓上实现这个游戏来练手。当时想这么简单的一个游戏，也没有必要用什么游戏引擎，就准备直接用安卓原生API来实现。...
是男人就下一百层代码
weixin_34100227的博客
06-06 2074
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class GameManage : MonoBehaviour { private Image bg; private GameObject[] ...
HTML5小游戏【是男人就下100层-100c优秀H5小游戏合集】游戏源码分享下载 - 100c.zip
06-04
HTML5小游戏【是男人就下100层--100c优秀H5小游戏合集】游戏源码分享下载 --- 100c.zipHTML5小游戏【是男人就下100层--100c优秀H5小游戏合集】游戏源码分享下载 --- 100c.zipHTML5小游戏【是男人就下100层--100c优秀...
HTML 小游戏：是男人就下100层
01-02
基于html开发的小游戏，无需配置环境，点击即可运行 基于html开发的小游戏，无需配置环境，点击即可运行 基于html开发的小游戏，无需配置环境，点击即可运行 基于html开发的小游戏，无需配置环境，点击即可运行 基于...
是男人就下100层-小游戏-NAS-WebStation-HTML5
08-21
是男人就下100层-小游戏，部署于NAS的WebStation等服务器上，分配端口即可使用，Index文件内已去除广告
html5是男人就下100层游戏源代码
10-21
使用技术：HTML+CSS+JS 在线演示地址：...说明：使用 HTML CSS 和 JavaScript 创建的是男人就下100层游戏源代码。我们在很多地方都可以用，比如适用于不同类型的个人网站、游戏站等。
C# Word转换HTML（附在线转换工具）
最新发布
学习和分享
07-17 897
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 900
PhantomJS 生成图片，pdf，爬虫等功能
【Godot4.2】MLTag类：HTML、XML通用标签类
巽的博客
07-16 1057
HTML和XML采用类似的标签形式。之前在Godot中以函数库形式实现了网页标签和内容生成。能用，但是缺点也很明显。函数之间没有从属关系，但是多有依赖，而且没有划分出各种对象和类型。如果以完全的面向对象形式来设计标签类或者元素类，将可以更贴近HTML或XML的本来面目。也更容易生成。整体思路是设计如下的类继承结构：实现之后，将可以充分的定义和生成HTML、XML和SVG标签，并用于内容生成或文档解析。纯面向对象的设计，尤其是基于继承的多个类组成的体系在某些方面还是很有用的。
scroll-view 怎么配置上下层
04-27
要在 scroll-view 中配置上下层布局，需要在 scroll-view 中添加一个容器 view，并将上下两个子元素分别放在容器 view 中的不同位置。具体的实现方式如下： 1. 在 scroll-view 中添加一个容器 view，并设置容器 view 的高度大于 scroll-view 的高度； 2. 将上层元素放在容器 view 的顶部，下层元素放在容器 view 的底部； 3. 设置 scroll-view 的 overflow 属性为 scroll，这样就可以通过滚动来查看上下两层元素了。 示例代码如下： ```html <scroll-view style="height: 100%"> <view style="height: 200%"> <view style="position: absolute; top: 0; left: 0; right: 0;">上层元素</view> <view style="position: absolute; bottom: 0; left: 0; right: 0;">下层元素</view> </view> </scroll-view> ``` 需要注意的是，由于上下两个元素都是绝对定位，因此需要设置容器 view 的高度大于 scroll-view 的高度，以确保容器 view 能够包含上下两个元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值