canvas跳跃跑酷小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas跳跃跑酷小游戏代码，按住空格键跳跃，不要掉到河里。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
<style>
    body {
    font-family: arial,sans-serif;
    font-size: 16px
}

.wrapper {
    width: 600px;
    height: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    margin-left: auto;
    margin-right: auto
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid black;
    z-index: 1;
    width: 600px;
    height: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#game-over {
    display: none;
    text-align: center;
    padding-top: 92px;
    z-index: 7;
    width: 600px;
    height: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
    margin: auto;
    position: absolute
}

</style>
    </head>
    <body>
        <h3>按空格键跳跃</h3>
        <div class="wrapper">
            <canvas id="canvas" width="800" height="480">
                <p>You're browser does not support the required functionality to play this game.</p>
                <p>
                    Please update to a modern browser such as <a href="www.google.com/chrome/‎">Google Chrome</a>
                    to play.
                </p>
            </canvas>
            <div id="game-over">
                <a href="javascript:void(0);" class="restart" id="restart">【再试一次】</a>
            </div>
        </div>
        <script type="text/javascript">
            

(function() {
    var f = document.getElementById("canvas");
    var h = f.getContext("2d");
    var v, y, F, G;
    var n = []
      , N = []
      , i = []
      , j = [];
    var r, s, l;
    var u = 32;
    var q = f.height - u;
    var t = 64;
    function w(P, O) {
        return Math.floor(Math.random() * (O - P + 1) + P)
    }
    function e(Q, P, O) {
        return Math.max(Math.min(Q, O), P)
    }
    var c = (function() {
        this.imgs = {
            bg: "//repo.bfw.wiki/bfwrepo/images/game2/bg.png",
            sky: "//repo.bfw.wiki/bfwrepo/images/game2/sky.png",
            backdrop: "//repo.bfw.wiki/bfwrepo/images/game2/backdrop.png",
            backdrop2: "//repo.bfw.wiki/bfwrepo/images/game2/backdrop_ground.png",
            grass: "//repo.bfw.wiki/bfwrepo/images/game2/grass.png",
            avatar_normal: "//repo.bfw.wiki/bfwrepo/images/game2/normal_walk.png",
            water: "//repo.bfw.wiki/bfwrepo/images/game2/water.png",
            grass1: "//repo.bfw.wiki/bfwrepo/images/game2/grassMid1.png",
            grass2: "//repo.bfw.wiki/bfwrepo/images/game2/grassMid2.png",
            bridge: "//repo.bfw.wiki/bfwrepo/images/game2/bridge.png",
            plant: "//repo.bfw.wiki/bfwrepo/images/game2/plant.png",
            bush1: "//repo.bfw.wiki/bfwrepo/images/game2/bush1.png",
            bush2: "//repo.bfw.wiki/bfwrepo/images/game2/bush2.png",
            cliff: "//repo.bfw.wiki/bfwrepo/images/game2/grassCliffRight.png",
            spikes: "//repo.bfw.wiki/bfwrepo/images/game2/spikes.png",
            box: "//repo.bfw.wiki/bfwrepo/images/game2/boxCoin.png",
            slime: "//repo.bfw.wiki/bfwrepo/images/game2/slime.png"
        };
        var P = 0;
        var Q = Object.keys(this.imgs).length;
        this.totalAssest = Q;
        function O(R, S) {
            if (this[R][S].status !== "loading") {
                return
            }
            this[R][S].status = "loaded";
            P++;
            if (P === this.totalAssest && typeof this.finished === "function") {
                this.finished()
            }
        }
        this.downloadAll = function() {
            var R = this;
            var T;
            for (var S in this.imgs) {
                if (this.imgs.hasOwnProperty(S)) {
                    T = this.imgs[S];
                    (function(U, V) {
                        U.imgs[V] = new Image();
                        U.imgs[V].status = "loading";
                        U.imgs[V].name = V;
                        U.imgs[V].onload = function() {
                            O.call(U, "imgs", V)
                        }
                        ;
                        U.imgs[V].src = T
                    }
                    )(R, S)
                }
            }
        }
        ;
        return {
            imgs: this.imgs,
            totalAssest: this.totalAssest,
            downloadAll: this.downloadAll
        }
    }
    )();
    c.finished = function() {
        E()
    }
    ;
    function D(Q, P, O) {
        this.image = new Image();
        this.frameWidth = P;
        this.frameHeight = O;
        var R = this;
        this.image.onload = function() {
            R.framesPerRow = Math.floor(R.image.width / R.frameWidth)
        }
        ;
        this.image.src = Q
    }
    function b(U, T, V, R) {
       .........完整代码请登录后点击上方下载按钮下载查看