为HTML游戏制作移动的“相机”

debugcn 发表于 Dev

和

我正在使用HTML和javascript构建侧面滚动游戏。我需要帮助来了解如何构建可移动的焦点，使其在遍历整个世界时固定在主要的移动精灵上。我的画布是2000 x 2000，我想构建一个约750 x 750的相机。

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="2000" height="2000"></canvas>

<script>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var positionX = 100.0;
var positionY = 175.0;
var velocityX = 4.0;
var velocityY = 0.0;
var gravity = 0.5;
var onGround = false;
var deaths = 0;
var points = 0;
var color = "#000000";

//cirlce 1
var point1x1 = 339;
var point1x2 = 372;
var point1y1 = 110;
var point1y2 = 150;
var circlex1 = 350;
var circley1 = 100;

//circle 2
var point2x1 = 565;
var point2x2 = 590;
var point2y1 = 90;
var point2y2 = 150;
var circlex2 = 575;
var circley2 = 100;

//cirlce 3
var point3x1 = 855;
var point3x2 = 880;
var point3y1 = 20;
var point3y2 = 50;
var circlex3 = 865;
var circley3 = 35;


window.addEventListener("mousedown", StartJump, false);
window.addEventListener("mouseup", EndJump, false);

Loop();

function StartJump()
{
    if(onGround)
    {
        velocityY = -12.0;
        onGround = false;
    }
}

function EndJump()
{
    if(velocityY < -6.0)
        velocityY = -6.0;
}

function Loop()
{
    Update();
    Render();
    window.setTimeout(Loop, 30);    
}

function Update()
{
    velocityY += gravity;
    positionY += velocityY;
    positionX += velocityX;

    // Collision Detection //
    if ((positionX > 239 && positionX < 292 && positionY > 145) || (positionX > 439 && positionX < 492 && positionY > 145) || (positionX > 639 && positionX < 692 && positionY > 145) || (positionX > 839 && positionX < 892 && positionY > 145) || (positionX > 839 && positionX < 892 && positionY > 50 && positionY < 100))
    {
    positionY = 175;
      positionX = 50;
    deaths++;
    points = 0;

// circle 1

    circlex1 = 350;
    circley1 = 100;
    point1x1 = 339;
    point1x2 = 372;
    point1y1 = 110;
    point1y2 = 150;

//circle 2

        circlex2 = 575;
        circley2 = 100;
        point2x1 = 565;
        point2x2 = 595;
        point2y1 = 90;
        point2y2 = 150;

//circle 3

        point3x1 = 855;
    point3x2 = 880;
    point3y1 = 20;
    point3y2 = 50;
    circlex3 = 865;
    circley3 = 35;

    }

    if(positionY > 175.0)
    {
        positionY = 175.0;
        velocityY = 0.0;
        onGround = true;
    }

// End World
    if(positionX < 10 || positionX > 2000)
    velocityX *= -1;      

// Point 1
   if(positionX > point1x1 && positionX < point1x2 && positionY > point1y1 && positionY < point1y2)
    {
    points++;
    circlex1 = -10;
    circley1 = -10;
    point1x1 = -10;
    point1x2 = -10;
    point1y1 = -10;
    point1y2 = -10;

    }


// Point 2
if(positionX > point2x1 && positionX < point2x2 && positionY > point2y1 && positionY < point2y2)
    {
    points++;
    circlex2 = -10;
    circley2 = -10;
    point2x1 = -10;
    point2x2 = -10;
    point2y1 = -10;
    point2y2 = -10;
    }

// Point 3
if(positionX > point3x1 && positionX < point3x2 && positionY > point3y1 && positionY < point3y2)
    {
    points++;
    circlex3 = -10;
    circley3 = -10;
    point3x1 = -10;
    point3x2 = -10;
    point3y1 = -10;
    point3y2 = -10;
    }

}


function drawSquare1() {
  ctx.beginPath();
    ctx.rect(250, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}

function drawCircle1() {
  ctx.beginPath();
    ctx.arc(circlex1, circley1, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

function drawCircle2() {
  ctx.beginPath();
    ctx.arc(circlex2, circley2, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

function drawCircle3() {
  ctx.beginPath();
    ctx.arc(circlex3, circley3, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}


function drawSquare2() {
  ctx.beginPath();
    ctx.rect(450, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}

function drawSquare3() {
  ctx.beginPath();
    ctx.rect(650, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}

function drawSquare5() {
  ctx.beginPath();
    ctx.rect(850, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}

function drawSquare4() {
  ctx.beginPath();
    ctx.rect(850, 50, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
}

function drawDeaths() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Deaths: "+deaths, 8, 20);
}

function drawPoints() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Points: "+points, 8, 50);
}

function Render()
{
    ctx.clearRect(0, 0, 2000, 2000);
    drawCircle1();
    drawCircle2();
    drawCircle3();
    drawSquare1(); 
    drawSquare2();
    drawSquare3();
    drawSquare4();
    drawSquare5();
    drawDeaths();
    drawPoints();
    ctx.beginPath();
    ctx.moveTo(0,175);
    ctx.lineTo(2000,175);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(positionX - 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY);
    ctx.lineTo(positionX - 10, positionY);
    ctx.closePath();
    ctx.stroke(); 
}

</script>
</body>
</html>

扎因·扎法尔（Zain Zafar）

修改了您的代码。希望对您有所帮助。

<!DOCTYPE html>
<html>

<body>
<canvas id="canvas" width="2000" height="2000"></canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var positionX = 100.0;
  var positionY = 175.0;
  var velocityX = 2.3;
  var velocityY = 0.0;
  var gravity = 0.5;
  var onGround = false;
  var deaths = 0;
  var points = 0;
  var color = "#000000";

  //cirlce 1
  var point1x1 = 339;
  var point1x2 = 372;
  var point1y1 = 110;
  var point1y2 = 150;
  var circlex1 = 350;
  var circley1 = 100;

  //circle 2
  var point2x1 = 565;
  var point2x2 = 590;
  var point2y1 = 90;
  var point2y2 = 150;
  var circlex2 = 575;
  var circley2 = 100;

  //cirlce 3
  var point3x1 = 855;
  var point3x2 = 880;
  var point3y1 = 20;
  var point3y2 = 50;
  var circlex3 = 865;
  var circley3 = 35;


  window.addEventListener("mousedown", StartJump, false);
  window.addEventListener("mouseup", EndJump, false);

  Loop();

  function StartJump() {
    if (onGround) {
      velocityY = -12.0;
      onGround = false;
    }
  }

  function EndJump() {
    if (velocityY < -6.0)
      velocityY = -6.0;
  }

  function Loop() {
    Update();
    Render();
    window.setTimeout(Loop, 30);
  }

  function Update() {
    velocityY += gravity;
    positionY += velocityY;
    positionX += velocityX;

    // Collision Detection //
    if ((positionX > (239 - positionX) && positionX < (292 - positionX) && positionY > 145) || (positionX > (439 - positionX) && positionX < (492 - positionX) && positionY > 145) || (positionX > (639 - positionX) && positionX < (692 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 145) || (positionX > (839 - positionX) && positionX < (892 - positionX) && positionY > 50 && positionY < 100)) {
      positionY = 175;
      positionX = 50;
      deaths++;
      points = 0;

// circle 1

      circlex1 = 350;
      circley1 = 100;
      point1x1 = 339;
      point1x2 = 372;
      point1y1 = 110;
      point1y2 = 150;

//circle 2

      circlex2 = 575;
      circley2 = 100;
      point2x1 = 565;
      point2x2 = 595;
      point2y1 = 90;
      point2y2 = 150;

//circle 3

      point3x1 = 855;
      point3x2 = 880;
      point3y1 = 20;
      point3y2 = 50;
      circlex3 = 865;
      circley3 = 35;

    }

    if (positionY > 175.0) {
      positionY = 175.0;
      velocityY = 0.0;
      onGround = true;
    }

// End World
    if (positionX < 10 || positionX > 2000)
      velocityX *= -1;

// Point 1
    if (positionX > (point1x1 - positionX) && positionX < (point1x2 - positionX) && positionY > point1y1 && positionY < point1y2) {
      points++;
      circlex1 = -10;
      circley1 = -10;
      point1x1 = -10;
      point1x2 = -10;
      point1y1 = -10;
      point1y2 = -10;

    }


// Point 2
    if (positionX > (point2x1 - positionX) && positionX < (point2x2 - positionX) && positionY > point2y1 && positionY < point2y2) {
      points++;
      circlex2 = -10;
      circley2 = -10;
      point2x1 = -10;
      point2x2 = -10;
      point2y1 = -10;
      point2y2 = -10;
    }

// Point 3
    if (positionX > (point3x1 - positionX) && positionX < (point3x2 - positionX) && positionY > point3y1 && positionY < point3y2) {
      points++;
      circlex3 = -10;
      circley3 = -10;
      point3x1 = -10;
      point3x2 = -10;
      point3y1 = -10;
      point3y2 = -10;
    }

  }


  function drawSquare1() {
    ctx.beginPath();
    ctx.rect(250 - positionX, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

  function drawCircle1() {
    ctx.beginPath();
    ctx.arc(circlex1 - positionX, circley1, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
  }

  function drawCircle2() {
    ctx.beginPath();
    ctx.arc(circlex2 - positionX, circley2, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
  }

  function drawCircle3() {
    ctx.beginPath();
    ctx.arc(circlex3 - positionX, circley3, 7, 7, 500);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
  }


  function drawSquare2() {
    ctx.beginPath();
    ctx.rect(450 - positionX, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

  function drawSquare3() {
    ctx.beginPath();
    ctx.rect(650 - positionX, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

  function drawSquare5() {
    ctx.beginPath();
    ctx.rect(850 - positionX, 145, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

  function drawSquare4() {
    ctx.beginPath();
    ctx.rect(850 - positionX, 50, 30, 30);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }
  function drawCamera() {
    ctx.beginPath();
    ctx.fillStyle = "#EEE";
    ctx.moveTo(0,0);
    ctx.lineTo(0, 2000);
    ctx.lineTo(2000, 2000);
    ctx.lineTo(2000, 0);
    ctx.rect(10, 5, 500, 400);
    ctx.fill();
    ctx.closePath();
  }

  function drawDeaths() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Deaths: " + deaths, 10, 20);
  }

  function drawPoints() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Points: " + points, 10, 50);
  }

  function Render() {
    ctx.clearRect(0, 0, 2000, 2000);
    drawCircle1();
    drawCircle2();
    drawCircle3();
    drawSquare1();
    drawSquare2();
    drawSquare3();
    drawSquare4();
    drawSquare5();
    drawDeaths();
    drawPoints();
    
    ctx.beginPath();
    ctx.moveTo(0, 175);
    ctx.lineTo(2000, 175);
    ctx.stroke();

    drawCamera();
    
    ctx.beginPath();
    ctx.moveTo(positionX - 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY - 20);
    ctx.lineTo(positionX + 10, positionY);
    ctx.lineTo(positionX - 10, positionY);
    
    ctx.closePath();
    ctx.stroke();
  }
</script>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。