オブジェクトを再現する

私はサイドスクローラゲームでポイントシステムをセットアップしました。メインのスプライトによってサークルがタッチされるたびに、ポイントカウンタにいくつかのポイントが追加され、そのサークルは消えます。メインスプライトが死んで出発位置に戻ると、元の場所にコインが再び現れるように助けが必要です。こちらは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>

出典

2016-03-18 Mit

コイン/ブルーの点の位置は、プレーヤーが衝突したときに単純に移動できます。

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

ただし、オブジェクト指向プログラミングに慣れてくると、それは、そのような選手やコインなどのゲーム内のオブジェクトのための理想的であるとしてこれを使用する必要があります。

は、後円部の位置をリセットします。

出典

2016-03-18 19:43:31 Jackbid

私は間違いなくそれをチェックアウトします！ – Mit

次の2つのことを行う必要があり、私はあなたがJavaScriptでのオブジェクトを知ってどのくらいわからないんだけど、あなたはjavascriptのゲーム内でオブジェクト指向設計上のthisの記事をチェックアウトする必要があります死...

// 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; 
}

あなたは、私が更新されたことがわかりますそれが「消えた」場所にない場合は、サークルが移動され、ポイントが追加されるようなロジックです。

ニース、楽しい、小さなゲーム:)

出典

2016-03-18 19:46:43 ManoDestra

ありがとう！私はちょうどJSを学び始めたので、これらの単純な概念とその背後にある論理を理解し始めました。これは1トンの助けとなりました。 – Mit

オブジェクトを再現する

答えて

関連する問題