0

これがフィドルです。スペースバー (キーコード 32) が押されると、弾丸をシミュレートするために小さな四角形が作成されます。いくつかの問題が発生しました: それらを一番上に移動する方法 (y 座標を減らす) は? 誰でも私を助けることができますか？どうも！

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;

init();

function init(){
    context.rect((cw-5)/2, ch-5, 5, 5);
  context.fill();
  update();
}

function update(){
  if(ps){
    playerShoot();
  }
  requestAnimationFrame(update);
}

function playerShoot(){
    var b = new bullet(2);
}

function bullet(speed){
    this.speed = speed;
  speed++;
  context.ellipse((cw-1)/2, ch-10-speed, 1, 3, 0, 0, Math.PI*2);
  context.fill();
}

document.addEventListener("keydown", function(e){
  switch(e.keyCode){
    case 32:
        ps = true;
      break;
  };
});

document.addEventListener("keyup", function(e){
  switch(e.keyCode){
    case 32:
        ps = false;
      break;
  };
});
4

1 に答える 1

0

コード自体のコメントで多くのコードを説明しました。

その他のポイント:

  • 一部のブラウザー (私のもの、つまり Firefox v44.0.2 を含む) は、楕円を描画しません。だから私はあなたの弾丸を別の長方形にしました。
  • 私はそれをよく知っているという理由だけでfillRectなく、代わりに使用しました。rect
  • 不透明な背景色で古い弾丸を上書きして、弾丸を描き直しました。ただし、必要に応じて、前の箇条書きを囲む四角形をクリアすることもできます。
  • あなたの例では速度を上げました。必要な視覚的結果が得られたとしても、それはおそらく概念的な観点からは望んでいないことです。弾丸を一定の速度で移動させたいと思われます。したがって、speed変数は定数でなければなりません。つまり、変化してはなりません。むしろ、speed定数を使用して弾丸の位置を定期的に変更する必要があります。bulletY弾丸の縦位置を変更しました。
  • 簡単にするために、一度に 1 つの弾丸だけを画面に表示できるようにしました。
  • コードを 500 サイクルの実行に制限しました。これは主に、コードを試す Stack Overflow ユーザーを困らせないようにするためです...彼らは無限ループが発生することを望んでいません。

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var ps = false;

// some new variables
var bulletShowing = false; // is a bullet currently showing?
var bulletY; // the vertical position of the bullet
var speed = 8; // the bullet speed
var time = 500; // the time remaining

init();

function init() {
  
  // draw background
  context.fillStyle = "yellow";
  context.fillRect(0, 0, cw, ch);
  
  // draw gun
  context.fillStyle = "black";
  context.fillRect((cw - 5) / 2, ch - 5, 5, 5);

  // update the scene
  update();
}

function update() {
  if (ps) {
    playerShoot();
  }
  
  // if a bullet is supposed to be showing then, well, show it
  if (bulletShowing) {
    
    // redraw the bullet (erase the old, draw the new)
    drawBullet();
    
    // if the bullet has gone off-screen, allow a new shot
    if (bulletY < -5) {
      bulletShowing = false;
    }
  }
  
  // give a visual indicator of time remaining
  document.querySelector("div").innerHTML = "Time: " + time;
  
  // decrement the time
  time -= 1;
  
  // if there is still time remaining, do it all again
  if (time >= 0) {
    requestAnimationFrame(update);
  }
}

function playerShoot() {

  // indicate a bullet will now be showing
  bulletShowing = true;

  // start the bullet out near the gun
  bulletY = ch - 10;
}

function drawBullet() {
  
  // erase the old bullet by drawing over it with the background color
  // this rectangle is slightly larger than the bullet itself
  // to ensure the entire old bullet is drawn over
  context.fillStyle = "yellow";
  context.fillRect((cw - 1) / 2 - 2, bulletY - 1, 5, 7);
  
  // move the bullet position
  bulletY -= speed;
  
  // draw the new bullet
  context.fillStyle = "black";
  context.fillRect((cw - 1) / 2 - 1, bulletY, 3, 5);
}

document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 32:
      
      // only allow one bullet on the screen at a time
      // (for the sake of coding simplicity)
      if (!bulletShowing) {
        ps = true;
      }
      break;
  };
});

document.addEventListener("keyup", function(e) {
  switch (e.keyCode) {
    case 32:
      ps = false;
      break;
  };
});
#myCanvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 5%);
  background-color: #cccccc;
  z-index: -1;
}
<p>Click on the canvas, then use the space bar to fire bullets one at a time.</p>
<div></div>
<canvas id="myCanvas" width=300 height=150></canvas>

于 2016-03-02T08:34:55.050 に答える