拳击小游戏
代码语言：html
所属分类：游戏
代码描述：拳击小游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--mac-y: 45px;
--mac-width: 300px;
--mac-height: 600px;
--hand-y: 200px;
--hand-size: 80px;
--white: #fff;
--green: #39dc43;
--blue: #3dbcfc;
--skin: #ffc5ba;
--black: #000100;
--spit: #cbe8f4;
--pink: #ff6dce;
--light-blue: #49cedf;
--ring: #0557f5;
--ring-aqua: #01818a;
--ring-green: #02A800;
--ring-blue: #0557f5;
}
@media (max-height: 400px) {
:root {
--mac-y: 30px;
--mac-width: 200px;
--mac-height: 400px;
--hand-y: 45%;
--hand-size: 60px;
}
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
max-height: -webkit-fill-available;
max-height: -moz-available;
max-height: fill-available;
margin: 0;
}
body {
--hair: var(--black);
--gloves: var(--black);
--tank: var(--black);
--boot: var(--black);
--highlight: var(--green);
--ring: var(--ring-blue);
}
body.theme-minor {
--hair: var(--black);
--gloves: var(--black);
--tank: var(--black);
--boot: var(--black);
--highlight: var(--green);
--ring: var(--ring-blue);
}
body.theme-major {
--hair: var(--black);
--gloves: var(--black);
--tank: var(--black);
--boot: var(--black);
--highlight: var(--blue);
--ring: var(--ring-green);
}
body.theme-world {
--hair: var(--black);
--gloves: var(--black);
--tank: var(--black);
--boot: var(--black);
--highlight: var(--green);
--ring: var(--ring-aqua);
}
.ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--ring);
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.config {
position: absolute;
width: 100%;
top: 0;
left: 0;
color: var(--white);
font-size: 16px;
padding: 0 10px;
}
.config__title {
display: block;
padding: 10px 10px 10px 0;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.05em;
}
.config__title::after {
content: ':';
}
.config__option {
display: -webkit-box;
display: flex;
width: 100%;
margin: 10px 0;
-webkit-box-align: center;
align-items: center;
}
.config__label {
display: block;
padding: 10px;
border-radius: 4px;
min-width: 62px;
text-align: center;
}
.config input {
display: inline;
vertical-align: text-top;
width: 0;
height: 0;
position: absolute;
left: -9999px;
}
.config input:checked + .config__label {
background: var(--white);
color: var(--black);
}
.boot {
fill: var(--boot);
}
.tank {
fill: var(--tank);
}
.hair {
fill: var(--hair);
}
.highlight,
.trunk,
.glove {
fill: var(--highlight);
}
.skin {
fill: var(--skin);
}
.spit {
fill: var(--spit);
}
.boot,
.tank,
.hair,
.highlight,
.trunk,
.glove,
.skin,
.spit {
-webkit-transition: fill 0.4s;
transition: fill 0.4s;
}
.touch-controller .hand {
position: absolute;
bottom: var(--hand-y);
width: var(--hand-size);
height: var(--hand-size);
touch-action: none;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
will-change: transform;
z-index: 5;
}
.touch-controller .hand__circle {
display: block;
background-color: #fff;
border-radius: 50%;
width: 100%;
height: 100%;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
pointer-events: none;
}
.touch-controller .hand.left {
left: 40px;
}
.touch-controller .hand.right {
right: 40px;
}
.touch-controller .hand.is-active {
-webkit-transition: none;
transition: none;
}
.touch-controller .hand.is-active .touch-controller .hand__circle {
background-color: var(--highlight);
}
.keyboard-controller .keyboard {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
max-width: 320px;
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: "z x space space space lft up rgt enter" "z x space space space lft down rgt enter";
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
row-gap: 5px;
padding: 10px;
}
.keyboard-controller .keyboard.keyz .key--z, .keyboard-controller .keyboard.keyx .key--x, .keyboard-controller .keyboard.space .key--space, .keyboard-controller .keyboard.arrowleft .key--lft, .keyboard-controller .keyboard.arrowup .key--up, .keyboard-controller .keyboard.arrowdown .key--down, .keyboard-controller .keyboard.arrowright .key--rgt, .keyboard-controller .keyboard.enter .key--enter {
background-color: var(--highlight);
}
.keyboard-controller .key {
background-color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 4px;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.keyboard-controller .key--z {
grid-area: z;
}
.keyboard-controller .key--x {
grid-area: x;
}
.keyboard-controller .key--space {
grid-area: space;
}
.keyboard-controller .key--lft {
grid-area: lft;
}
.keyboard-controller .key--up {
grid-area: up;
}
.keyboard-controller .key--down {
grid-area: down;
}
.keyboard-controller .key--rgt {
grid-area: rgt;
}
.keyboard-controller .key--enter {
grid-area: enter;
}
.mac {
width: var(--mac-width);
height: var(--mac-height);
position: absolute;
bottom: var(--mac-y);
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
overflow: hidden;
}
.mac.is-tired {
--hair: var(--pink);
--gloves: var(--pink);
--tank: var(--pink);
--boot: var(--pink);
--highlight: var(--light-blue);
}
.mac.is-disable {
--hair: var(--black);
--gloves: var(--black);
--tank: var(--black);
--boot: var(--black);
--highlight: var(--white);
}
.mac__sprite {
width: 100%;
-webkit-animation: idle 0.6s steps(3) infinite alternate;
animation: idle 0.6s steps(3) infinite alternate;
}
.is-tired .mac__sprite {
-webkit-animation: tired 0.4s steps(2) infinite alternate;
animation: tired 0.4s steps(2) infinite alternate;
}
.mac.right {
-webkit-transform: translate3d(-50%, 0, 0) scaleX(-1);
transform: translate3d(-50%, 0, 0) scaleX(-1);
}
.mac.jab .mac__sprite {
-webkit-animation: jab 0.3s steps(3);
animation: jab 0.3s steps(3);
}
.mac.punch .mac__sprite {
-webkit-animation: punch 0.3s steps(3);
animation: punch 0.3s steps(3);
}
.mac.uppercut .mac__sprite {
-webkit-animation: uppercut 0.5s steps(6);
animation: uppercut 0.5s steps(6);
}
.mac.dodge .mac__sprite {
-webkit-animation: dodge 0.2s steps(2);
animation: dodge 0.2s steps(2);
}
.mac.block .mac__sprite {
-webkit-animation: block 0.2s steps(1) forwards;
animation: block 0.2s steps(1) forwards;
}
@-webkit-keyframes idle {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-3), 0);
transform: translate3d(0, calc(var(--mac-height)*-3), 0);
}
}
@keyframes idle {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-3), 0);
transform: translate3d(0, calc(var(--mac-height)*-3), 0);
}
}
@-webkit-keyframes jab {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-3), 0);
transform: translate3d(0, calc(var(--mac-height)*-3), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-6), 0);
transform: translate3d(0, calc(var(--mac-height)*-6), 0);
}
}
@keyframes jab {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-3), 0);
transform: translate3d(0, calc(var(--mac-height)*-3), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-6), 0);
transform: translate3d(0, calc(var(--mac-height)*-6), 0);
}
}
@-webkit-keyframes punch {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-6), 0);
transform: translate3d(0, calc(var(--mac-height)*-6), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-9), 0);
transform: translate3d(0, calc(var(--mac-height)*-9), 0);
}
}
@keyframes punch {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-6), 0);
transform: translate3d(0, calc(var(--mac-height)*-6), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-9), 0);
transform: translate3d(0, calc(var(--mac-height)*-9), 0);
}
}
@-webkit-keyframes uppercut {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-9), 0);
transform: translate3d(0, calc(var(--mac-height)*-9), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-15), 0);
transform: translate3d(0, calc(var(--mac-height)*-15), 0);
}
}
@keyframes uppercut {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-9), 0);
transform: translate3d(0, calc(var(--mac-height)*-9), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-15), 0);
transform: translate3d(0, calc(var(--mac-height)*-15), 0);
}
}
@-webkit-keyframes dodge {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-15), 0);
transform: translate3d(0, calc(var(--mac-height)*-15), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-17), 0);
transform: translate3d(0, calc(var(--mac-height)*-17), 0);
}
}
@keyframes dodge {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-15), 0);
transform: translate3d(0, calc(var(--mac-height)*-15), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-17), 0);
transform: translate3d(0, calc(var(--mac-height)*-17), 0);
}
}
@-webkit-keyframes block {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-17), 0);
transform: translate3d(0, calc(var(--mac-height)*-17), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-18), 0);
transform: translate3d(0, calc(var(--mac-height)*-18), 0);
}
}
@keyframes block {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-17), 0);
transform: translate3d(0, calc(var(--mac-height)*-17), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-18), 0);
transform: translate3d(0, calc(var(--mac-height)*-18), 0);
}
}
@-webkit-keyframes tired {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-21), 0);
transform: translate3d(0, calc(var(--mac-height)*-21), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-23), 0);
transform: translate3d(0, calc(var(--mac-height)*-23), 0);
}
}
@keyframes tired {
0% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-21), 0);
transform: translate3d(0, calc(var(--mac-height)*-21), 0);
}
100% {
-webkit-transform: translate3d(0, calc(var(--mac-height)*-23), 0);
transform: translate3d(0, calc(var(--mac-height)*-23), 0);
}
}
</style>
</head>
<body translate="no">
<div class="ring"></div>
<div class="mac">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 4600" xml:space="preserve" class="mac__sprite">
<g id="frame-1">
<path class="boot" d="M41.8 163.3s-1.9 1.2-2.2 4.1c-.5 4.2.1 10.5.1 10.5s-.3 2.6 5.2 1.1c4.7-1.3 8.3-7.1 8.9-8.2s1.1-5.8-3.6-2.9c.1-1.8.2-4.6.2-4.6h-8.6z" />
<path class="highlight" d="M53.7 170.9c.4-.7.7-2.8-.3-3.6-.4 3.9-3.7 7.8-8.6 8.9-1.3.3-.9-5.8-.9-6.8s-1.9-1.8-2.2.1c-.4 1.9-.1 7.3-.1 7.3s-1 .1-2-.2c.1.8.1 1.3.1 1.3s-.3 2.6 5.2 1.1c4.6-1.3 8.2-7.1 8.8-8.1z" />
<path class="boot" d="M58.6 183c-1.3-1.6.7-6.5 1.9-10.5 1.1-3.9-.5-5.1-.5-5.1-.3.9-.6 1.7-1.1 2.4-3.4 5.3-7.7-.8-7.7-.8s-.4 4.6-.9 6.7c-.3 1.1-.2 3.6-.5 8.1-.3 4.8 2.6 5.6 5.4 5.9 5.2.5 8.2-3.3 3.4-6.7z" />
<path class="highlight" d="M60.3 188.2c-1.9.2-4.8-.2-4.3-4.2.6-6.1-1.5-8.4-2.2-8.4-.6.1-2.4-.6-3.7 2-.1 1.4-.1 3.4-.3 6.2-.3 4.8 2.6 5.6 5.4 5.9 2.3.2 4.1-.4 5.1-1.5z" />
<path class="skin" d="M59.5 155.6H50c-.7-1.6-1.8-3.3-3.4-4.4-4.1-2.8-8.1.6-8.1.6s1.6 4.1 5.4 7c-2.3 3.7-2.7 7-2.7 7s2.8 1 7 0c1-.2 1.9-1.6 2.9-4.3.4 1.3 1 2.5 1.5 2.9-1 1.4-1.5 4.6-1.5 4.6s4.3 6.1 7.7.8c4.4-5.3.7-14.2.7-14.2z" />
<path class="trunk" d="M37.9 127.7c-3.3 2.6-9.9 14.3.9 24.4 0 0 6 1.9 6.5 0 1.9 1.4 4.5 5.6 4.5 5.6s11.3 3.5 13-1.9c1.7-5.4.6-10.8-3.2-25.3-19.3 1.7-21.7-2.8-21.7-2.8z" />
<ellipse class="glove" cx="63.4" cy="99.2" rx="6.9" ry="7.6" />
<path class="glove" d="M27.9 106.5l10 3.9s9.2-5.9 4.7-11.2c2.8-4.5-5-7.9-10-7.3-7 .9-4.7 14.6-4.7 14.6z" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0