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

代码语言：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;
            background-size: 219px 369px;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 10000
        }
        #gameoverPanel {
            background: rgba(0,0,0,0.8) url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/gameover.png) center 30% no-repeat;
            background-size: 230px 260px;
            top: 0
        }

        #gameoverPanel,#resultPanel {
            display: none;
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 10000
        }

        #resultPanel {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/endpage.jpg) center top no-repeat;
        }

        #resultPanel,#resultPanel .weixin-share {
            left: 0;
            top: 0
        }
        #resultPanel .weixin-share {
            background: rgba(0,0,0,.8) url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/weixin.png) right top no-repeat;
            background-size: 212px 196px;
            display: none;
            height: 100%;
            position: absolute;
            width: 100%;
            z-index: 100
        }

        #resultPanel .replay {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/replay.png) 0 0 no-repeat;
            height: 36px;
            line-height: 36px;
            left: 16px;
            overflow: hidden;
            position: absolute;
            top: 11px;
            width: 86px;
            z-index: 10;
            color: #E44324;
            text-align: right;
            padding-right: 6px;
            font-weight: 700;
            font-size: 12px;
        }
        #resultPanel .panel,#scoreBoard .score-result {
            display: none;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%
        }
        #fenghao {
            height: 68px;
            margin-top: 90px;
        }
        #scorecontent {
            font-size: 16px;
            font-weight: 700;
            color: #FFF;
            text-align: center;
            line-height: 1.8em;
            margin-top: 5px;
        }
        .lighttext {
            color: #F6DE0A;
        }
        .geili {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/geili.png) center no-repeat;
        }
        .yinhen {
            background: url(//repo.bfw.wiki/bfwrepo/images/game/yuebing/yinhen.png) center no-repeat;
        }
        .textc {
            text-align: center;
        }
        .btn1, .btn2 {
            display: inline-block;
            width: 196px;
            height: 54px;
            line-height: 54px;
            color: #FFF;
            font-size: 20px;
            border-radius: 5px;
            text-align: center;
        }
        .btn1 {
            margin-top: 22px;
            background-color: #E8722C;
        }
        .btn2 {
            margin-top: 12px;
            border: 1px solid #6A6B6D;

        }

    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>

</head>
<body>

    <div id="container">
        <div id="guidePanel"></div>
        <div id="gamepanel">
            <div class="score-wrap">
                <div class="heart"></div>
                <span id="score">0</span>
            </div>
            <canvas id="stage" width="320" height="568"></canvas>
        </div>
        <div id="gameoverPanel"></div>
        <div id="resultPanel">
            <div class="weixin-share"></div>
            <a href="javascript:void(0)" class="replay"></a>
            <div id="fenghao"></div>
            <div id="scorecontent">
                您在<span id="stime" class="lighttext">2378</span>秒内抢到了<span id="sscore" class="lighttext">21341</span>个月饼<br>超过了<span id="suser" class="lighttext">31%</span>的用户！
            </div>
            <div class="textc">
                <span class="btn1 share">请小伙伴吃月饼</span>
            </div>
        </div>
    </div>

    <script>
        function Ship(ctx) {
            gameMonitor.im.loadImage(['//repo.bfw.wiki/bfwrepo/images/game/yuebing/player.png']);
            this.width = 80;
            this.height = 80;
            this.left = gameMonitor.w/2 - this.width/2;
            this.top = gameMonitor.h - 2*this.height;
            this.player = gameMonitor.im.createImage('//repo.bfw.wiki/bfwrepo/images/game/yuebing/player.png');

            this.paint = function() {
                ctx.drawImage(this.player, this.left, this.top, this.width, this.height);
            }

            this.setPosition = function(event) {
                if (gameMonitor.isMobile()) {
                    var tarL = event.changedTouches[0].clientX;
                    var tarT = event.changedTouches[0].clientY;
                } else {
                    var tarL = event.offsetX;
                    var tarT = event.offsetY;
                }
                this.left = tarL - this.width/2 - 16;
                this.top = tarT - this.height/2;
                if (this.left < 0) {
                    this.left = 0;
                }
                if (this.left > 320-this.width) {
                    this.left = 320-this.width;
                }
                if (this.top < 0) {
                    this.top = 0;
                }
                if (this.top > gameMonitor.h - this.height) {
                    this.top = gameMonitor.h - this.height;
                }
                this.paint();
            }

            this.controll = function() {
                var _this = this;
                var stage = $('#gamepanel');
                var currentX = this.left,
                currentY = this.top,
                move = false;
                stage.on(gameMonitor.eventType.start, function(event) {
                    _this.setPosition(event);
                    move = true;
                }).on(gameMonitor.eventType.end, function() {
                    move = false;
                }).on(gameMonitor.eventType.move, function(event) {
                    event.preventDefault();
                    if (move) {
                        _this.setPosition(event);
                    }

                });
            }

            this.eat = function(foodlist) {
                for (var i = foodlist.length-1; i >= 0; i--) {
                    var f = foodlist[i];
                    if (f) {
                        var l1 = this.top+this.height/2 - (f.top+f.height/2);
                        var l2 = this.left+this.width/2 - (f.left+f.width/2);
                        var l3 = Math.sqrt(l1*l1 + l2*l2);
                        if (l3 <= this.height/2 + f.height/2) {
                            foodlist[f.id] = null;
                            if (f.type == 0) {
                                gameMonitor.stop();
                                $('#gameoverPanel').show();

                                setTimeout(function() {
                                    $('#gameoverPanel').hide();
                                    $('#resultPanel').show();
                                    gameMonitor.getScore();
                                }, 2000);
                            } else {
                                $('#score').text(++gameMonitor.score);
                                $('.heart').removeClass('hearthot').addClass('hearthot');
                                setTimeout(function() {
                                    $('.heart').removeClass('hearthot')
                                }, 200);
                            }
                        }
                    }

.........完整代码请登录后点击上方下载按钮下载查看