快乐母鸡，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            
            <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快乐母鸡</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="counter">000</div>
    <script src="./index.js"></script>
</body>

</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

            
            body {
    margin: 0;
    overflow: hidden;
    background-color: #a9d8e6;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.hen,
.egg {
    position: absolute;
    cursor: pointer;
}

.hen {
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='%23f29a2e' d='M7.6 20.4c1.8 2.9 3.8 3.3 5.2 1.6c2.2-2.6-.2-5.9-2.8-6.8c-4.3-1.7-8 3.1-8 3.1s4.1-.4 5.6 2.1'/%3E%3Cpath fill='%23e1eaf2' d='M42.8 10.2c-7.7 4.5-1.3 15.3-15.2 18.2l14.8 7.3c3 5.2 11.3 5.6 11.3 5.6s2.1-6.2.4-10.8c4.6 0 7.8-2.8 7.8-2.8s-2.6-9.2-10.5-9.2c7.8-3.2 9.2-9.8 9.2-9.8s-6.9-4.8-17.8 1.5'/%3E%3Cpath fill='%23f4bc58' d='M35.7 62H21.4c0-1.2 8.4-1.4 8.8-9.4c1.3 8.9 5.5 8.2 5.5 9.4'/%3E%3Cg fill='%23d1dce6'%3E%3Cpath d='M49.4 30.6c0 11.5-9.4 23.3-21 23.3s-21-11.8-21-23.3c0-7.7 16.6-2.3 21-2.3c11.6-.1 21-9.3 21 2.3'/%3E%3Cpath d='M36.4 49.2c0 2.3-3.3 7.3-6.2 7.3S24 53.1 24 50.8s12.4-2.7 12.4-1.6'/%3E%3C/g%3E%3Cpath fill='%23e1eaf2' d='M6.5 26.3c0 3 .6 11.7.6 11.7l2.7-3.4l3.2 3.8l.7-5.3l4.9 3.5l-.9-5.2l5.9.6l-2.7-3.2l4.1-2.7s-5 1.1-4.9-2s2.6-11.9-.5-13.2C13.9 8.8 6.5 13.6 6.5 26.3'/%3E%3Cg fill='%233e4347'%3E%3Cellipse cx='6.5' cy='16.1' rx='.7' ry='.3'/%3E%3Ccircle cx='11.5' cy='16.7' r='1.5'/%3E%3C/g%3E%3Cg fill='%23e24b4b'%3E%3Cpath d='M7.8 23.6c0 3.2-2.1.9-2.1.9c-.7 0-3.6 2.2-2.6-1.5c1.3-4.8 6.3-8 6.3-8s-1.6 2.8-1.6 8.6'/%3E%3Cpath d='M20.8 10.6V9.4c-.2-2.5 3.4-3.5 3-4.8c-.6-1.7-5.3-.6-7.6 3.1q-.45.6-.6 1.5c-.1-.4-.2-.8-.4-1.2c-1.1-2.3 2.2-4.4 1.2-5.5c-1.3-1.5-5.2 1.1-6.1 5.4c-.2.9-.2 1.8.1 2.7c-.1-.1-.2-.2-.3-.2c-1.7-1.3 0-4-1.2-4.6c-1.8-.8-3.4 2.8-2.5 6.3c.6 2 2.8 4.1 4.6 2.4c.6-.5 2-1.3 2.8-1.6c.6-.2 2.2-.1 3.2.6c.9.6 1.6 1.8 2.9 1.8c5.7.2 8.8-5.3 6.7-6.5c-1.1-.8-2.8 1.2-5.8 1.8'/%3E%3C/g%3E%3Cpath fill='%23e1eaf2' d='M42.5 43.9c-.9-2.2-3.5-3.4-3.5-3.4c2.7-1.4 4.3-4.4 4.3-4.4c-1.4-.6-6.8-1-6.8-1c1.2-1.2 2.2-2.9 2.2-2.9s-6.2-1.5-11.4 1.3c-6.8 3.8-4.8 12.8 2.9 13.8c8.5 1.1 12.3-3.4 12.3-3.4'/%3E%3C/svg%3E") no-repeat center center;
    background-size: cover;
    transition-property: top, left;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}

.egg {
    width: 30px;
    height: 30px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgMTI4IDEyOCI+PHBhdGggZmlsbD0iI2Y4ZDhjMCIgZD0iTTY0IDMuNzhjLTI1LjA5IDAtNDcuMzYgMzIuNjItNDcuMzYgNzAuODljMCAzMS45OSAyMS45NiA0OS41NiA0Ny4zNiA0OS41NnM0Ny4zNi0xNy41NyA0Ny4zNi00OS41NkMxMTEuMzYgMzYuNCA4OS4wOSAzLjc4IDY0IDMuNzgiLz48cGF0aCBmaWxsPSIjZWZiNzhlIiBkPSJNMTAwLjMzIDMwLjE3Yy4zIDE4Ljc4LTQuMzkgMzkuODUtMTYuOTkgNTUuMTZjLTE4LjkxIDIyLjk5LTQ5LjQgMjAuMjQtNjAuOTMgMTQuODFjOC4xNiAxNS43MSAyNC4wNSAyNC4wOSA0MS41OSAyNC4wOWMyNS40MSAwIDQ3LjM2LTE3LjU3IDQ3LjM2LTQ5LjU2YzAtMTYuNjQtNC4yMS0zMi4yMS0xMS4wMy00NC41Ii8+PC9zdmc+') no-repeat center center;
    background-size: cover;
}

#counter {
    z-index: 2;
    position: absolute;
    right: 2rem;
    top: 2rem;
    font-size: 2.5rem;
    background-color: rgba(175, 175, 175, 0.5);
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

            
            const HEN_SIZE = 100;
const INTERVAL_MS = 2000;
const EGG_DELAY_MS = 1200;
const EGG_X = 65;
const EGG_Y = 70;
const TIME_MS = 10 * 1000;

function PROB(henCount) {
  return 0.8 / (henCount) + 0.2;
}

let counter = 1;
let timeUp = false;
const handles = [];

function createHen(pos) {
    const hen = document.createElement('div');
    hen.classList.add('hen');
    hen.style.left = pos?.x ?? `${Math.random() * (window.innerWidth - HEN_SIZE)}px`;
    hen.style.top = pos?.y ?? `${Math.random() * (window.innerHeight - HEN_SIZE)}px`;
    document.body.appendChild(hen);
    moveHen(hen);
}

function moveHen(hen) {
    const handle = setInterval(() => {
        const x = Math.random() * (window.innerWidth - HEN_SIZE);
        const y = Math.random() * (window.innerHeight - HEN_SIZE);
        hen.style.left = `${x}px`;
        hen.style.top = `${y}px`;
        if (Math.random() < PROB(counter)) {
            setTimeout(() => {
              if (!timeUp) {
                layEggs(hen);
              }
            }, EGG_DELAY_MS);
        }
    }, INTERVAL_MS);
    handles.push(handle);
}

function layEggs(hen) {
    const egg = document.createElement('div');
    egg.classList.add('egg');
    egg.style.left = `${parseFloat(hen.style.left) + EGG_X}px`;
    egg.style.top = `${parseFloat(hen.style.top) + EGG_Y}px`;
    document.body.appendChild(egg);
    egg.onclick = () => hatchEgg(egg);
}

function hatchEgg(egg) {
    egg.remove();
    createHen({ x: egg.style.left, y: egg.style.top });
    counter++;
    document.getElementById('counter').textContent = counter.toString().padStart(3, '0');
}

createHen();

setTimeout(() => {
    document.getElementById('counter').style.color = "green";
    for (const handle of handles) {
        clearInterval(handle);
    }
    const eggs = document.querySelectorAll(".egg");
    for (const egg of eggs) {
      egg.remove();
    }
    timeUp = true;
}, TIME_MS);

预览

控制台