射击大战游戏-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：射击大战游戏，移动左右键更变位置，按空格键发送弹药
代码标签：
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");
body {
  overflow: hidden;
}

#app {
  font-family: Inconsolata, sans-serif;
  font-size: 18px;
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.score-board {
  --edge-distance-x: 3.5vmin;
  --edge-distance-y: 2.5vmin;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
}
.score-board.player {
  bottom: var(--edge-distance-y);
  left: var(--edge-distance-x);
}
.score-board.computer {
  top: var(--edge-distance-y);
  right: var(--edge-distance-x);
}

.screen {
  background-color: #59ad00;
  background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%232F2F2F" fill-opacity="0.2" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
  background-size: 10%;
  position: relative;
  overflow: hidden;
}

.character {
  --skin-color: #007041;
  --cloth-color: #161616;
  --gun-color: #afafaf;
  display: flex;
  position: absolute;
}
.character.player .helmet, .character.computer .helmet {
  background-color: #ffef12;
  width: 100%;
  border-radius: 40% 40% 0 0 / 70% 70% 0 0;
}
.character.player .helmet:before, .character.computer .helmet:before {
  content: '';
  background-color: #ffcb1f;
  width: 30%;
  height: 80%;
  bottom: 0;
  left: 35%;
}
.character.player .helmet:after, .character.computer .helmet:after {
  content: '';
  background-color: #ffab0f;
  width: 110%;
  height: 30%;
  bottom: 0%;
  left: -5%;
}
.character.player .head, .character.computer .head {
  background-color: var(--skin-color);
  width: 90%;
  height: 66.66667%;
  overflow: hidden;
  top: 10%;
  left: 5%;
  border-radius: 50%;
}
.character.player .body, .character.computer .body {
  background-color: var(--cloth-color);
  width: 100%;
  height: 30%;
  bottom: 0;
  border-radius: 30% 30% 0 0 / 50% 50% 0 0;
}
.character.player .body .arm, .character.computer .body .arm {
  background-color: var(--cloth-color);
  width: 25%;
  height: 70%;
  top: 20%;
  border-radius: 50% / 30%;
}
.character.player .body .hand, .character.computer .body .hand {
  background-color: var(--skin-color);
  width: 25%;
  height: 60%;
  top: 10%;
  border-radius: 40%;
}
.character.player .body .handle, .character.computer .body .handle {
  background-color: var(--gun-color);
  width: 10%;
  height: 50%;
  top: 40%;
}
.character.player .body .gun, .character.computer .body .gun {
  background-color: var(--gun-color);
  width: 35%;
  height: 70%;
  top: -20%;
  border-radius: 50%;
}
.character.player .body .gun:before, .character.computer .body .gun:before {
  content: '';
  background-color: var(--gun-color);
  width: 70%;
  height: 100%;
  top: 0%;
}
.character.player {
  bottom: 0;
}
.character.player .helmet {
  height: 60%;
}
.character.player .body .arm {
  right: -5%;
  transform-origin: top right;
  transform: rotate(-35deg);
}
.character.player .body .hand {
  right: -20%;
}
.character.player .body .handle {
  right: -10%;
}
.character.player .body .gun {
  right: -40%;
}
.character.player .body .gun:before {
  right: 50%;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
.character.computer {
  top: 0;
}
.character.computer .helmet {
  height: 42%;
}
.character.computer .head .eye {
  background-color: #ffffff;
  width: 50%;
  height: 50%;
  top: 25%;
  border-radius: 50%;
}
.character.computer .head .eye.left {
  left: 0;
}
.character.computer .head .eye.right {
  right: 0;
}
.character.computer .head .eye:after {
  content: '';
  background-color: #000000;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.character.computer .head .mouth {
  background-color: #000000;
  width: 50%;
  height: 20%;
  bottom: 5%;
  left: 25%;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.character.computer .head .mouth:after {
  content: '';
  background-color: var(--skin-color);
  width: 100%;
  height: 50%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  bottom: 0;
}
.character.computer .body:before {
  content: '';
  background-color: #ffffff;
  width: 30%;
  height: 100%;
  top: 0;
  left: 35%;
}
.character.computer .body:after {
  content: '';
  background-color: #a61e0f;
  width: 20%;
  height: 100%;
  left: 40%;
  top: 0;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
}
.character.computer .body .arm {
  left: -5%;
  transform-origin: top left;
  transform: rotate(35deg);
}
.character.computer .body .hand {
  left: -20%;
}
.character.computer .body .handle {
  left: -10%;
}
.character.computer .body .gun {
  left: -40%;
}
.character.computer .body .gun:before {
  left: 50%;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}
.character.computer .body .gun:after {
  content: '';
  background-color: #0f0f0f;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
}
.character div, .character div:before, .character div:after {
  position: absolute;
}

.fire {
  background-image: radial-gradient(#e06c00 0 30%, #ffe019 60% 100%);
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.5vmin 0.5vmin #ffe019;
  animation: fire 75ms linear infinite;
}

@keyframes fire {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.menu {
  --text-color: #ffffff;
  color: var(--text-color);
  text-align: center;
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.label {
  width: 100%;
  padding: 0.2em 0.4em;
  box-sizing: border-box;
}

.link {
  width: auto;
  padding: 0.1em 0.4em;
  position: relative;
}
.link.selected:before {
  content: '';
  width: 0;
  height: 0;
  border-left: solid 0.6em var(--text-color);
  border-top: solid 0.4em transparent;
  border-bottom: solid 0.4em transparent;
  position: absolute;
  left: -0.6em;
  top: calc(50% - 0.4em);
}

.control {
  border: solid 1px white;
  border-radius: 50%;
  position: absolute;
  bottom: 0.5em;
  opacity: 0.4;
  transition: transform 150ms ease-out;
}
.control.control-left {
  left: 0.5em;
}
.control.control-right {
  right: 0.5em;
}
.control.control-select {
  bottom: 1em;
  transform: translateY(-100%);
}
.control svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
  vertical-align: top;
}
.control:active {
  transform: scale(1.25);
}
.control:active.control-select {
  transform: translateY(-100%) scale(1.25);
}

.wall {
  background-color: #a1180b;
  background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.6"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  width: 100%;
  position: absolute;
}
.wall:before {
  content: '';
  background-color: #ffe852;
  width: 100%;
  position: absolute;
  left: 0%;
}
.wall.player {
  background-size: 10%;
  height: 8.5vmin;
}
.wall.player:before {
  height: 25%;
  bottom: 100%;
}
.wall.computer {
  background-size: 5%;
  height: 10vmin;
}
.wall.computer:before {
  height: 10%;
  top: 0%;
}
.wall.computer:after {
  content: '';
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 80%;
  position: absolute;
  top: 100%;
  left: 0%;
}
</style>

</head>
<body translate="no">
<div id="app">
<div class="menu" v-if="displayStep === displaySteps.top">
<div class="label">EXAMPLE GUN WAR</div>
<div class="label">Test your reflexes with this game. Just fight with the AI. Dodge its fire, or shoot it with all your might.</div>
<div class="label">Press 'Space' key or check button to proceed.</div>
</div>
<div class="menu" v-if="displayStep === displaySteps.instructions">
<div class="label">INSTRUCTIONS</div>
<div class="link">LEFT ARROW KEY : MOVE to the LEFT direction.</div>
<div class="link">RIGHT ARROW KEY : MOVE to the RIGHT direction.</div>
<div class="link">SPACE BAR KEY : SHOOT the FIRE to the OPPONENT.</div>
<div class="link">You may also press these keys at the screen instead, to make an action.</div>
<div class="label">Press 'Space' key or check button to proceed.</div>
</div>
<div class="menu" v-if="displayStep === displaySteps.difficulty">
<div class="label">Select your opponent's difficulty</div>
<div class="label"></div>
<div class="link" v-for="difficulty, i in selectDifficulty" v-bind:class="{ selected : i === currentOption }">{{ difficulty }}</div>
<div class="label">Press 'Space' key or check button to select.</div>
</div>
<div class="menu" v-if="displayStep === displaySteps.score">
<div class="label">Select the winning score</div>
<div class="link" v-for="score, i in winningScore" v-bind:class="{ selected : i === currentOption }">{{ score }} points</div>
<div class="label">Press 'Space' key or check button to select.</div>
</div>
<div class="menu" v-if="displayStep === displaySteps.start">
<div class="label">All set. You and your opponent will spawn into random place.</div>
<div class="label">Press 'Space' key or check button to start the game.</div>
</div>
<div class="screen" v-bind:style="screen" v-if="displayStep === displaySteps.play">
<div class="wall player" v-bind:style="wall.player"></div>
<div class="wall computer" v-bind:style="wall.computer"></div>
<div class="character player" v-bind:style="player">
<div class="head"></div>
<div class="body">
<div class="gun"></div>
<div class="handle"></div>
<div class="hand"></div>
<div class="arm"></div>
</div>
<div class="helmet"></div>
</div>
<div class="character computer" v-bind:style="computer">
<div class="body">
<div class="arm"></div>
<div class="handle"></div>
<div class="hand"></div>
<div class="gun"></div>
</div>
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="mouth"></div>
</div>
<div class="helmet"></div>
</div>
<div class="fire" v-bind:style="fire.style" v-for="fire in fires.Player" v-if="play === true"></div>
<div class="fire" v-bind:style="fire.style" v-for="fire in fires.Computer" v-if="play === true"></div>
<div class="score-board player">PLAYER {{ points.Player }}</div>
<div class="score-board computer">COMPUTER {{ points.Computer }}</div>
</div>
<div class="menu" v-if="displayStep === displaySteps.end">
<div class="label">GAME OVER</div>
<div class="label">{{ winMessage }} won the game!</div>
<div class="label"&g.........完整代码请登录后点击上方下载按钮下载查看