js实现打地鼠游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现打地鼠游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
overflow: hidden;
height: 100vh;
}
button{
cursor: pointer;
}
.container{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background-color: #61ac5a;
width: 500px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .burrows{
width: 135px;
padding-top: 20px;
margin: 0 20px 0 0;
height: 65px;
background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/地洞.png) no-repeat bottom / 100% 85%;
position: relative;
overflow: hidden;
}
.container .burrows:nth-child(3n+1){
margin-left: 23px;
}
.container .burrows:nth-last-child(3){
margin-bottom: 20px;
}
.susliks,.immortal{
width: 70px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 60px;
background: url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/地鼠.png) no-repeat center / 100% 100%;
}
#hammer{
width: 80px;
height: 100px;
position: absolute;
background:url(//repo.bfw.wiki/bfwrepo/images/game/dadishu/锤子.png) no-repeat center / 100% 100%;
transform: rotate(10deg);
pointer-events: none;
}
.wrapLife{
position: absolute;
top: 5px;
left: 10%;
font-size: 30px;
color: #464600;
display: none;
}
.wrapLife #life{
font-weight: 900;
color: #ff0000;
font-size: 35px;
}
#wrapMark{
display: flex;
position: absolute;
left: 10%;
top: 80px;
font-size: 30px;
display: none;
}
#wrapMark span{
color: #464600;
}
#wrapMark #mark{
font-weight: 900;
color: #ff5500;
}
#wrap{
height: 100vh;
}
#endBox{
width: 100%;
height: 100vh;
display: n.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0