我决定建立一个游戏,努力提高我作为开发人员的技能。虽然我的游戏在基本级别上运行,但我对游戏的架构不满意。基本上,播放器控制屏幕底部的健康固定div。目标是让玩家收集黑色div,躲避伤害div,并沿途抢夺健康和力量。
所有非玩家div都具有相同的大小,并使用相同的功能生成。 “下降的div”也被随机分配给一个有偏见的类。
function random(min,max){
return Math.round(Math.random() * (max-min) + min);
}
function dropDiv(){
var length = random(0, 54) * 22.5;
var velocity = 5000;
var size = 1.5;
var dropDivType = ["stack","stack","stack","stack","health",
"health", "power", "poison","poison","poison","poison","poison","poison","poison","poison","poison","poison"];
var typePicker = dropDivType[Math.floor(Math.random() * dropDivType.length)];
var thisBox = $("<div/>", {
class: `falling-box ${typePicker}` ,
style: `width:${size}%; height:0%;padding-bottom:${size}%;
left:${length}px; transition: transform ${velocity}ms linear;`
});
//insert box element
$(".game-container").append(thisBox);
//random start for animation
setTimeout(function(){
thisBox.addClass("move");
}, 40 );
//remove this object when animation is over
thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
$(this).remove();
});
}
由于所有非玩家,'下降'的div都是使用相同的功能生成的,并且基本上都是相同的,所以我在考虑为他们这一代创建原型链。这不是我以前做过的事情,我想知道是否有人会就如何实现这一点给我建议。我也不确定是否应该将碰撞情况放在坠落的div对象或玩家对象中。
我所担心的另一个问题是我的游戏中有多个时钟;一个用于玩家移动,另一个用于生成div。我想整合这些时钟。
我很遗憾在这个精彩的网站上发布这样的文字墙,但坦率地说,我感到非常迷茫和孤独地努力完成这项任务。由于我没有使用HTML5 Canvas,因此我在创建游戏引擎/环境方面的资源非常匮乏。也许我应该把我的比赛愚蠢......