欢迎来到程序小院

激流勇进

玩法：
键盘上键 ↑ 跳跃、左键 ←、右键 → 移动小球，小球闯关，遇到红色方块跳过，黄色的方块上键跳跃，快去闯关吧^^。

开始游戏

html

<div class="kbBox" id="kbBox"></div>
<div class="startGame" id="startGame">
    <a style="text-align: center;" href="javascript:void(0)" id="enterGame">进入游戏</a>
</div>
<div class="gameId" id="gameId" style="display: none;">
    <canvas id="canvas"></canvas>
</div>

css

#canvas {
    display:block;
    /*margin: 40px auto 20px;*/
    border-left: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff),  
      linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630, #f7716d, 
        #60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630);
    margin:0px auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.startGame{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background: url("/default/game/jlyj/images/123.jpg");
}
.startGame a{
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left:50%;
    margin-left: -50px;
    bottom: 20px;
    color:white;
    border:1px solid white;
}

js

/* 默认的重力地图 */

    gravity: {
        x: 0,
        y: 0.3
    },

    /* 速度限制*/

    vel_limit: {
        x: 2,
        y: 16
    },

    /*按下键时运动速度 */

    movement_speed: {
        jump: 6,
        left: 0.3,
        right: 0.3
    },

    /* 球员产生的坐标和球员的颜色 */

    player: {
        x: 2,
        y: 2,
        colour: '#FF9900'
    },

    /* 在tile keys中由“脚本”变量引用的脚本 */

    scripts: {
        /* 您可以使用“this”代替您的引擎变量(“game”)，但是Codepen不喜欢它 */
        change_colour: 'game.player.colour = "#"+(Math.random()*0xFFFFFF<<0).toString(16);',
        /* 你可以在这里载入一个新的地图变量 */
        next_level: 'alert("闯关成功！");game.load_map(map);',
        death: 'alert("很遗憾，闯关失败！");game.load_map(map);',
        unlock: 'game.current_map.keys[10].solid = 0;game.current_map.keys[10].colour = "#888";'
    }
};

/* Clarity 引擎 */

var Clarity = function () {

    this.alert_errors   = false;
    this.log_info       = true;
    this.tile_size      = 16;
    this.limit_viewport = false;
    this.jump_switch    = 0;

    this.viewport = {
        x: 200,
        y: 200
    };

    this.camera = {
        x: 0,
        y: 0
    };

    this.key = {
        left: false,
        right: false,
        up: false
    };

    this.player = {

        loc: {
            x: 0,
            y: 0
        },

        vel: {
            x: 0,
            y: 0
        },

        can_jump: true
    };

    window.onkeydown = this.keydown.bind(this);
    window.onkeyup   = this.keyup.bind(this);
};

Clarity.prototype.error = function (message) {

    if (this.alert_errors) alert(message);
    if (this.log_info) console.log(message);
};

Clarity.prototype.log = function (message) {

    if (this.log_info) console.log(message);
};

Clarity.prototype.set_viewport = function (x, y) {

    this.viewport.x = x;
    this.viewport.y = y;
};

Clarity.prototype.keydown = function (e) {

    var _this = this;

    switch (e.keyCode) {
        case 37:
            _this.key.left = true;
            break;
        case 38:
            _this.key.up = true;
            break;
        case 39:
            _this.key.right = true;
            break;
    }
};

Clarity.prototype.keyup = function (e) {

    var _this = this;

    switch (e.keyCode) {
        case 37:
            _this.key.left = false;
            break;
        case 38:
            _this.key.up = false;
            break;
        case 39:
            _this.key.right = false;
            break;
    }
};

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/