Question

我在我的侧面滚动游戏中设置了一个点数系统。每次主要移动精灵触摸圆圈时，点计数器会添加几个点，并且该圆圈消失。在主精灵死亡并返回起始位置后，我需要帮助让硬币重新出现在原来的位置。这是JSFiddle。

 <!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="1000" height="1000"></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 = "#0095DD";
var circlex = "350";
var circley = "100";



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))
    {
        positionX = 50;
        deaths++;
    }

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

    if(positionX < 10 || positionX > 1000)
    velocityX *= -1;      

   if(positionX > 339 && positionX < 372 && positionY > 110 && positionY < 150)
    {
    points++;
    circlex = -10;
    circley = -10;
    }
}

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

function drawCircle() {
  ctx.beginPath();
    ctx.arc(circlex, circley, 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, 1000, 1000);
    drawCircle();
    drawSquare1();
    drawSquare2();
    drawSquare3();
    drawSquare4();
    drawSquare5();
    drawDeaths();
    drawPoints();
    ctx.beginPath();
    ctx.moveTo(0,175);
    ctx.lineTo(1000,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>

Answer 1

当玩家与它碰撞时，你可以简单地移动硬币/蓝点的位置。

if(positionX > 339 && positionX < 372 && positionY > 110 && positionY < 150)
{
  points++;
  circlex += 50;
}

但是，您应该更熟悉面向对象的编程并使用它，因为它非常适合游戏中的对象，如玩家和硬币。我不确定你对javascript中的对象了解多少，但你应该在javascript游戏中查看关于面向对象设计的this文章

Answer 2

你需要做两件事：

死亡后重置圆圈位置......

// 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))
{
    positionX = 50;
    deaths++;
    circlex = 350;
    circley = 100;
}

如果圈子不在那里，请确保不添加点数

if(positionX > 339 && positionX < 372 && positionY > 110 && positionY < 150 &&
        circlex != -10 && circley != -10)
{
    points++;
    circlex = -10;
    circley = -10;
}

你可以看到我已经更新了逻辑，这样只有移动了圈子并添加了点数，如果它不在其中，则消失了＃34;＆＃34;位置。

美好，有趣，小游戏:)）

使对象重新出现

2 个答案: