从数组中删除从画布上绘制的项目。每个项目有不同的目的

时间：2018-03-27 10:47:51

标签： javascript arrays for-loop canvas html5-canvas

我目前正在制作游戏，而我正处于试图实施加电的阶段。对于电源UPS，我使用for循环创建一个对象，允许我赋予它们不同的特性。

var type;
Powerups = [];
      for(var j = 0; j < 325; j++) {
        if (type="undefined"){
          type = "scoreUp";
        } else if(type="scoreUp"){
          type = "horizonUp"
        } else if (type="horizonUp"){
          type = "newBall"
        } else if (type="newBall") {
          type = "scoreUp"
        }
        Powerups.push({
          "x": randInt(20,360),
          "y": 345 + (j * 240),
          "width": 10,
          "type": type
        })
      }

然后我使用矩形圈碰撞，这可以让我检测玩家是否与通电相撞。如果是，则以下代码行运行Powerups.splice(j, 1)

我注意到的一件事是，当碰撞发生时，通电量永远不会改变并且总是会增加得分。我认为这是因为我用来在碰撞时移除电源的代码。

有没有办法让它按预期工作

＆＃13;
＆＃13; 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var isMenu = true;
var isPlaying = false;
var testing = true;
var gameOver = false;
var pause;
var pressingLeft = false;
var pressingRight = false;
var pressingP = false;
var Platforms = [];
var Powerups = [];
var difficulty = 1;
var playerGravity = 1;
var Player = { color: "red", radius: 7.5, stepY: 1.5, x: 175, y: 75 };
var Score = 0;
var speed = 1;
var type;
var moveR = 2;
var moveL = 2;


function PlayerColliding(circle, rect) { 
  var distX = Math.abs(circle.x - rect.x - rect.width / 2);
  var distY = Math.abs(circle.y - rect.y - 20 / 2); 
  if (distX > (rect.width / 2 + circle.radius) && (distX) - 70 < (rect.width / 2 + circle.radius)) return false;
  if (distY > (20 / 2 + circle.radius)) return false;

  if (distX <= (rect.width / 2)) return true;
  if (distY >= (20 / 2)) return true;

  var dx = distX - rect.width / 2;
  var dy = distY - 20 / 2;
  return (dx * dx + dy * dy <= (circle.radius * circle.radius)); 
}

function PowerColliding(circle, rect) { 
  var distX = Math.abs(circle.x - rect.x - rect.width / 2);
  var distY = Math.abs(circle.y - rect.y - 20 / 2); 
  if (distX > (rect.width / 2 + circle.radius)) return false;
  if (distY > (20 / 2 + circle.radius)) return false;

  if (distX <= (rect.width / 2)) return true;
  if (distY >= (20 / 2)) return true;

  var dx = distX - rect.width / 2;
  var dy = distY - 20 / 2;
  return (dx * dx + dy * dy <= (circle.radius * circle.radius)); 
}

function drawBackground(Player) { 
  ctx.fillStyle = "black"; ctx.fillRect(0, 0, canvas.width, canvas.height);
  if (isMenu && !isPlaying) {
    Score = 0;
    createText("60px monospace", "white", "FallDown", 45, 130);
    createText("34px Arial", "white", "PLAY", 130, 240);
    createText("34px Arial", "white", "LEADERBOARD", 50, 300);
    createText("34px Arial", "white", "SETTINGS", 90, 360);
    createText("34px Arial", "white", "INFO", 130, 420);

  }
  if(isMenu && isPlaying) {
    createText("60px monospace", "white", "Game Mode", 40, 130);
    createText("34px Arial", "white", "CLASSIC", 110, 240);
    createText("34px Arial", "white", "VERSUS", 113.5, 300);
  }
  else if(pause) {
    isPlaying = false;
    createText("60px monospace", "white", "PAUSED", 90, 130);
    createText("34px Arial", "white", "RESUME", 115, 260);
    createText("34px Arial", "white", "SETTINGS", 100, 340);
    createText("34px Arial", "white", "QUIT", 145, 420);   
  } 

  else if(!isMenu && isPlaying) {
    if (testing) {

      Platforms = [];
      for (var i = 0; i < 1300; i++) {
        Platforms.push({

          "x": 10,
          "y": 300 + (i * 60),
          "width": (Math.random() * canvas.width) - 60

        });
      }
      testing = false;

      Powerups = [];
      for(var j = 0; j < 325; j++) {
        if (type="undefined"){
          type = "scoreUp";
        } else if(type="scoreUp"){
          type = "horizonUp"
        } else if (type="horizonUp"){
          type = "newBall"
        } else if (type="newBall") {
          type = "scoreUp"
        }
        Powerups.push({

          "x": randInt(20,360),
          "y": 345 + (j * 240),
          "width": 10,
          "type": type
        })
      }
    }
    if(Player.y<=0) {
      restartGame()
    }

    var playerCollided;

    for (var i in Platforms) {
      ctx.fillStyle = "#00ffff";
      ctx.fillRect(10, Platforms[i].y, Platforms[i].width, 20);

      var totalTest = Platforms[i].width + 60;
      ctx.fillRect(totalTest + 30, Platforms[i].y, canvas.width - totalTest, 20);

      Platforms[i].y -= 1;

      if (!playerCollided) { 
        if (PlayerColliding(Player, Platforms[i])) {
          playerGravity = -1;
          playerCollided = true;
        } else {
          playerGravity = 2.5;
        }        
      }

    }

    var powerCollided;

    for (var j in Powerups) {
      ctx.fillStyle = "#ff00ff";
      ctx.fillRect(Powerups[j].x, Powerups[j].y, Powerups[j].width, 10);
      Powerups[j].y -= 1;
      if (!powerCollided) { 
        if (PowerColliding(Player, Powerups[j])) {
          powerCollided = true;
          Powerups.splice(j, 1)
          if(type="scoreUp") {
            Score += 75
          } else if (type="horizonUp") {
            moveR+= 0.5;
            moveL+=0.5;
            console.log("hup")
          }
        }        
      } 
    }


    displayScore();
    detectBorderCollision();
    detectPlayerCollision();
    drawPlayer();
    drawBorder();
  }



  if (Platforms.length === 7) Platforms = [];
}


function displayScore() {
  ctx.beginPath(); 
  Score +=1;
  ctx.font = "15px arial black";
  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'black';
  ctx.fillText(Score, 180, 50);
  ctx.lineWidth = 0.25;
  ctx.strokeText(Score, 180, 50);
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}

function detectBorderCollision() {
  if (Player.x > 370 - Player.radius) {
    Player.x = 370 - Player.radius;
  } else if (Player.x < 3.8 + Player.radius * 2) {
    Player.x = 3.8 + Player.radius * 2 
  }
}

function detectPlayerCollision() {

}

function randInt(min, max) {
  return ~~(Math.random() * (max - min + 1) + min);
}

function drawPlayer() {
  ctx.beginPath();
  ctx.fillStyle = Player.color;
  ctx.arc(Player.x, Player.y, Player.radius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();

  Player.y += playerGravity;

  if (pressingRight) {
    Player.x += 2;
  } else if (pressingLeft) {
    Player.x -= 2;
  }

  /*
  ctx.fillStyle = "#00ffff"; ctx.fillRect(10, 160, 300, 20); */ }

function drawBorder() {
  ctx.beginPath();
  ctx.strokeStyle = "#00ffff";
  ctx.lineWidth = 10;
  ctx.moveTo(5, 0);
  ctx.lineTo(5, 640);

  ctx.moveTo(375, 0);
  ctx.lineTo(375, 640);
  ctx.stroke();
  ctx.closePath();
}


function createText(font, color, value, posX, posY) {
  ctx.font = font;
  ctx.fillStyle = color;
  ctx.fillText(value, posX, posY)
}

function isInside(realX, realY, x1, x2, y1, y2) { 
  return (realX > x1 && realX < x2) && (realY > y1 && realY < y2)
}

function drawGame() {
  drawBackground(Player);
}

function startDrawing() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawGame();
  requestAnimationFrame(startDrawing);
}

function restartGame() {
  isPlaying = false;
  isMenu = true;
  pause = false;
  Player.y= 75;
  Player.x = 175
  Platforms = [];
  var Score = 1;
  testing = true;
  pressingLeft = false;
  pressingRight = false;
  var moveR = 2;
  var moveL = 2;
}

function Init() { 
  requestAnimationFrame(startDrawing);
  canvas.addEventListener("click", function(evt) {
    var rect = canvas.getBoundingClientRect();
    var mouseX = evt.clientX - rect.left;
    var mouseY = evt.clientY - rect.top;

    if (isMenu && !isPlaying) {
      if (isInside(mouseX, mouseY, 115, 230, 220, 270)) {
        isPlaying = true;
        isMenu = false;
      } else if (isInside(mouseX, mouseY, 35, 320, 300, 345)) {
        console.log("Leaderboard");
      } else if (isInside(mouseX, mouseY, 75, 270, 380, 430)) {
        console.log("Settings");
      }
    } else if (pause) {
      if(isInside(mouseX, mouseY, 110, 270, 230, 260)) {
        pause = false;
        isPlaying = true;
      } else if (isInside(mouseX, mouseY, 95, 270, 310, 345)) {
        console.log('settings')
      } else if (isInside(mouseX, mouseY, 140, 230, 390, 425)) {
        console.log('quit')
        restartGame();        
      }
    }
  });

  window.addEventListener("keydown", function(evt) {
    if (!isMenu && isPlaying || pause) {
      if (evt.keyCode === 39) { // right
        pressingRight = true;
      } else if (evt.keyCode === 37) { // left
        pressingLeft = true;
      } else if (evt.keyCode === 80) {
        pressingP = true;
        pause = !pause;
        if(!pause) {
          isPlaying = true;
        }
      }
    }
  });

  window.addEventListener("keyup", function(evt) {
    if (!isMenu && isPlaying) {
      if (evt.keyCode === 39) { // right
        pressingRight = false;
      } else if (evt.keyCode === 37) { // left
        pressingLeft = false;
      }
    }
  });
}


Init();
＆＃13; 
<html> 
  <head>
    <title>Falldown</title>
  </head>
  <body>
    <canvas id="canvas" width = "380" height= "640"></canvas>
    <script src="beta.js"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题