js实现恐龙跳跃类避障小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现恐龙跳跃类避障小游戏代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>

<body>

    <h3 style="text-align: center">请点击这里，按键盘方向键 ↑ 开始</h3>
    <div id="runner-container" class="runner-container offline" style="height: 200px; width: 600px; background: #fff; margin-left: auto; margin-right: auto; margin-top: 100px; border: 1px solid hsla(0,0%,21%,1.00); box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -webkit-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -moz-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34);">
        &nbsp;
    </div>


    <img id="sprite" style="display: none;" src="//repo.bfw.wiki/bfwrepo/images/game/kongllongspirte.png" alt="test" />


<script>
    var canvas = document.createElement('canvas'),
    a = document.getElementById('runner-container'),
    ctx = canvas.getContext('2d');
canvas.id = 'c';
canvas.width = 600;
canvas.height = 150;
a.appendChild(canvas);

//坐标
var spriteDefinition = {
        CACTUS_LARGE: {
            x: 332,
            y: 2
        }, //大仙人掌
        CACTUS_SMALL: {
            x: 228,
            y: 2
        }, //小仙人掌
        CLOUD: {
            x: 86,
            y: 2
        }, //云
        HORIZON: {
            x: 2,
            y: 54
        }, //地面
        MOON: {
            x: 484,
            y: 2
        }, //月亮
        PTERODACTYL: {
            x: 134,
            y: 2
        }, //翼龙
        RESTART: {
            x: 2,
            y: 2
        }, //重新开始按钮
        TEXT_SPRITE: {
            x: 655,
            y: 2
        }, //分数
        TREX: {
            x: 848,
            y: 2
        }, //霸王龙
        STAR: {
            x: 645,
            y: 2
        } //星星
    },
    FPS = 60,
    DEFAULT_WIDTH = 600,

    imgSprite = document.getElementById('sprite');

Runner.config = {
    ACCELERATION: 0.001,
    BG_CLOUD_SPEED: 0.2,
    BOTTOM_PAD: 10,
    CLEAR_TIME: 3000,
    CLOUD_FREQUENCY: 0.5,
    GAMEOVER_CLEAR_TIME: 750,
    GAP_COEFFICIENT: 0.6,
    GRAVITY: 0.6,
    INITIAL_JUMP_VELOCITY: 12,
    INVERT_FADE_DURATION: 10000, //夜晚持续时间
    INVERT_DISTANCE: 700, //每700距离进行昼夜交替
    MAX_CLOUDS: 6, //云最大数量
    MAX_OBSTACLE_LENGTH: 3,
    MAX_OBSTACLE_DUPLICATION: 2,
    MAX_SPEED: 13,
    MIN_JUMP_HEIGHT: 35,
    MOBILE_SPEED_COEFFICIENT: 1.2,
    RESOURCE_TEMPLATE_ID: 'audio-resources',
    SPEED: 6,
    SPEED_DROP_COEFFICIENT: 3
};
Runner.defaultDimensions = {
    HEIGHT: 150,
    WIDTH: 600
};

Runner.classes = {
    CANVAS: 'runner-canvas',
    CONTAINER: 'runner-container',
    CRASHED: 'crashed',
    ICON: 'icon-offline',
    INVERTED: 'inverted',
    SNACKBAR: 'snackbar',
    SNACKBAR_SHOW: 'snackbar-show',
    TOUCH_CONTROLLER: 'controller'
};

Runner.sounds = {
    BUTTON_PRESS: 'offline-sound-press',
    HIT: 'offline-sound-hit',
    SCORE: 'offline-sound-reached'
};

Runner.keycodes = {
    JUMP: {
        '38': 1,
        '32': 1
    }, // Up, spacebar
    DUCK: {
        '40': 1
    }, // Down
    RESTART: {
        '13': 1
    } // Enter
};

Runner.events = {
    ANIM_END: 'webkitAnimationEnd',
    CLICK: 'click',
    KEYDOWN: 'keydown',
    KEYUP: 'keyup',
    MOUSEDOWN: 'mousedown',
    MOUSEUP: 'mouseup',
    RESIZE: 'resize',
    TOUCHEND: 'touchend',
    TOUCHSTART: 'touchstart',
    VISIBILITY: 'visibilitychange',
    BLUR: 'blur',
    FOCUS: 'focus',
    LOAD: 'load'
};

function Runner(outerContainerId, opt_config) {
    if (Runner.instance_) {
        return Runner.instance_;
    }
    Runner.instance_ = this;
    //this.outerContainerEl = document.querySelector(outerContainerId);
    this.containerEl = null;
    this.snackbarEl = null;
    //this.detailsButton = this.outerContainerEl.querySelector('#details-button');
    this.config = opt_config || Runner.config;
    this.dimensions = Runner.defaultDimensions;
    this.canvas = null;
    this.ctx = null;

    this.tRex = null;
    this.distanceMeter = null;
    this.distanceRan = 0;
    this.highestScore = 0;

    this.time = 0;
    this.runningTime = 0;
    this.msPerFrame = 1000 / FPS;
    this.currentSpeed = this.config.SPEED;

    this.obstacles = []; //障碍物

    this.started = false;
    this.activated = false;
    this.crashed = false;
    this.paused = false;
    this.inverted = false;
    this.invertTimer = 0;
    this.resizeTimerId_ = null;

    this.playCount = 0;

    // Sound FX.
    this.audioBuffer = null;
    this.soundFx = {};

    // Global web audio context for playing sounds.
    this.audioContext = null;

    // Images.
    this.images = {};
    this.imagesLoaded = 0;

    this.loadImages();
}

Runner.prototype = {
    loadImages: function() {
        this.spriteDef = spriteDefinition;
        this.init();
    },
    loadSounds: function() {
        this.audioContext = new AudioContext();
    },
    setSpeed: function(opt_speed) {
        if (opt_speed) this.currentSpeed = opt_speed;
    },
    init: function() {
        this.setSpeed();
        this.canvas = c;
        this.ctx = ctx;
        this.ctx.fillStyle = '.........完整代码请登录后点击上方下载按钮下载查看