js+svg实现鲨鱼逃生小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+svg实现鲨鱼逃生小游戏代码，这个网页游戏的背景设定是海洋环境，玩家扮演一条鱼，与一只鲨鱼处于对抗关系。鱼和鲨鱼都可以吞食海洋中的气泡，气泡分为有益的绿色气泡和危险的红色气泡。鱼的目标是诱使鲨鱼吞食红色气泡，同时自己吞食绿色气泡，以实现逃脱鲨鱼的目的。游戏中，玩家可以通过键盘上的箭头键来控制鱼的移动。

代码标签： js svg 鲨鱼逃生小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
#backdrop {
  background-color: #50507f;
  height: 700px;
  width: 900px;
  margin: auto;
  margin-top: 10px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

#fish {
  position: absolute;
  transform: translateX(-35px) translateY(-35px) rotate(45deg);
}

#shark {
  position: absolute;
  top: 300px;
  left: 300px;
  transform: translateX(-100px) translateY(-103px);
}

#bubble0,
#bubble1 {
  position: absolute;
}

#score {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 20px;
}

#popup {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 20px;
  position: absolute;
  margin: auto;
  margin-top: 50px;
  max-height: 600px;
  background-color: rgb(176, 185, 71);
  z-index: 50;
  color: white;
  border-radius: 10px;
  display: inline-block;
  padding: 20px;
}
button {
  background-color: rgb(4, 213, 222);
  color: #50507f;
  font-size: 20px;
  padding: 10px;
  border: 2px solid white;
  border-radius: 10px;
  font-family: "Brush Script MT", cursive;
  font-weight: bold;
}
</style>


  
  
</head>

<body translate="no">

<div id='backdrop'>
  <svg fill="white" width="70" height="70" viewBox="0 0 256 256" id="fish" xmlns="http://www.w3.org/2000/svg">
    <path d="M164,76a8,8,0,1,1-8-8A8.00009,8.00009,0,0,1,164,76Zm31.34082,89.146c-26.375,26.314-68.91309,36.78662-126.82812,31.31591Q70.97216,216.572,75.90723,239.145a3.99968,3.99968,0,1,1-7.81446,1.71q-5.23681-23.93481-7.72558-45.25537-21.30175-2.4939-45.22266-7.72852a4,4,0,0,1,1.71094-7.81494q22.54541,4.93433,42.65039,7.397C54.05371,129.562,64.53223,87.03027,90.84375,60.66162a90.82146,90.82146,0,0,1,10.88721-9.302c.02978-.02075.05713-.044.08752-.064,39.37268-28.573,93.29627-20.0227,110.06824-16.39233a12.05213,12.05213,0,0,1,9.209,9.21C225.07715,62.50586,234.9873,125.58984,195.34082,165.146Zm-5.65039-5.66309q1.82337-1.81934,3.4939-3.71265A100.0142,100.0142,0,0,1,100.229,62.81079q-1.8955,1.67835-3.72216,3.50171c-24.834,24.88721-34.49512,65.8291-28.89454,122.043C123.85352,193.97461,164.79492,184.31982,189.69043,159.48291ZM213.27734,45.80615a4.03728,4.03728,0,0,0-3.084-3.084c-15.6709-3.39234-65.61011-11.3728-102.18713,13.991a91.98732,91.98732,0,0,0,91.27795,91.28C224.65332,111.42041,216.66992,61.478,213.27734,45.80615Z" />
  </svg>
  <svg width="200px" height="200px" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" id='shark'>
    <path d="M47.0879 179.03C66.4208 178.409 84.6789 187.59 101.68 195.952C151.857 220.625 232.212 288.373 292.749 254.886C302.751 249.353 371.287 209.39 363.364 197.699C359.105 191.421 337.266 189.971 312.755 189.017C182.249 183.936 118.112 186.513 37 206.452" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M241 182C220.769 154.443 192 131.055 192 177.192" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M211.541 248C164.94 275.692 229.485 270.67 250 256.671" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M327 226.907C315.091 220.177 293.133 217.778 305.827 237" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
    <path opacity="1" d="M333.741 205C334.605 202.582 333.035 203.095 333 203" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M45.9407 186C46.4627 195.741 43.5433 198.867 37 204" stroke="white" stroke-opacity="1" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <svg height="50px" width="50px" version="1.1" id="bubble0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
    <style type="text/css">
      .st0 {
        fill: rgb(0, 161, 77);
      }
    </style>
    <g>
      <path class="st0" d="M133.048,121.218c-1.663,0-3.296,0.337-4.841,0.996c-20.036,8.606-36.119,24.218-45.306,43.973
                c-1.381,2.966-1.522,6.3-0.4,9.375c1.122,3.083,3.382,5.546,6.371,6.936c1.64,0.761,3.373,1.146,5.17,1.146
                c4.762,0,9.14-2.794,11.14-7.116c6.646-14.27,18.256-25.544,32.715-31.726c3.013-1.294,5.342-3.68,6.567-6.732
                c1.216-3.044,1.177-6.386-0.118-9.398C142.408,124.144,137.967,121.218,133.048,121.218z" />
      <path class="st0" d="M325.854,203.342c-0.016-89.821-73.11-162.915-162.932-162.931C73.102,40.427,0.015,113.521,0,203.342
                c0.015,89.821,73.102,162.908,162.923,162.924C252.744,366.25,325.838,293.163,325.854,203.342z M162.923,334.344
                c-34.974-0.008-67.869-13.636-92.629-38.372c-24.736-24.768-38.364-57.664-38.372-92.63c0.008-34.982,13.635-67.877,38.372-92.63
                c24.775-24.743,57.671-38.371,92.629-38.379c34.967,0.008,67.862,13.636,92.63,38.379c24.744,24.768,38.372,57.664,38.38,92.63
                c-0.008,34.959-13.635,67.854-38.38,92.63C230.793,320.708,197.898,334.336,162.923,334.344z" />
      <path class="st0" d="M427.458,69.815c-46.6,0.008-84.532,37.932-84.549,84.541c0.016,46.601,37.948,84.525,84.549,84.541
                c46.601-0.016,84.526-37.94,84.542-84.541C511.984,107.747,474.06,69.823,427.458,69.815z M464.661,191.575
                c-9.963,9.924-23.175,15.392-37.203,15.4c-14.035-0.008-27.247-5.476-37.218-15.408c-9.924-9.963-15.392-23.175-15.4-37.21
                c0.008-14.035,5.476-27.246,15.408-37.219c9.963-9.924,23.175-15.392,37.21-15.4c14.028,0.008,27.24,5.477,37.211,15.408
                c9.924,9.964,15.4,23.184,15.408,37.211C480.07,168.383,474.593,181.603,464.661,191.575z" />
      <path class="st0" d="M349.076,251.325c-2.683,10.434-6.261,20.664-10.654,30.487c16.146,2.808,30.761,10.379,42.428,22.03
                c15.024,15.047,23.292,35.029,23.301,56.258c-0.008,21.23-8.277,41.212-23.301,56.258c-15.048,15.024-35.03,23.301-56.258,23.309
                c-21.23-0.008-41.212-8.284-56.266-23.309c-11.015-11.03-18.421-24.822-21.559-40.042c-9.666,4.691-19.746,8.574-30.056,11.572
                c12.655,49.386,56.699,83.686,107.882,83.701c61.46-0.015,111.473-50.029,111.489-111.489
                C436.065,308.038,399.608,262.661,349.076,251.325z" />
    </g>
  </svg>
  <svg height="50px" width="50px" version="1.1" id="bubble1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
    <style type="text/css">
      .st1 {
        fill: red;
      }
    </style>
    <g>
      <path class="st1" d="M133.048,121.218c-1.663,0-3.296,0.337-4.841,0.996c-20.036,8.606-36.119,24.218-45.306,43.973
                c-1.381,2.966-1.522,6.3-0.4,9.375c1.122,3.083,3.382,5.546,6.371,6.936c1.64,0.761,3.373,1.146,5.17,1.146
                c4.762,0,9.14-2.794,11.14-7.116c6.646-14.27,18.256-25.544,32.715-31.726c3.013-1.294,5.342-3.68,6.567-6.732
                c1.216-3.044,1.177-6.386-0.118-9.398C142.408,124.144,137.967,121.218,133.048,121.218z" />
      <path class="st1" d="M325.854,203.342c-0.016-89.821-73.11-162.915-162.932-162.931C73.102,40.427,0.015,113.521,0,203.342
                c0.015,89.821,73.102,162.908,162.923,162.924C252.744,366.25,325.838,293.163,325.854,203.342z M162.923,334.344
                c-34.974-0.008-67.869-13.636-92.629-38.372c-24.736-24.768-38.364-57.664-38.372-92.63c0.008-34.982,13.635-67.877,38.372-92.63
                c24.775-24.743,57.671-38.371,92.629-38.379c34.967,0.008,67.862,13.636,92.63,38.379c24.744,24.768,38.372,57.664,38.38,92.63
                c-0.008,34.959-13.635,67.854-38.38,92.63C230.793,320.708,197.898,334.336,162.923,334.344z" />
      <path class="st1" d="M427.458,69.815c-46.6,0.008-84.532,37.932-84.549,84.541c0.016,46.601,37.948,84.525,84.549,84.541
                c46.601-0.016,84.526-37.94,84.542-84.541C511.984,107.747,474.06,69.823,427.458,69.815z M464.661,191.575
                c-9.963,9.924-23.175,15.392-37.203,15.4c-14.035-0.008-27.247-5.476-37.218-15.408c-9.924-9.963-15.392-23.175-15.4-37.21
                c0.008-14.035,5.476-27.246,15.408-37.219c9.963-9.924,23.175-15.392,37.21-15.4c14.028,0.008,27.24,5.477,37.211,15.408
                c9.924,9.964,15.4,23.184,15.408,37.211C480.07,168.383,474.593,181.603,464.661,191.575z" />
      <path class="st1" d="M349.076,251.325c-2.683,10.434-6.261,20.664-10.654,30.487c16.146,2.808,30.761,10.379,42.428,22.03
                c15.024,15.047,23.292,35.029,23.301,56.258c-0.008,21.23-8.277,41.212-23.301,56.258c-15.048,15.024-35.03,23.301-56.258,23.309
                c-21.23-0.008-41.212-8.284-56.266-23.309c-11.015-11.03-18.421-24.822-21.559-40.042c-9.666,4.691-19.746,8.574-30.056,11.572
                c12.655,49.386,56.699,83.686,107.882,83.701c61.46-0.015,111.473-50.029,111.489-111.489
                C436.065,308.038,399.608,262.661,349.076,251.325z" />
    </g>
  </svg>
  <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297.001 297.001" xml:space="preserve" style='position: absolute; margin-left: 50px; z-index: 0.5;'>
    <g>
   .........完整代码请登录后点击上方下载按钮下载查看