Html网页小游戏源代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Jello Jumping Game</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='static/css/css.css'><link rel="stylesheet" href="static/css/style.css"></head>
<body>
<!-- partial:index.partial.html -->
<main><div class="streak"></div><div class="help" tabindex="0">?</div><div class="help-window"><h1>How to Play</h1><p><strong>Click/tap</strong> or press <strong>[spacebar]</strong> to change the color of the jello until it matches the color of the box it’s about to land on.</p><section><figure><span class="red"></span> → <span class="yellow"></span><br>↑<span></span><span></span>↓ <span class="ascii-arrow">——></span><br><span class="blue"></span> ← <span class="green"></span></figure><figure><div class="box blue"></div><div class="jello red"></div></figure></section><p>+1 point each matching land and back to zero if missed. The higher the streak, the faster the jello will jump. See how many you can get in a row!</p></div><div class="jello-hitbox"><div class="jello"></div></div><div class="boxes"><div class="box"></div><div class="box"></div></div><div class="click-area"></div>
</main>
<!-- partial --><script src="static/js/script.js"></script><div style="display:none;"><a href="">仿站软件</a></div>
</body>
</html>
/* devanagari */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 400;src: url(../font/5aU69_a8oxmIdGh4BCOz.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 400;src: url(../font/5aU69_a8oxmIdGd4BCOz.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 400;src: url(../font/5aU69_a8oxmIdGl4BA.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 700;src: url(../font/5aU19_a8oxmIfNJdER2SjQpf.woff2) format('woff2');unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 700;src: url(../font/5aU19_a8oxmIfNJdERKSjQpf.woff2) format('woff2');unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {font-family: 'Hind';font-style: normal;font-weight: 700;src: url(../font/5aU19_a8oxmIfNJdERySjQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;-webkit-tap-highlight-color: transparent;
}
:root {--dur: 2s;font-size: calc(10px + 1vmin);
}
body {background: #333;font: 1em Hind, Helvetica, sans-serif;line-height: 1.5;height: 100vh;
}
main {background: #9ab;margin: auto;overflow: hidden;position: relative;width: 100%;max-width: 600px;height: 100%;
}
h1 {font-size: 2em;line-height: 1.5;margin-bottom: 0.75em;text-align: center;
}
p {margin-bottom: 1.5em;
}
section {margin: 0 auto 1.5em auto;width: 8em;
}
figure, figure > span {vertical-align: middle;
}
figure {display: inline-table;margin-right: -3px;min-width: 2em;height: 4.5em;position: relative;
}
figure > span {border-radius: 50%;display: inline-block;min-width: 1em;height: 1em;
}
button, div {position: absolute;
}
.help, .help-window, .streak {z-index: 1;
}
/* help */
.help {background-color: transparent;border: 0;cursor: pointer;opacity: 0.5;font-size: 2.5em;line-height: 1.25;top: 0.25em;left: 0.25em;width: 1.25em;height: 1.25em;transition: opacity 0.15s linear;text-align: center;
}
.help:hover, .help:focus {opacity: 1;outline: 0;
}
.help-window {background-color: rgba(255,255,255,0.9);border-radius: 1em;margin: auto;padding: 0.75em;top: 0;right: 0;bottom: 0;left: 0;width: 90%;max-width: 20em;height: 90%;max-height: 24em;transition: transform 0.3s ease-out;transform: scale(0);
}
.help:focus ~ .help-window {transform: scale(1);
}
.help:focus ~ .click-area {opacity: 0.5;
}
/* jello */
.jello-hitbox, .box {left: 50%;
}
.jello-hitbox {margin: -4em 0 0 -4em;bottom: 6em;width: 8em;height: 8em;
}
.jello {background:radial-gradient(1em 1em at 37% 40%,black 45%,transparent 50%),radial-gradient(1em 1em at 63% 40%,black 45%,transparent 50%),radial-gradient(100% 200% at 50% 0,transparent 0.65em, black 0.75em, black 47%,transparent 50%) 50% 64% / 2.5em 1em;background-repeat: no-repeat;background-color: #aaa;border-radius: 0.75em;box-shadow: 0 0 0 0.75em rgba(255,255,255,0.4) inset;transition: background-color 0.15s linear;transform-origin: 50% 100%;width: 100%;height: 100%;
}
figure > .box, figure > .jello {transform: scale(0.25,0.25);
}
figure > .jello {transform-origin: 0 0;width: 8em;height: 8em;
}
figure > .box {transform-origin: 50% 100%;
}
/* boxes */
.boxes, .box {bottom: 0;
}
.boxes {width: 100%;
}
.box {background-color: #777;border-radius: 0.5em;margin-left: -3em;width: 6em;height: 6em;
}
.box:last-of-type {left: 150%;
}/* colors */
.red {background-color: #f44;
}
.yellow {background-color: #fc4;
}
.green {background-color: #8c8;
}
.blue {background-color: #48f;
}
/* other */
.ascii-arrow {transform: rotate(-35deg);transform-origin: 0 50%;
}
.click-area {background-color: #000;opacity: 0;width: 100%;height: 100%;
}
.streak {font-size: 4em;text-align: center;width: 100%;
}
/* animations */
.run > .jello-hitbox {animation: jump calc(var(--dur)/2) cubic-bezier(.2,.45,.65,.99) 2 alternate;
}
.run > .jello-hitbox > .jello {animation: squish var(--dur) ease-out;
}
.run > .boxes {animation: scroll var(--dur) linear;
}@keyframes jump {from, 4% {transform: translateY(0);}to {transform: translateY(-12em);}
}
@keyframes squish {from, 40%, to {transform: scale(1,1);}8% {transform: scale(1.5,0.5);}16% {transform: scale(0.75,1.25);}24% {transform: scale(1.25,0.75);}32% {transform: scale(0.875,1.125);}
}
@keyframes scroll {from, 8% {transform: translateX(0);}to {transform: translateX(-100%)}
}window.addEventListener("load",game);function game() {var root = document.querySelector(":root"),main = document.querySelector("main"),streakCounter = document.querySelector(".streak"),jelloHitbox = document.querySelector(".jello-hitbox"),jello = document.querySelector(".jello-hitbox > .jello"),boxes = document.querySelectorAll(".boxes > .box"),colors = ["red","yellow","green","blue"],streak = 0,compDur = window.getComputedStyle(root),compDurVal = compDur.getPropertyValue("--dur"),dur = (compDurVal.substr(0,compDurVal.length - 1) * 1000),minDur = dur/2,chooseColor = function() {return Math.floor(Math.random() / 0.25);},curColor = chooseColor(),prevMatchColor = curColor,nextMatchColor = chooseColor(),rerun = function() {main.classList.remove("run");void main.offsetWidth;main.classList.add("run");root.style.setProperty("--dur",(dur/1000) + "s");},cycleColor = function() {++curColor;if (curColor == colors.length) {curColor = 0;}jello.className = "jello " + colors[curColor];},checkColorMatch = function() {if (curColor == nextMatchColor) {++streak;dur -= 10;if (dur < minDur) {dur = minDur;}streakCounter.innerHTML = streak;} else {streak = 0;dur = 2000;streakCounter.innerHTML = "";}prevMatchColor = nextMatchColor;nextMatchColor = chooseColor();boxes[0].className = "box " + colors[prevMatchColor];boxes[1].className = "box " + colors[nextMatchColor];rerun();setTimeout(checkColorMatch,dur);};main.classList.add("run");jello.classList.add(colors[curColor]);boxes[0].classList.add(colors[prevMatchColor]);boxes[1].classList.add(colors[nextMatchColor]);for (b in boxes) {if (b < boxes.length) {boxes[b].classList.add(colors[chooseColor()]);} }setTimeout(checkColorMatch,dur);document.querySelector(".click-area").addEventListener("click",cycleColor);document.addEventListener("keydown",function(e) {if (e.keyCode == 32) {cycleColor();}});
}因为格式原因，有些代码我无法展示，所以这是下载地址：Html网页小游戏源代码 (chinaz.com)
![[蓝桥杯] 岛屿个数（C语言）](https://img-blog.csdnimg.cn/direct/941e8f330b1a416d8204db1ff55a949e.png)
