html5游戏开发的基础设置操作

html5游戏开发在操作过程中避免不了的就是基础设置。但是，它的基础设置环节比较复杂，很多人自己在设置HTML5的一些操作需求的时候都会容易陷入误区，从而导致自己在设置HTML5的一些基础操作问题的时候往往容易出错。现在我们来看看关于HTML5的基础设置的操作问题。
实现checkCollideWithMap方法：
            _checkCollideWithMap: function () {
                var i1 = Math.floor((this.y) / bomberConfig.HEIGHT),
                    i2 = Math.floor((this.y + bomberConfig.player.IMGHEIGHT - 1) / bomberConfig.HEIGHT),
                    j1 = Math.floor((this.x) / bomberConfig.WIDTH),
                    j2 = Math.floor((this.x + bomberConfig.player.IMGWIDTH - 1) / bomberConfig.WIDTH),
                    terrainData = window.terrainData,
                    pass = bomberConfig.map.terrain.pass,
                    stop = bomberConfig.map.terrain.stop;


                if (terrainData[i1][j1] === pass && terrainData[i1][j2] === pass
                    && terrainData[i2][j1] === pass && terrainData[i2][j2] === pass) {
                    return false;
                }
                else {
                    return true;
                }
            },
在move中判断：
move: function () {
    var origin_x = this.x,
        origin_y = this.y;


    this.x = this.x + this.speedX * this.dirX;
    this.y = this.y + this.speedY * this.dirY;


    this._limitMove();


    if (this._checkCollideWithMap()) {
        this.x = origin_x;
        this.y = origin_y;
    }
},
PlayerSprite
...      
             _computeCoordinate: function () {
                this.x = this.x + this.speedX * this.dirX;
                this.y = this.y + this.speedY * this.dirY;


                this._limitMove();


                //因为移动次数是向上取整，可能会造成移动次数偏多（如stepX为2.5，取整则stepX为3），
                //坐标可能会偏大（大于bomberConfig.WIDTH / bomberConfig.HEIGHT的整数倍），
                //因此此处需要向下取整。
                
                if (this.completeOneMove) {
                    this.x -= this.x % bomberConfig.WIDTH;
                    this.y -= this.y % bomberConfig.HEIGHT;
                }
            },
            //计算移动次数
            _computeStep: function () {
                this.stepX = Math.ceil(bomberConfig.WIDTH / this.speedX);
                this.stepY = Math.ceil(bomberConfig.HEIGHT / this.speedY);
            },
            _allKeyUp: function () {
                return window.keyState[keyCodeMap.A] === false && window.keyState[keyCodeMap.D] === false
                     && window.keyState[keyCodeMap.W] === false && window.keyState[keyCodeMap.S] === false;
            },
            _judgeCompleteOneMoveByIndex: function () {
                if (!this.moving) {
                    return;
                }


                 if (this.moveIndex_x >= this.stepX) {
                    this.moveIndex_x = 0;
                    this.completeOneMove = true;
                }
                else if (this.moveIndex_y >= this.stepY) {
                    this.moveIndex_y = 0;
                    this.completeOneMove = true;
                }
                else {
                    this.completeOneMove = false;
                }
            },
            _judgeAndSetDir: function () {
                if (window.keyState[keyCodeMap.A] === true) {
                    this._context.walkLeft();
                }
                else if (window.keyState[keyCodeMap.D] === true) {
                    this._context.walkRight();
                }
                else if (window.keyState[keyCodeMap.W] === true) {
                    this._context.walkUp();
                }
                else if (window.keyState[keyCodeMap.S] === true) {
                    this._context.walkDown();
                }
            }
以上的内容是HTML5的基础设置操作的简要部分，大家自己在学习HTML5的相关知识内容的时候也可以从一些基础教程当中学习掌握到。在学习的过程中只要是能够注意掌握其核心的内容，在操作的时候就不会很复杂了。