js实现打地鼠游戏代码

代码语言:html

所属分类:游戏

代码描述:js实现打地鼠游戏代码

代码标签: 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