zdog实现掷骰子随机点数游戏代码
代码语言:html
所属分类:游戏
代码描述:zdog实现掷骰子随机点数游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; min-block-size: 100svb; display: grid; place-items: center; color: hsl(206 6% 24%); background: hsl(210 6% 87%); font-family: system-ui; } div { display: inline-block; position: relative; aspect-ratio: 1/1; } div > button { position: absolute; inset-inline-start: 50%; inset-block-end: 0%; translate: -50% 0%; } div > canvas { display: block; width: 400px; height: 400px; } button { --_color: hsl(0 0% 99%); --_background: hsl(206 6% 24%); --_active: hsl(216 3% 38%); font: inherit; font-size: 1rem; color: var(--_color, hsl(0 0% 90%)); background: var(--_background, hsl(0 0% 20%)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.025rem; border: none; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%; } button:focus { outline-offset: 0.25rem; outline-color: var(--_background, hsl(0 0% 20%)); } button[data-state="roll"] { scale: 0.8; --_background: var(--_active); } body { background-image: url('data:image/svg+xml,<svg viewBox="-7.5 -2.5 15 10" xmlns="http://www.w3.org/2000/svg">\ <circle id="d" fill="hsl(210 6%25 80%25)" r="0.3" />\ <g transform="translate(5 0)">\ <use href="%23d" />\ <use x="1" y="1" href="%23d" />\ <use x="-1" y="1" href="%23d" />\ <use x="-1" y="-1" href="%23d" />\ <use x="1" y="-1" href="%23d" />\ </g>\ <g transform="translate(-5 0)">\ <use x="1" y="1" href="%23d" />\ <use x="-1" y="1" href="%23d" />\ <use x="-1" y="-1" href="%23d" />\ <use x="1" y="-1" href="%23d" />\ </g>\ <g transform="translate(0 5)">\ <use x="1" href="%23d" />\ <use x="-1" href="%23d" />\ <use x="1" y="1" href="%23d" />\ <use x="-1" y="1" href="%23d" />\ <use x="-1" y="-1" href="%23d" />\ <use x="1" y="-1" href="%23d" />\ </g>\ <g transform="translate(5 5)">\ <use x="-1" y="1" href="%23d" />\ <use x="1" y="-1" href="%23d" />\ </g>\ <g transform="translate(-5 5)">\ <use href="%23d" />\ <use x="-1" y="1" href="%23d" />\ <use x="1" y="-1" href="%23d" />\ </g>\ </svg>'); background-size: 200px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> </head> <body> <div id="roll"> <canvas width="400" height="400"></canvas> </div> <script > const { Illustration, Group, Box, Hemisphere, TAU, easeInOut } = Zdog; const root = document.getElementById("roll"); const canvas = root.querySelector("canvas"); const button = document.createElement("button"); const colors = { white: "hsl(0 0% 99%)", black: "hsl(206 6% 24%)", red: "hsl(4 77% 55%)" }; const stroke = 20; con.........完整代码请登录后点击上方下载按钮下载查看
网友评论0