js实现手机端移动端玉兔子吃月饼小游戏代码-html代码-BFW代码库

js实现手机端移动端玉兔子吃月饼小游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现手机端移动端玉兔子吃月饼小游戏代码

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
    <meta name="screen-orientation" content="portrait">
    <style>
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }
        html, body {
            height: 100%;
            position: relative;
            margin: 0;
            overflow: hidden;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            background-color: #000018;
            font-family: '微软雅黑';
        }
        a {
            text-decoration: none;
        }
        #container {
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        #startgame {
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        #gamepanel {
            width: 100%;
            margin: 0 auto;
            height:100%;
            position: relative;
            overflow: hidden;
        }
@media screen and (min-width: 1024px) {
            #gamepanel, body, html {
                width: 100%;
                margin: 0 auto;
            }
        }
        #stage {
            background-color: #CCC;
        }

        .score-wrap {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/scorebg.png) no-repeat;
            background-size: 100%;
            color: #FFF;
            /*display: none;*/
            font-family: "Helvetica","Microsoft YaHei",sans-serif;
            font-style: italic;
            font-size: 17px;
            font-weight: 700;
            height: 32px;
            letter-spacing: 2px;
            padding: 7px 10px;
            position: absolute;
            right: 20px;
            text-align: right;
            text-shadow: 1.5px 0 0 #613209,-1.5px 0 0 #613209,0 1px 0 #613209,0 -1.5px 0 #613209,1px 1px 0 #613209,-1px 1px 0 #613209,1px -1px 0 #613209,-1px -1px 0 #613209;
            top: 10px;
            width: 105px;
            z-index: 1005
        }

        .score-wrap div {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/heart.png) no-repeat;
            background-size: 100%;
            height: 26px;
            left: 2px;
            position: absolute;
            top: 2px;
            width: 26px;
            z-index: 1009
        }

        div.hearthot {
            -webkit-animation: fire .2s linear;
            -o-animation: fire .2s linear;
            animation: fire .2s linear
        }

@-webkit-keyframes fire {
            0% {
                opacity: 1;
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -o-transform: scale(1.1);
                transform: scale(1.1)
            }

            100% {
                opacity: 0;
                -webkit-transform: scale(3.0);
                -moz-transform: scale(3.0);
                -ms-transform: scale(3.0);
                -o-transform: scale(3.0);
                transform: scale(3.0)
            }
        }

@keyframes fire {
            0% {
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                -o-transform: scale(1.1);
                transform: scale(1.1)
            }

            100% {
                -webkit-transform: scale(1.0);
                -moz-transform: scale(1.0);
                -ms-transform: scale(1.0);
                -o-transform: scale(1.0);
                transform: scale(1.0)
            }
        }
        #guidePanel {
            background: rgba(0,0,0,0.6) url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/startbg.png) center 50% no-repeat;
            .........完整代码请登录后点击上方下载按钮下载查看