拳击小游戏-html代码-BFW代码库

代码语言：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);
  }
  .........完整代码请登录后点击上方下载按钮下载查看