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