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)
