捕鱼达人钓鱼小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：捕鱼达人小游戏代码

代码标签：小游戏

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


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

<head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900&display=swap" rel="stylesheet">

  
  
<style>
:root {
  --fish1:url('//repo.bfw.wiki/bfwrepo/image/5fb75bed95bbc.png');
  --fish2:url('//repo.bfw.wiki/bfwrepo/image/5fb75d52b8498.png');
  --fish3:url('//repo.bfw.wiki/bfwrepo/image/5fb75bed95bbc.png');
  --fish4:url('//repo.bfw.wiki/bfwrepo/image/5fb75dfb00232.png');
  --fish5:url('//repo.bfw.wiki/bfwrepo/image/5fb75d92d502f.png');
  --fish6:url('//repo.bfw.wiki/bfwrepo/image/5fb75d52b8498.png');
  --fish7:url('//repo.bfw.wiki/bfwrepo/image/5fb75db49afd7.png');
  --hook:url('//repo.bfw.wiki/bfwrepo/image/5fb75dd25b44d.png');
}

body {
  margin:0;
  padding:0;
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  text-align:center;
  background:dodgerblue;
}
body:after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  background:dodgerblue;
  background-size:cover;
  background-position:50% 50%;  
}
#console {
  width:320px;
  height:480px;
  margin:50px auto;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 25%, gold, tomato 50%);
  background-position: 90% 0;
  background-repeat:no-repeat;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  text-align:center;
  border-radius:5px;
  border:1px solid black;  
}

#start_btn {
  width:100%;
  box-sizing:border-box;
  padding:10px;
  position:absolute;
  left:0;
  top:300px;
  transition:.5s;  
}
#start_btn h3 {
  background:white;
  max-width:50%;
  margin:10px auto;
  padding:10px;
  border-radius:5px;
}

#svgContainer {
  position:absolute;
  left:259px;
  top:168px;
  left:0;
  z-index:9999;
  pointer-events:none;
}

.hide_start {
  opacity:0;
  pointer-events:none;
}

#hook {
  width:40px;
  height:40px;
  border-radius:0 0 50px 50px;
  background:var(--hook);  
  position:absolute;
  left:238px;
  top:390px;
  filter:drop-shadow(0px 0px 5px rgba(0,0,0,.5));
}

#water_box {
  width:100%;
  height:2000px;
  background:url('//repo.bfw.wiki/bfwrepo/image/5fb75ccc50071.png'), linear-gradient(to bottom,#4fadb0, #001);
  background-repeat:no-repeat,no-repeat, repeat, repeat;
  background-position:0% 100%, 0% 0%;
  background-size:contain;  
  position:absolute;
  bottom:-1800px;
}
#water_box:before {
  content:'';
  width:100%;
  height:280px;
  background:url('//repo.bfw.wiki/bfwrepo/image/5fb75c09a080a.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:0 100%;
  position:absolute;
  top:0;
  left:0;
  transform:translateY(-100%);
}

/* water_box animations */
.hook_down #water_box {
  animation:water_hook_down 3s linear .5s forwards;
}
@keyframes water_hook_down {
  100% { bottom:0; }
}

.hook_up #water_box {
  animation:water_hook_up 10s linear forwards;
}
@keyframes water_hook_up {
  0% { bottom:0; }
  100% { bottom:-1800px; }
}

/* hook animations */
.hook_down #hook {
  animation:hook_hook_down .33s linear .5s forwards;
}
@keyframes hook_hook_down {
  100% { top: 220px; }
}

.hook_up #hook {
  top:220px;
  animation: hook_hook_up .33s linear 9.66s forwards;
}
@keyframes hook_hook_up {
  100% { top: 390px; left:238px; }
}

/* svg animations */
.hook_down #svgContainer {
  animation:svg_hook_down .33s linear .5s forwards;
}
@keyframes svg_hook_down {
  100% { top:0; }
}
.hook_up #svgContainer {
  top:0;
  animation:svg_hook_up .33s linear 9.5s forwards;
}
@keyframes svg_hook_up {
  100% { top:168px; }
}

#score {
  position:absolute;
  right:10px;
  top:10px;  
  z-index:999999;
  /*   pointer-events:none; */
  user-select:none;
}

.fish {
  filter:drop-shadow(0px 15px 5px rgba(0,0,0,.25));
  animation:swim 10s linear infinite;
}
@keyframes swim {
  22% { transform:translateX(75px)}
  25% { transform:translateX(75px) scaleX(-1) }
  72% { transform:translateX(-75px) scaleX(-1) }
  75% { transform:translateX(-75px) scaleX(1) }
}

.left {
  animation:swimLeft 10s linear infinite;
  transform:scaleX(-1);
}
@keyframes swimLeft {
  22% { transform:translateX(-75px) scaleX(-1) }
  25% { transform:translateX(-75px) scaleX(1) }
  72% { transform:translateX(75px) scaleX(1) }
  75% { transform:translateX(75px) scaleX(-1) }
}

.fish1 {
  background:var(--fish1);
}
.fish2 {
  background:var(--fish2);
}
.fish3 {
  background:var(--fish3);
}
.fish4 {
  background:var(--fish4);
}
.fish5 {
  background:var(--fish5);
}
.fish6 {
  background:var(--fish6);
}
.fish7 {
  background:var(--fish7);
}

#hook_hitbox {
  width:100%;
  height:15px;
  /*     background:red; */
  position:absolute;
  bottom:-3px;
  opacity:.5.........完整代码请登录后点击上方下载按钮下载查看