如何在这个原始的javascript游戏中实现原型并集成时钟?

时间:2017-07-29 06:34:11

标签: javascript jquery html css html5

我决定建立一个游戏,努力提高我作为开发人员的技能。虽然我的游戏在基本级别上运行,但我对游戏的架构不满意。基本上,播放器控制屏幕底部的健康固定div。目标是让玩家收集黑色div,躲避伤害div,并沿途抢夺健康和力量。

Codepen

所有非玩家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,因此我在创建游戏引擎/环境方面的资源非常匮乏。也许我应该把我的比赛愚蠢......

0 个答案:

没有答案