Ascension de la tour circulaire

2,018 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Ascension de la tour circulaire

Recommandé

29 August 2024

Page 404 avec parallaxe

16 October 2025

Arrière-plan animé CSS avec effet de chargement

21 July 2025

Portefeuille de développeurs : Web, applications, conception - Dawid Wróbel

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platformer Game</title>
  <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 id="gameCanvas" width="1600" height="900"></canvas>
  </div>

<script>
    class Point {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
      }
      
      class OffScreenCanvas {
        constructor(width, height) {
          let c = document.createElement('canvas');
          c.width = width;
          c.height = height;
          this.ctx = c.getContext('2d');
          this.canvas = c;
        }
      }
      
      class Opening {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }
        
        draw($) {
          let 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) {
            let 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);
          }
        }
      }
      
      function prepareGraphics() {
        const 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) {
        let 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) {
          let 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;
      }
      
      class Platform {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.infront = false;
          this.outerBox = null;
        }
        
        getY($) {
          return this.y + $.state.pos.y;
        }
        
        isInFront($) {
          let center = this.x - $.state.pos.x,
            innerBox = getBox($, 600, center),
            outerBox = getBox($, 680, center);
          
          this.infront = outerBox.left > outerBox.right;
          return this.infront;
        }
        
        drawFront($) {
          $.ctx.fillStyle = $.colors.wood2;
          $.ctx.fillRect(this.outerBox.left, this.getY($), this.outerBox.width, $.platform.height);
        }
        
        draw($) {
          let 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;
          
          for (let dir of ['left', 'right']) {
            let 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;
        }
      }
      
      function drawPolygon($, color, ...points) {
        $.ctx.fillStyle = color;
        $.ctx.beginPath();
        $.ctx.moveTo(points[0].x, points[0].y);
        for (let i = 1; i < points.length; i++) {
          $.ctx.lineTo(points[i].x, points[i].y);
        }
        $.ctx.fill();
      }
      
      function getBox($, radius, center) {
          let 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),
                       new Platform(1150, -910),
                       new Platform(1100, -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() {
          let 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($) {
        let 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 (let i = 0; i < $.openings.length; i++) {
          let 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 (let i = 0; i < $.platforms.length; i++) {
          let 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 (let i = 0; i < $.state.activePlatforms.length; i++) { 
          $.state.activePlatforms[i].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) {
          let 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) {
            let 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 (let i = 0; i < $.state.activePlatforms.length; i++) {
            let platform = $.state.activePlatforms[i];
      
            if(Math.abs(platform.x - ($.state.pos.x + 90)) < 10) {
              let 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) {
          let groundToStandOnFound = false;
          
          for (let i = 0; i < $.state.activePlatforms.length; i++) {
            let platform = $.state.activePlatforms[i];
            
            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) {
          let height = $.canvas.height,
              temp = new OffScreenCanvas($.canvas.width, height);
          temp.ctx.fillStyle = $.sky.bg;
          temp.ctx.fillRect(0, 0, $.canvas.width, height);
      
          for (let i = 0; i < 150; i++) {
            let 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 {
          let 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) {
        let 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() {
        let brickRowHeight = ($.brick.height * 2) + ($.brick.padding * 2);
        
        if(!$.storage.bricks) {
          $.storage.bricks = {};
          for (let i = 0; i < 16; i++) { 
            $.storage.bricks["brick" + i] = brickFactory(brickRowHeight, i);
          }
        }
        
        for (let 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) {
        let temp = new OffScreenCanvas($.tower.width, height),
            x = $.brick.padding,
            y = $.brick.padding,
            pointA = { x: 0, y: 0 },
            pointB,
            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 (let i = 0; i < 2; i++) {
          for (let 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>

CSS

JS