射击大战游戏-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">Press 'Space' key or check button to play again.</div>
</div>
<div class="control control-left control-select" v-bind:style="control" v-on:mouseup="mouseActionUp(keys.space)" v-if="ending === false">
<svg viewBox="0 0 24 24">
<path d="M17.55,11.2C17.32,10.9 17.05,10.64 16.79,10.38C16.14,9.78 15.39,9.35 14.76,8.72C13.3,7.26 13,4.85 13.91,3C13,3.23 12.16,3.75 11.46,4.32C8.92,6.4 7.92,10.07 9.12,13.22C9.16,13.32 9.2,13.42 9.2,13.55C9.2,13.77 9.05,13.97 8.85,14.05C8.63,14.15 8.39,14.09 8.21,13.93C8.15,13.88 8.11,13.83 8.06,13.76C6.96,12.33 6.78,10.28 7.53,8.64C5.89,10 5,12.3 5.14,14.47C5.18,14.97 5.24,15.47 5.41,15.97C5.55,16.57 5.81,17.17 6.13,17.7C7.17,19.43 9,20.67 10.97,20.92C13.07,21.19 15.32,20.8 16.93,19.32C18.73,17.66 19.38,15 18.43,12.72L18.3,12.46C18.1,12 17.83,11.59 17.5,11.21L17.55,11.2M14.45,17.5C14.17,17.74 13.72,18 13.37,18.1C12.27,18.5 11.17,17.94 10.5,17.28C11.69,17 12.39,16.12 12.59,15.23C12.76,14.43 12.45,13.77 12.32,13C12.2,12.26 12.22,11.63 12.5,10.94C12.67,11.32 12.87,11.7 13.1,12C13.86,13 15.05,13.44 15.3,14.8C15.34,14.94 15.36,15.08 15.36,15.23C15.39,16.05 15.04,16.95 14.44,17.5H14.45Z" v-if="play === true"></path>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" v-if="play === false"></path>
</svg>
</div>
<div class="control control-left" v-bind:style="control" v-on:mousedown="mouseActionDown((play === true) ? keys.left : keys.up)" v-on:mouseup="mouseActionUp((play === true) ? keys.left : keys.up)" v-on:mouseleave="mouseActionUp((play === true) ? keys.left : keys.up)" v-on:touchstart="mouseActionDown((play === true) ? keys.left : null)" v-on:touchend="mouseActionUp((play === true) ? keys.left : keys.up)" v-if="ending === false">
<svg viewBox="0 0 24 24">
<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" v-if="play === true"></path>
<path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" v-if="play === false"></path>
</svg>
</div>
<div class="control control-right control-select" v-bind:style="control" v-on:mouseup="mouseActionUp(keys.space)" v-if="ending === false">
<svg viewBox="0 0 24 24">
<path d="M17.55,11.2C17.32,10.9 17.05,10.64 16.79,10.38C16.14,9.78 15.39,9.35 14.76,8.72C13.3,7.26 13,4.85 13.91,3C13,3.23 12.16,3.75 11.46,4.32C8.92,6.4 7.92,10.07 9.12,13.22C9.16,13.32 9.2,13.42 9.2,13.55C9.2,13.77 9.05,13.97 8.85,14.05C8.63,14.15 8.39,14.09 8.21,13.93C8.15,13.88 8.11,13.83 8.06,13.76C6.96,12.33 6.78,10.28 7.53,8.64C5.89,10 5,12.3 5.14,14.47C5.18,14.97 5.24,15.47 5.41,15.97C5.55,16.57 5.81,17.17 6.13,17.7C7.17,19.43 9,20.67 10.97,20.92C13.07,21.19 15.32,20.8 16.93,19.32C18.73,17.66 19.38,15 18.43,12.72L18.3,12.46C18.1,12 17.83,11.59 17.5,11.21L17.55,11.2M14.45,17.5C14.17,17.74 13.72,18 13.37,18.1C12.27,18.5 11.17,17.94 10.5,17.28C11.69,17 12.39,16.12 12.59,15.23C12.76,14.43 12.45,13.77 12.32,13C12.2,12.26 12.22,11.63 12.5,10.94C12.67,11.32 12.87,11.7 13.1,12C13.86,13 15.05,13.44 15.3,14.8C15.34,14.94 15.36,15.08 15.36,15.23C15.39,16.05 15.04,16.95 14.44,17.5H14.45Z" v-if="play === true"></path>
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" v-if="play === false"></path>
</svg>
</div>
<div class="control control-right" v-bind:style="control" v-on:mousedown="mouseActionDown((play === true) ? keys.right : keys.down)" v-on:mouseup="mouseActionUp((play === true) ? keys.right : keys.down)" v-on:mouseleave="mouseActionUp((play === true) ? keys.right : keys.down)" v-on:touchstart="mouseActionDown((play === true) ? keys.right : null)" v-on:touchend="mouseActionUp((play === true) ? keys.right : keys.down)" v-if="ending === false">
<svg viewBox="0 0 24 24">
<path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" v-if="play === true"></path>
<path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" v-if="play === false"></path>
</svg>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script >
"use strict";
//------------------------------------------------------------ENUMERATIONS
var Keys;
(function (Keys) {
  Keys[Keys["Space"] = 32] = "Space";
  Keys[Keys["Left"] = 37] = "Left";
  Keys[Keys["Up"] = 38] = "Up";
  Keys[Keys["Right"] = 39] = "Right";
  Keys[Keys["Down"] = 40] = "Down";
})(Keys || (Keys = {}));
var Screen;
(function (Screen) {
  Screen[Screen["Width"] = 100] = "Width";
  Screen[Screen["Height"] = 100] = "Height";
})(Screen || (Screen = {}));
var Character;
(function (Character) {
  Character[Character["Width"] = 10] = "Width";
  Character[Character["Height"] = 15] = "Height";
})(Character || (Character = {}));
var Fire;
(function (Fire) {
  Fire[Fire["Width"] = 5] = "Width";
  Fire[Fire["Height"] = 5] = "Height";
})(Fire || (Fire = {}));
var Which;
(function (Which) {
  Which[Which["Player"] = 0] = "Player";
  Which[Which["Computer"] = 1] = "Computer";
})(Which || (Which = {}));
var Difficulty;
(function (Difficulty) {
  Difficulty[Difficulty["Easy"] = 0] = "Easy";
  Difficulty[Difficulty["Medium"] = 1] = "Medium";
  Difficulty[Difficulty["Hard"] = 2] = "Hard";
})(Difficulty || (Difficulty = {}));
var MoveReactionTime;
(function (MoveReactionTime) {
  MoveReactionTime[MoveReactionTime["Easy"] = 750] = "Easy";
  MoveReactionTime[MoveReactionTime["Medium"] = 350] = "Medium";
  MoveReactionTime[MoveReactionTime["Hard"] = 100] =.........完整代码请登录后点击上方下载按钮下载查看