HTML5画布游戏开发复杂化
问题描述:
我正在使用HTML5画布构建游戏。HTML5画布游戏开发复杂化
你可以在这里找到它,以及源代码:www.techgoldmine.com。
我会做一个jsFiddle,但是在所有的诚实方面,我的注意力都太短了(而且我自己也太愚蠢)去了解它是如何工作的。
我目前被困在一个函数,该函数会查看画布两边某些元素的位置,并移动它们以使它们覆盖的y轴区域不重叠。我称他们为涡轮机,但薄的白色矩形会更准确。我建议刷新几次,直观地了解发生了什么。
这是滋生涡轮机的功能:
function gameStateNewLevel(){
for (var i = 0; i < 4; i++){
turbine = {};
turbine.width = 10;
turbine.height = 150;
turbine.y = Math.floor(Math.random()*600)
if (Math.random()*10 > 5){
turbine.side = leftSide;
}else{
turbine.side = rightSide;
}
turbine.render = function(){
context.fillStyle = "#FFFFFF"
context.fillRect(turbine.side, turbine.y, turbine.width,turbine.height);
}
turbine.PositionTop = turbine.y;
turbine.PositionBottom = turbine.y + turbine.height;
turbines.push(turbine);
}
context.fillStyle = "#FFFFFF"
switchGameState(GAME_STATE_PLAYER_START);
}
到目前为止,我已经建立(与你的帮助了不起的人)的函数挑选出每一种(即循环的一部分)涡轮机,并开始比较他们彼此。我完全难倒当谈到了解我将如何让他们移动,并停止在需要的时候:
function updateTurbines(){
var l = turbines.length-1;
for (var i = 0; i < l; i++){
var tempTurbine1 = turbines[i];
tempTurbine1.PositionTop = tempTurbine1.y;
tempTurbine1.PositionBottom = tempTurbine1.y + tempTurbine1.height;
for (var j = 0; j < l; j++) {
var tempTurbine2 = turbines[j];
tempTurbine2.PositionTop = tempTurbine2.y;
tempTurbine2.PositionBottom = tempTurbine2.y + tempTurbine2.height;
if ((tempTurbine1 !== tempTurbine2) && FIXME == true){
if(tempTurbine1.PositionBottom >= tempTurbine2.PositionTop){
turbines[j].y -=2;
//A while loop breaks the browser :(
}
}
}FIXME = false;
}
}
更多的解释和信息任何意见或请求非常欢迎。我也有一种感觉,我很严重地使这个复杂化。该死的我的头痛。祝福你。
答
我恐怕你的代码有点乱,我决定从一个干净的石板开始。
- 使用获取器/设置器
bottom
和right
。您可以分别计算出它们的值分别为left
/width
和top
/height
。这样可以避免修改例如修改互补变量right
时发生的变化。left
。 - 你似乎在寻找矩形的碰撞检测算法。如果矩形具有相同的x坐标,这很容易 - 如果第一个底部高于另一个的顶部,或者第一个底部的顶部低于另一个的底部,则两个此类矩形会发生碰撞而不是 。只要碰撞,就使用该算法和
while
循环来生成新的涡轮机。
这就是我最终得到的结果(这是一个单独的代码片段,因此您必须将其融入到您的游戏中):http://jsfiddle.net/eGjak/249/。
var ctx = $('#cv').get(0).getContext('2d');
var Turbine = function(left, top, width, height) {
this.left = left;
this.top = top;
this.width = width;
this.height = height;
};
Object.defineProperties(Turbine.prototype, {
bottom: {
get: function() {
return this.top + this.height;
},
set: function(v) {
this.top = v - this.height;
}
},
right: {
get: function() {
return this.left + this.width;
},
set: function(v) {
this.left = v - this.width;
}
}
});
var turbines = [];
function turbineCollides(tn) {
for(var i = 0; i < turbines.length; i++) {
var to = turbines[i];
// they do not collide if if one's completely under
// the other or completely above the other
if(!(tn.bottom <= to.top || tn.top >= to.bottom)) {
return true;
}
}
return false; // this will only be executed if the `return true` part
// was never executed - so they the turbine does not collide
}
function addTurbine() {
var t, h;
do { // do while loop because the turbine has to be generated at least once
h = Math.floor(Math.random() * 300);
t = new Turbine(0, h, 15, 100);
} while(turbineCollides(t));
turbines.push(t);
}
// add two of them (do not add more than 4 because they will always collide
// due to the available space! In fact, there may be no space left even when
// you've added 2.)
addTurbine();
addTurbine();
function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = "white";
for(var i = 0; i < turbines.length; i++) {
var turbine = turbines[i];
ctx.fillRect(turbine.left, turbine.top,
turbine.width, turbine.height);
}
}
draw();
我不太清楚你的问题是什么。我只能看到那些“涡轮机”起重,然后它们流出屏幕,有时涡轮机停留在屏幕上。我不知道你重叠的意思,你能否详细说明一下? – pimvdb 2012-02-13 17:04:11
当然,我添加了一个函数,将涡轮机生成为描述。他们在y轴上的位置是自动确定的,我需要确保他们在玩家开始玩时不会互相重叠。 – styke 2012-02-13 17:12:06