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

canvas跳跃跑酷小游戏代码

代码语言：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".........完整代码请登录后点击上方下载按钮下载查看