今天分享一个小游戏源码——《是男人就上一百层》
是男人就上一百层是一款十分有趣的休闲闯关游戏，采用上帝视角进行游戏，操作简单，玩家控制小人躲避敌人的追查，找到出口，考验玩家头脑的时刻到了，仔细思考，你就能发现其中的秘密。
有趣又好玩的代码，零基础也能轻松把控。
<!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>
只需要复制代码，在桌面新建文档，粘贴代码，修改后缀为.html就可以运行啦~快来挑战吧！
更多有趣好玩又简单的代码，我打包了100个源码套装，有需要的小伙伴可以私信获取哦，带你领略代码得魅力！
2022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
