超级马里奥（可复制源代码）

可一键复制完整源码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>超级马里奥</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      html {
        height: 100%;
      }

      body {
        min-height: 100%;
        margin: 0;
        background: #fd0;
        font-family: sans-serif;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      canvas {
        display: block;
        margin: 0px auto 20px;
        cursor: move;
      }
    </style>
</head>
<body>
    <div class="container">
      <canvas class="illo"></canvas>
    </div>

    <script src="https://unpkg.com/zdog@1/dist/zdog.dist.js"></script>
    <script>var illoElem=document.querySelector(".illo");var illoSize=72;var minWindowSize=Math.min(window.innerWidth-20,window.innerHeight-60);var zoom=Math.floor(minWindowSize/illoSize);illoElem.setAttribute("width",illoSize*zoom);illoElem.setAttribute("height",illoSize*zoom);var isSpinning=true;var TAU=Zdog.TAU;var illo=new Zdog.Illustration({element:illoElem,zoom:zoom,dragRotate:true,onDragStart:function(){isSpinning=false},});var colors={eye:"#333",white:"#FFF",hair:"#631",overalls:"#24D",cloth:"#E11",skin:"#FC9",leather:"#A63",};var head=new Zdog.Shape({addTo:illo,translate:{y:-12,z:1},color:colors.skin,stroke:23,});new Zdog.Shape({addTo:head,translate:{y:5,z:13},color:colors.skin,stroke:7,});var chin=new Zdog.Shape({addTo:head,path:[{x:-5,y:6,z:4},{x:0,y:8.5,z:6},],color:colors.skin,stroke:10,});chin.copy({scale:{x:-1},});new Zdog.Shape({path:[{x:-3,y:-3},{x:-1,y:-1},{x:1,y:-1},{x:3,y:-3},],translate:{y:12,z:9},color:colors.cloth,fill:true,stroke:2,addTo:head,});var hat=new Zdog.Anchor({addTo:head,translate:{y:-8},});var hatFrontA=new Zdog.Vector({x:-8,y:0,z:5});var hatFrontB=new Zdog.Vector({x:-4,y:-3,z:7});var hatFrontC=hatFrontB.copy().multiply({x:-1});var hatFrontD=hatFrontA.copy().multiply({x:-1});new Zdog.Shape({path:[hatFrontA,hatFrontB,hatFrontC,hatFrontD],color:colors.cloth,closed:false,fill:false,stroke:11,addTo:hat,});var hatTopFront=new Zdog.Vector({x:10,y:1,z:5});var hatTopBackA=new Zdog.Vector({x:7,y:3,z:-10});var hatTopBackB=hatTopBackA.copy().multiply({x:-1});new Zdog.Shape({path:[hatTopFront.copy().multiply({x:-1}),hatTopFront,hatTopBackA,hatTopBackB,],color:colors.cloth,fill:true,stroke:9,addTo:hat,});new Zdog.Shape({path:[hatTopBackA,hatTopBackB],color:colors.cloth,stroke:9,addTo:hat,});var hatTopSide=new Zdog.Shape({path:[hatTopFront,hatTopBackA],color:colors.cloth,stroke:9,addTo:hat,});hatTopSide.copy({scale:{x:-1},});new Zdog.Shape({path:[{x:-3,y:0,z:-8},{x:3,y:0,z:-8},{x:3,y:-3,z:4},{x:-3,y:-3,z:4},],color:colors.cloth,stroke:6,addTo:hat,});var hatBrim=new Zdog.Shape({path:[{x:10,y:4,z:-0},{x:8,y:4,z:5},{x:0,y:2,z:9},{x:0,y:1,z:2},],translate:{z:7},color:colors.cloth,fill:true,stroke:4,addTo:hat,});hatBrim.copy({scale:{x:-1},});var eye=new Zdog.Shape({path:[{y:2},{y:4}],translate:{x:5,z:9},color:colors.eye,stroke:3,addTo:head,});eye.copy({translate:{x:-5,z:9},});var brow=new Zdog.Shape({path:[{x:3,y:0,z:-0},{x:1.5,y:-0.5,z:1},{x:0,y:0,z:1},],translate:{x:4,y:-1.5,z:9},color:colors.hair,closed:false,stroke:2.5,addTo:head,});brow.copy({scale:{x:-1},translate:{x:-4,y:-1.5,z:9},});var mustache=new Zdog.Group({addTo:head,translate:{y:6.5,z:10},});new Zdog.Shape({path:[{x:2,y:1,z:1.5},{x:6.5,y:0,z:-0},],color:colors.hair,stroke:3,addTo:mustache,});var mustacheSection=new Zdog.Shape({translate:{x:1.75,y:1.5,z:1},color:colors.hair,stroke:4,addTo:mustache,});mustacheSection.copy({translate:{x:4.5,y:1,z:0.75},});mustache.copyGraph({scale:{x:-1},});var sideburns=new Zdog.Shape({path:[{y:0,z:0},{y:-4,z:1.5},{y:-4,z:1},{y:-1,z:2},],translate:{x:10,y:3,z:2},color:colors.hair,closed:false,fill:true,stroke:3,addTo:head,});sideburns.copy({translate:sideburns.translate.copy().multiply({x:-1}),});var ear=new Zdog.Shape({path:[{x:0,y:0,z:-0},{x:0,y:-4,z:-0},{x:1,y:-4,z:-2},{x:0,y:0,z:-1},],translate:{x:10,y:4,z:-2},color:colors.skin,fill:true,stroke:4,addTo:head,});ear.copy({scale:{x:-1},translate:ear.translate.copy().multiply({x:-1}),});var sideHair=new Zdog.Anchor({addTo:head,});new Zdog.Shape({path:[{x:4,y:-7,z:-1},{x:3,y:0,z:-0},{x:0,y:0,z:-5},{x:2,y:-6.5,z:-6},],translate:{x:5,y:7,z:-5},color:colors.hair,fill:true,stroke:3,addTo:sideHair,});var hairBall=new Zdog.Shape({translate:{x:6,y:8,z:-8},color:colors.hair,stroke:6,addTo:sideHair,});hairBall.copy({translate:{x:2,y:8,z:-10},});sideHair.copyGraph({scale:{x:-1},});new Zdog.Shape({path:[{x:5,y:0,z:-0},{x:6,y:-6.5,z:-1},{x:-6,y:-6.5,z:-1},{x:-5,y:0,z:-0},],translate:{y:7,z:-10},color:colors.hair,fill:true,stroke:3,addTo:head,});var body=new Zdog.Shape({translate:{x:0,y:10,z:1},color:colors.overalls,stroke:20,addTo:illo,});var rightShoulder={x:-8,y:-8,z:-3};var rightWrist=new Zdog.Vector({x:-14,y:-17,z:-0});new Zdog.Shape({path:[rightShoulder,rightWrist],color:colors.cloth,stroke:8,addTo:body,});new Zdog.Shape({path:[{x:-17,y:-23,z:1}],color:colors.white,stroke:12,addTo:body,});var leftShoulder={x:6,y:-7,z:-4};var leftElbow={x:8,y:-4,z:-8};new Zdog.Shape({path:[leftShoulder,leftElbow],color:colors.cloth,stroke:8,addTo:body,});new Zdog.Shape({path:[leftElbow,{x:12,y:-2,z:-9}],color:colors.cloth,stroke:8,addTo:body,});new Zdog.Shape({path:[{x:17,y:1,z:-8}],color:colors.white,stroke:12,addTo:body,});new Zdog.Shape({path:[leftShoulder,rightShoulder],color:colors.cloth,stroke:8,addTo:body,});var rightLeg=new Zdog.Shape({path:[{y:4,z:2},{y:10,z:1},{y:12,z:-0},],translate:{x:-5},closed:false,color:colors.overalls,stroke:10,addTo:body,});var shoe=new Zdog.Rect({addTo:rightLeg,width:4,height:7,translate:{y:15.5,z:-4},fill:true,color:colors.leather,stroke:6,});new Zdog.Shape({addTo:shoe,translate:{y:3,z:2.5},color:colors.leather,stroke:11,});var leftLeg=new Zdog.Shape({path:[{y:4,z:2},{y:2,z:7},{y:3,z:11},],translate:{x:5},closed:false,color:colors.overalls,stroke:10,addTo:body,});shoe.copyGraph({addTo:leftLeg,translate:{y:2,z:18},rotate:{x:TAU*(160/360)},});function animate(){illo.rotate.y+=isSpinning?-0.05:0;illo.updateRenderGraph();requestAnimationFrame(animate)}animate();</script>
</body>
</html>