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) {
        var O = [];
        var Q = 0;
        var P = 0;
        for (var S = V; S <= R; S++) {
            O.push(S)
        }
        this.update = function() {
            if (P == (T - 1)) {
                Q = (Q + 1) % O.length
            }
            P = (P + 1) % T
        }
        ;
        this.draw = function(Y, Z) {
            var X = Math.floor(O[Q] / U.framesPerRow);
            var W = Math.floor(O[Q] % U.framesPerRow);
            h.drawImage(U.image, W * U.frameWidth, X * U.frameHeight, U.frameWidth, U.frameHeight, Y, Z, U.frameWidth, U.frameHeight)
        }
    }
    var d = (function() {
        var Q = {};
        var O = {};
        var P = {};
        this.draw = function() {
            h.drawImage(c.imgs.bg, 0, 0);
            Q.x -= Q.speed;
            O.x -= O.speed;
            P.x -= P.speed;
            h.drawImage(c.imgs.sky, Q.x, Q.y);
            h.drawImage(c.imgs.sky, Q.x + f.width, Q.y);
            h.drawImage(c.imgs.backdrop, O.x, O.y);
            h.drawImage(c.imgs.backdrop, O.x + f.width, O.y);
            h.drawImage(c.imgs.backdrop2, P.x, P.y);
            h.drawImage(c.imgs.backdrop2, P.x + f.width, P.y);
            if (Q.x + c.imgs.sky.width <= 0) {
                Q.x = 0
            }
            if (O.x + c.imgs.backdrop.width <= 0) {
                O.x = 0
            }
            if (P.x + c.imgs.backdrop2.width <= 0) {
                P.x = 0
            }
        }
        ;
        this.reset = function() {
            Q.x = 0;
            Q.y = 0;
            Q.speed = 0.2;
            O.x = 0;
            O.y = 0;
            O.speed = 0.4;
            P.x = 0;
            P.y = 0;
            P.speed = 0.6
        }
        ;
        return {
            draw: this.draw,
            reset: this.reset
        }
    }
    )();
    function M(Q, R, O, P) {
        this.x = Q || 0;
        this.y = R || 0;
        this.dx = O || 0;
        this.dy = P || 0
    }
    M.prototype.advance = function() {
        this.x += this.dx;
        this.y += this.dy
    }
    ;
    M.prototype.minDist = function(T) {
        var Q = Infinity;
        var P = Math.max(Math.abs(this.dx), Math.abs(this.dy), Math.abs(T.dx), Math.abs(T.dy));
        var S = 1 / P;
        var W, X, O;
        var U = {}
          , V = {};
        U.x = this.x + this.width / 2;
        U.y = this.y + this.height / 2;
        V.x = T.x + T.width / 2;
        V.y = T.y + T.height / 2;
        for (var R = 0; R < 1; R += S) {
            W = (U.x + this.dx * R) - (V.x + T.dx * R);
            X = (U.y + this.dy * R) - (V.y + T.dy * R);
            O = W * W + X * X;
            Q = Math.min(Q, O)
        }
        return Math.sqrt(Q)
  .........完整代码请登录后点击上方下载按钮下载查看