どのように私はポイントでジャバスクリプトでゲームを作ることができますか？

Question

wlecome

私は彼がそれを回避しなければならないトッププレイヤーから鉱山ダウンを行う必要があり

矢印キーでemelent（宇宙船）の動きを作るために、このコードを持っていますか？

誰でもこのゲームを終了してください。小さなヒント

これは私のコード

$(document).keydown(function(e){ 
switch (e.which){ 
case 37: //left arrow key 
    $(".box").finish().animate({ 
     left: "-=50" 
    }); 
    break; 
case 38: //up arrow key 
    $(".box").finish().animate({ 
     top: "-=50" 
    }); 
    break; 
case 39: //right arrow key 
    $(".box").finish().animate({ 
     left: "+=50" 
    }); 
    break; 
case 40: //bottom arrow key 
    $(".box").finish().animate({ 
     top: "+=50" 
    }); 
    break; 
} 

}）です。

Answer 1

すべてのことを達成するためには、ゲームをする必要があります。あなたは、プレーヤーの宇宙船と落ちる鉱山の束を作ることができるようにするには少しだけコードが必要です。

最も重要なことは、ゲームエリアにスポーンすることができる何らかの種類のスプライトクラスで、スプライトはプレイヤーと鉱山です。彼らは移動可能である必要があり、衝突を検出する必要があります。

基本的なことは、何かを動かすときに何かヒットするかどうかをチェックすることです。あなたのようなシンプルなCSSゲームでは、境界の矩形で衝突の検出が行われます。 IEは別のものの内部の長方形です。

あなたの計画などのゲームがどのように行われたかを説明するには、ミニブックが必要です。ありがたいことに私たちはjs fiddleを持っており、ありがたいことに、あなたがやろうとしていることのとても簡単なデモをまとめました。ここで

$(document).ready(function() { 

    var sprites = []; 
    var enemies = []; 
    var game = $("#spelplan"); 
    var STOP; 

    // random numbers ints from min-max, use for points system 
    function RND(min, max) { 
    return parseInt(Math.random() * (max - min) + min); 
    } 

    // 
    // We spin up a simple sprite class that can be re-used, It's simple 
    // params; id,x,y,w,h,class,area 
    // The area is the realm where the sprite exists - in our case all in one div. 
    // this would allow you to bind sprites into different realms - areas of your game. 
    // methods: up, down, left,right - binding the sprite within the realms box x,y,w,h 
    // 
    // Exercise: 
    // Modify, extend the sprite class so we can specify how much a sprite can move ie 20px or 10px. 
    // 
    var sprite = function(id, x, y, w, h, _class, view, collisionDetect, options) { 
    this.view = view; 
    this.id = id 
    this.x = x + "px"; 
    this.y = y + "px"; 
    this.width = w; 
    this.height = h; 
    // 
    // Now we can pass in custom attributes for our sprites like PTS 
    // 
    this.options = options; 

    this.el = $("<div id='" + this.id + "' class='" + _class + "'></div>").css('left', this.x).css('top', this.y); 
    view.append(this.el); 

    this.x = function() { 
     return this.el.position().left; 
    } 
    this.y = function() { 
     return this.el.position().top; 
    } 

    this.up = function() { 
     if (this.y() > 0) { 
     this.el.animate({ 
      top: '-=25px' 
     }, 0); 
     if (collisionDetect) collisionDetect(this); 
     } 
    }; 
    this.down = function() { 
     if (this.y() < this.view.height() - this.height) { 
     this.el.animate({ 
      top: '+=25px' 
     }, 0); 
     if (collisionDetect) collisionDetect(this); 
     } else { 
     return true; 
     } 
    }; 
    this.left = function() { 
     if (this.x() > 0) { 

     this.el.animate({ 
      left: '-=25px' 
     }, 0); 
     if (collisionDetect) collisionDetect(this); 
     } 
    }; 
    this.right = function() { 
     if (this.x() + this.width < this.view.width()) { 
     this.el.animate({ 
      left: '+=25px' 
     }, 0); 
     if (collisionDetect) collisionDetect(this); 
     } 
     this.destroy = function() { 
     // remove from dom 
     this.el.remove(); 

     // remove sprite from sprites 
     for (var i = 0; i < sprites.length; i++) { 
      if (data[i].id == this.id) { 
      sprites.splice(i, 1); 
      break; 
      } 



     } 

     } 

    }; 
    // returns back the x,y's and the z's of a sprites 
    this.getPos = function() { 
     var pos, width, height; 
     pos = this.el.position(); 
     width = this.el.width(); 
     height = this.el.height(); 
     return [ 
     [pos.left, pos.left + width], 
     [pos.top, pos.top + height] 
     ]; 
    }; 
    // checks if any two positions are a collision 
    this.comparePos = function(p1, p2) { 
     var r1, r2; 
     r1 = p1[0] < p2[0] ? p1 : p2; 
     r2 = p1[0] < p2[0] ? p2 : p1; 
     return r1[1] > r2[0] || r1[0] === r2[0]; 
    }; 
    // returns true if the passed sprites collides with this sprite 
    this.collidesWith = function(sprite) { 
     // 
     // Ignore any sprites that are "destroying" themselves! 
     // 
     if (sprite.destroyed === true) return; 

     var pos1 = this.getPos(), 
     pos2 = sprite.getPos(); 
     return this.comparePos(pos1[0], pos2[0]) && this.comparePos(pos1[1], pos2[1]); 
    }; 

    // Calls custom init cb, this allows custom code when the sprite is 
    // created. 
    if (this.options && this.options.init) this.options.init(this); 


    // add to our sprite object so we can reference. 
    sprites.push(this); 



    }; 
    // 
    // Your existing spawn, now it just calls my sprite class with new and the params for our enemy. 
    // My class will remember all the enemies within its own internal cache sprites, this now makes 
    // it easier for us to detect what is going on since now we can ref any sprite on the screen 
    // sprites[0].up() moves the first sprite up. 
    // 
    function spawnrand() { 
    // 
    // Some game logic - a max of 99 enemies in our game, this prevents constant spawning. 
    // STOP is when the game is over. 
    if (sprites.length > 100 || STOP===true) return 
    var points = [50, 100, 200, 300, 400, 500]; 
    var spelplanWidth = game.width(); 
    var spelplanHeight = game.height(); 
    var randPosY = Math.floor((Math.random() * spelplanHeight)); 
    var randPosX = Math.floor((Math.random() * spelplanWidth)); 
    // create enemy, store him in array so we can find him, 
    // extend with free fall code; 
    // 
    var enemy = new sprite("enemy" + sprites.length + 1, randPosY, 0, 15, 15, "rand", game, 
     // 
     // passed in collide detect 
     // 
     function(sprite) { 

     if (sprite.collidesWith(player) === true) { 

      // here its game over, mark plater as destroying 
      STOP = true; 
      player.destroyed = true; 
      alert("GAME OVER"); 
      player.el.fadeOut(100, function() { 
      player.destroy(); 
      }); 
     } 

     }, { 
     init: function(sprite) { 
      // 
      // Very simple free fall code, if down returns true the sprite is off screen so stop free fall 
      // 
      function freeFall() { 
      if (sprite.down() === true) return sprite.destroy(); 
      setTimeout(freeFall, 200); 
      } 

      freeFall(); 
     } 
     }); 
    enemies.push(enemy); 
    } 




    var player = new sprite("box1", 200, 200, 50, 50, "player", game, 
    function(sprite) { 

     // detect if the player is over an enemy. 
     sprites.forEach(function(sprite) { 
     // primitive but ignores the plater sprite since he is not an enemy! 
     if (sprite.id !== "box1" && player.collidesWith(sprite)) { 
      // 
      // Here is where the action happens, animate the destruction 
      // of your enemy - add up the score 
      // TODO: 
      // Add a destroy method to our sprite class, removes him from dom 
      // and from our sprite array! 
      // 

      // This flag tells the game engine that this sprite is destroyed, since u will want it to animate 
      // or play some sort of death animation, while it is doing this we dont want it interacting with 
      // our player, we use a flag so the sprite collision engine can avoid it. 
      sprite.destroyed = true; 
      // Stops the spawn from self destructing! 
      clearTimeout(sprite.selfDestruct); 

      sprite.el.fadeOut(100, function() { 
      sprite.destroy(); 
      }); 
      SCORE(sprite.options.PTS); 
     } 

     }) 


    }); 
    setInterval(spawnrand, 250); 

    $(document).keydown(function(e) { 
     // is game over player cant move. 
    if (STOP===true) return; 
    if (e.keyCode == 37) { 
     player.left(); 
    } else if (e.keyCode == 39) { 
     player.right(); 
    } else if (e.keyCode == 38) { 
     player.up(); 
    } else if (e.keyCode == 40) { 
     player.down(); 
    } 
    }); 






}); 

はフィドルです：

https://jsfiddle.net/erLv5rwb/7/

それは原始的だが、それは我々が簡単に我々はSpriteクラスを呼び出すことにより、鉱山を作ることができ、そして再びどのように簡単に私たちは鉱山でcollisonsを検出する方法を示し彼らが私たちに当たったとき。スプライトの要素ID X、Y、W、H：PXにおける位置と、スプライトのサイズ のCssClass：我々の要素に適用される任意のCSS我々は

var player = new sprite(id, x, y, w, h, cssClass, realm,onMoveCB,options) 

イドを呼び出すスプライトを作成する

real：競技場であるdiv onMove：スプライトが移動されたときに呼び出されるコールバック、ここでは衝突検出を行うことができます オプション：スコアなどの他のものを渡すことができます。生活など

私たちは移動することができますスプライトを行うことによって

sprite.down（）; //アップ、左または右

と私たちはプレイヤー

場合（sprite.collidesWith（プレイヤー）===真）、つまり何かをヒットした場合、//チェックプレイヤーが出現爆発することができ、新たな1

これは基本的なことですが、単純なゲームの仕方を指摘する必要があります。