小贝子编程

为 HTML 游戏制作移动"camera"



我正在使用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>

修改了您的代码。我希望它能有所帮助。

<!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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium