|
|
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的相关知识内容的时候也可以从一些基础教程当中学习掌握到。在学习的过程中只要是能够注意掌握其核心的内容，在操作的时候就不会很复杂了。
|
|
发表于 2013-11-21 15:55:59
