js+svg实现鲨鱼逃生小游戏代码
代码语言：html
所属分类：游戏
代码描述：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>
<path style="fill:#A91523;" d="M291.641,148.041c-4.521-1.968-9.773,0.083-11.74,4.604c-0.337,0.753-6.237,13.531-20.072,20.777
c4.129-5.834,7.395-11.523,9.955-16.794c12.172-25.057,11.727-46.259,11.702-47.15c-0.138-4.929-4.239-8.84-9.175-8.675
c-4.929,0.138-8.813,4.245-8.675,9.175c0.015,0.52,0.516,38.164-32.664,69.396c-13.195-15.72-11.573-37.525-11.547-37.848
c0.431-4.898-3.181-9.226-8.081-9.675c-4.919-0.452-9.256,3.167-9.705,8.079c-0.112,1.229-2.413,29.147,15.431,50.646
c-8.539,5.888-18.653,11.284-30.609,15.834c-1.215-16.721-5.344-35.084-14.398-54.012c-3.643-7.615-7.004-15.006-10.105-22.151
c32.06-14.186,46.109-38.733,52.246-57.58c0.034-0.106,0.065-0.211,0.099-0.316c29.84-0.5,47.222-24.197,51.291-37.559
c1.436-4.717-1.216-9.728-5.933-11.164c-4.722-1.442-9.7,1.201-11.136,5.917c-0.323,1.022-7.538,22.944-30.065,24.828
c1.926-13.133,1.008-22.549,0.951-23.102c-0.507-4.896-4.87-8.439-9.776-7.952c-4.897,0.494-8.469,4.87-7.989,9.768
c0.016,0.162,1.506,16.289-4.622,34.653c-1.813,5.435-4.103,10.468-6.816,15.135c-10.606-7.832-16.157-28.717-17.377-36.54
c-0.754-4.869-5.3-8.211-10.177-7.462c-4.874,0.747-8.22,5.304-7.473,10.179c0.616,4.017,5.822,34.353,24.206,48.076
c-6.685,6.83-14.802,12.382-24.317,16.63c-23.739-59.176-28.666-97.687-28.722-98.147c-0.593-4.892-5.033-8.374-9.929-7.792
c-4.896,0.588-8.388,5.034-7.801,9.93c0.285,2.367,7.422,58.925,47.333,142.357c12.019,25.125,15.732,52.197,11.034,80.467
c-0.085,0.511-0.172,1.017-0.261,1.519c-0.226-0.701-0.459-1.409-0.7-2.122c-7.101-20.94-23.11-51.051-59.05-75.584
c-2.803-1.913-5.495-3.936-8.106-6.039c10.448-9.226,15.913-22.759,15.913-39.688c0-14.658-4.196-26.863-4.374-27.375
c-1.623-4.656-6.717-7.113-11.37-5.492c-4.656,1.624-7.115,6.714-5.492,11.37c0.123,0.354,11.438,33.689-7.867,48.899
c-13.792-14.897-23.95-33.247-30.312-54.838c-7.049-23.919-6.538-43.037-6.532-43.212c0.172-4.929-3.685-9.063-8.613-9.233
c-4.935-0.191-9.063,3.685-9.233,8.613c-0.03,0.874-0.654,21.692,7.064,48.246c10.276,35.358,30.629,64.232,58.856,83.5
c0.143,0.098,0.278,0.2,0.421,0.298c-6.99-0.179-15.362-0.968-24.096-3.076c-29.113-7.029-47.852-25.025-55.694-53.491
c-1.31-4.753-6.227-7.544-10.98-6.237c-4.754,1.31-7.546,6.226-6.236,10.98c9.561,34.702,33.323,57.561,68.719,66.105
c11.713,2.828,22.818,3.618,31.57,3.618c8.469,0,14.722-0.738,17.203-1.087c9.343,9.195,17.023,19.36,23,30.435
c-13,3.176-50.148,9.248-79.657-15.266c-3.792-3.15-9.421-2.631-12.573,1.163c-3.151,3.792-2.63,9.421,1.163,12.573
c21.566,17.917,45.798,22.588,65.207,22.588c15.325,0,27.638-2.912,33.261-4.517c0.208,0.573,0.434,1.136,0.634,1.713
c6.864,19.807,6.214,34.756,6.207,34.875c-0.236,4.189,2.475,7.978,6.517,9.105c0.797,0.222,1.603,0.329,2.398,0.329
c3.241,0,6.312-1.772,7.889-4.749c0.316-0.596,2.263-4.354,4.654-10.624c51.675-1.83,85.089-32.129,86.596-33.522
c3.615-3.341,3.837-8.971,0.505-12.594c-3.331-3.622-8.975-3.859-12.608-0.535c-0.305,0.279-27.389,24.598-68.812,28.375
c2.123-8.633,3.886-18.874,4.464-30.267c22.448-7.672,39.474-18.024,52.378-29.129c0.078,0,0.157,0.001,0.235,0.001
c40.681,0,56.332-34.892,56.982-36.385C298.224,155.29,296.162,150.008,291.641,148.041z" />
<path style="fill:#8E1325;" d="M291.641,148.041c-4.521-1.968-9.773,0.083-11.74,4.604c-0.337,0.753-6.237,13.531-20.072,20.777
c4.129-5.834,7.395-11.523,9.955-16.794c12.172-25.057,11.727-46.259,11.702-47.15c-0.138-4.929-4.239-8.84-9.175-8.675
c-4.929,0.138-8.813,4.245-8.675,9.175c0.015,0.52,0.516,38.164-32.664,69.396c-13.195-15.72-11.573-37.525-11.547-37.848
c0.431-4.898-3.181-9.226-8.081-9.675c-4.919-0.452-9.256,3.167-9.705,8.079c-0.112,1.229-2.413,29.147,15.431,50.646
c-8.539,5.888-18.653,11.284-30.609,15.834c-1.215-16.721-5.344-35.084-14.398-54.012c-3.643-7.615-7.004-15.006-10.105-22.151
c32.06-14.186,46.109-38.733,52.246-57.58c0.034-0.106,0.065-0.211,0.099-0.316c29.84-0.5,47.222-24.197,51.291-37.559
c1.436-4.717-1.216-9.728-5.933-11.164c-4.722-1.442-9.7,1.201-11.136,5.917c-0.323,1.022-7.538,22.944-30.065,24.828
c1.926-13.133,1.008-22.549,0.951-23.102c-0.507-4.896-4.87-8.439-9.776-7.952c-4.897,0.494-8.469,4.87-7.989,9.768
c0.016,0.162,1.506,16.289-4.622,34.653c-1.813,5.435-4.103,10.468-6.816,15.135c-10.606-7.832-16.157-28.717-17.377-36.54
c-0.754-4.869-5.3-8.211-10.177-7.462c-4.874,0.747-8.22,5.304-7.473,10.179c0.616,4.017,5.822,34.353,24.206,48.076
c-6.685,6.83-14.802,12.382-24.317,16.63c-2.877-7.171-5.475-14.035-7.824-20.568v48.003c2.713,6.134,5.61,12.442,8.706,18.913
c12.019,25.125,15.732,52.197,11.034,80.467c-0.085,0.511-0.172,1.017-0.261,1.519c-0.226-0.701-0.459-1.409-0.7-2.122
c-3.559-10.495-9.357-23.293-18.779-36.539v40.062c0.339-0.093,0.669-0.184,0.97-0.27c0.208,0.573,0.434,1.136,0.634,1.713
c6.864,19.807,6.214,34.756,6.207,34.875c-0.236,4.189,2.475,7.978,6.517,9.105c0.797,0.222,1.603,0.329,2.398,0.329
c3.241,0,6.312-1.772,7.889-4.749c0.316-0.596,2.263-4.354,4.654-10.624c51.675-1.83,85.089-32.129,86.596-33.522
c3.615-3.341,3.837-8.971,0.505-12.594c-3.331-3.622-8.975-3.859-12.608-0.535c-0.305,0.279-27.389,24.598-68.812.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0