原生js实现机械圆盘转动拼图游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：原生js实现机械圆盘转动拼图游戏代码，这个游戏是一个基于 JavaScript 的图形化逻辑拼图游戏，其灵感来源于机械谜题（如 Oskar van Deventer 设计的“Diskussion”类谜题），目标是通过旋转四个圆盘来使每个圆盘上的颜色块与中心匹配。

代码标签：原生 js 机械圆盘转动拼图游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}
body { margin: 0; padding: 0; background: #1e1e1e; font-family: monospace; }
:root {
    --size: min(200px, min(30vh, 30vw));
    --subsz: calc(0.2 * var(--size));

    --clr1: #479ce7;
    --clr2: #ef476f;
    --clr3: #ffd166;
    --clr4: #06d6a0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 50vh;
}
.circle {
    position: absolute;
    width: var(--size);
    height: var(--size);
    background: #fff;
    border-radius: 100%;
    left: 0; right: 0; top: 0; bottom: 0;
    box-shadow: inset 0 0 0 calc(0.3 * var(--size)) #0002;
    margin: auto;
    transition: rotate 1s ease-in-out;
    &#A {
        background: var(--clr1);
        left: calc(var(--size)*1.74);
    }
    &#B {
        background: var(--clr2);
        bottom: calc(var(--size)*-1);
    }
    &#C {
        background: var(--clr3);
        right: calc(var(--size)*1.74);
    }
    &#D {
        background: var(--clr4);
        top: calc(var(--size)*-1);
    }
    > div {
        position: absolute;
        left: calc(50% - var(--subsz)/2);
        top: 0;
        width: var(--subsz); height: calc(50%);
        transform-origin: 50% 100%;
        &::before {
            content: '';
            display: block;
            position: relative;
            top: -1px;
            width: var(--subsz);
            height: calc( var(--subsz));
            background: #1e1e1e;
            border-bottom-left-radius: var(--subsz);
            border-bottom-right-radius: var(--subsz);
        }
        &:nth-child(1){ rotate: 60deg;}
        &:nth-child(2){ rotate: 120deg;}
        &:nth-child(3){ rotate: 180deg;}
        &:nth-child(4){ rotate: 240deg;}
        &:nth-child(5){ rotate: 300deg;}

        &::after {
            position: absolute; 
            display: block;
            transition: top 0.4s ease-in-out, background 1.2s ease-in;
            content: '';
            color: #fff; 
            width: calc(0.8 * var(--subsz)); height: calc(0.8 * var(--subsz));
            left: calc(0.1 * var(--subsz));
            
            border-radius: 100%;
            top: calc(-0.9 * var(--subsz));
        }
        &[data-cur="a"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr1); transition: top 0.4s ease-in-out, background 0s linear;}
        &[data-cur="b"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr2); transition: top 0.4s ease-in-out, background 0s linear;}
        &[data-cur="c"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr3); transition: top 0.4s ease-in-out, background 0s linear;}
        &[data-cur="d"]::after { top: calc(0.06 * var(--subsz)); background: var(--clr4); transition: top 0.4s ease-in-out, background 0s linear;}
    }
}
.arrow {
    position: absolute;
    &.a{ 
        top: calc(-0.2 * var(--size)); 
        rotate: 90deg; 
        translate: calc(1.4 * var(--size)); 
        .left, .right {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23479ce7' version='1.1' id='Layer_1' viewBox='0 0 302.817 302.817' xml:space='preserve'%3E%3Cpath id='XMLID_5_' d='M298.423,128.606L235.94,66.124c-0.004-0.003-0.007-0.006-0.011-0.009c-0.355-0.354-0.725-0.689-1.111-1.005 c-0.214-0.175-0.439-0.327-0.66-0.488c-0.169-0.123-0.332-0.256-0.507-0.372c-0.29-0.19.........完整代码请登录后点击上方下载按钮下载查看