在我們的JavaScript遊戲中觸發下一個關卡？

我們正在爲我們的學校製作遊戲，但它非常簡單，但我們無法弄清楚如何讓它觸發下一個關卡。目前，我們有一個按鈕可以在完成關卡時載入一個新頁面，但顯然這種方法很容易作弊。我們想知道如何讓紅點（字符）到達頂盒時，下一級會加載。我將發佈一級以供參考。在我們的JavaScript遊戲中觸發下一個關卡？

<html> 
<head> 
<style> 
      canvas, img { 
      display:block; margin:1em auto; border:1px solid black; 
      } 
      canvas { 
      background:url(Clouds.png); 
      } 
     </style> 
</head> 
<body> 
<canvas id="canvas" style="border:1px solid #000"></canvas> 
<script> 
    (function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
    window.requestAnimationFrame = requestAnimationFrame; 
})(); 

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    width = 500, 
    height = 200, 
    player = { 
     x: width/2, 
     y: height - 15, 
     width: 5, 
     height: 5, 
     speed: 3, 
     velX: 0, 
     velY: 0, 
     jumping: false, 
     grounded: false 
    }, 
    keys = [], 
    friction = 0.8, 
    gravity = 0.3; 

var boxes = []; 

// dimensions 
boxes.push({ 
    x: 0, 
    y: 0, 
    width: 10, 
    height: height 
}); 
boxes.push({ 
    x: 0, 
    y: height - 2, 
    width: width, 
    height: 50 
}); 
boxes.push({ 
    x: width - 10, 
    y: 0, 
    width: 50, 
    height: height 
}); 

boxes.push({ 
    x: 120, 
    y: 10, 
    width: 80, 
    height: 80 
}); 
boxes.push({ 
    x: 170, 
    y: 50, 
    width: 80, 
    height: 80 
}); 
boxes.push({ 
    x: 220, 
    y: 100, 
    width: 80, 
    height: 80 
}); 
boxes.push({ 
    x: 270, 
    y: 150, 
    width: 40, 
    height: 40 
}); 

canvas.width = width; 
canvas.height = height; 

function update() { 
    // check keys 
    if (keys[38] || keys[32] || keys[87]) { 
     // up arrow or space 
     if (!player.jumping && player.grounded) { 
      player.jumping = true; 
      player.grounded = false; 
      player.velY = -player.speed * 2; 
     } 
    } 
    if (keys[39] || keys[68]) { 
     // right arrow 
     if (player.velX < player.speed) { 
      player.velX++; 
     } 
    } 
    if (keys[37] || keys[65]) { 
     // left arrow 
     if (player.velX > -player.speed) { 
      player.velX--; 
     } 
    } 

    player.velX *= friction; 
    player.velY += gravity; 

    ctx.clearRect(0, 0, width, height); 
    ctx.fillStyle = "black"; 
    ctx.beginPath(); 

    player.grounded = false; 
    for (var i = 0; i < boxes.length; i++) { 
     ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height); 

     var dir = colCheck(player, boxes[i]); 

     if (dir === "l" || dir === "r") { 
      player.velX = 0; 
      player.jumping = false; 
     } else if (dir === "b") { 
      player.grounded = true; 
      player.jumping = false; 
     } else if (dir === "t") { 
      player.velY *= -1; 
     } 

    } 

    if(player.grounded){ 
     player.velY = 0; 
    } 

    player.x += player.velX; 
    player.y += player.velY; 

    ctx.fill(); 
    ctx.fillStyle = "red"; 
    ctx.fillRect(player.x, player.y, player.width, player.height); 

    requestAnimationFrame(update); 
} 

function colCheck(shapeA, shapeB) { 
    // get the vectors to check against 
    var vX = (shapeA.x + (shapeA.width/2)) - (shapeB.x + (shapeB.width/2)), 
     vY = (shapeA.y + (shapeA.height/2)) - (shapeB.y + (shapeB.height/2)), 
     // add the half widths and half heights of the objects 
     hWidths = (shapeA.width/2) + (shapeB.width/2), 
     hHeights = (shapeA.height/2) + (shapeB.height/2), 
     colDir = null; 

    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision 
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { 
     // figures out on which side we are colliding (top, bottom, left, or right) 
     var oX = hWidths - Math.abs(vX), 
      oY = hHeights - Math.abs(vY); 
     if (oX >= oY) { 
      if (vY > 0) { 
       colDir = "t"; 
       shapeA.y += oY; 
      } else { 
       colDir = "b"; 
       shapeA.y -= oY; 
      } 
     } else { 
      if (vX > 0) { 
       colDir = "l"; 
       shapeA.x += oX; 
      } else { 
       colDir = "r"; 
       shapeA.x -= oX; 
      } 
     } 
    } 
    return colDir; 
} 

document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 

document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
}); 


window.addEventListener("load", function() { 
    update(); 
}); 
</script> 
<br> 
<center> 
<input type="button" name="next" value="Click me when finished! No cheating! ;)" onclick="location.href='level2.html';"> 
</center> 
<center> 
<input type="button" name="restart" value="Restart" onclick="location.href='javagame.html';"> 
</center> 
</body> 
</html>

來源

2014-02-26 user3357738

當然，一旦用戶看到下一級的名字叫做'level2.html'，也不會有什麼進入阻止他們' level3.html'，'level4.html'等直接放入瀏覽器。我不認爲有任何100％可靠的方法來防止人們在JavaScript遊戲中作弊，但是隨着用戶進步，單個頁面加載每個級別的數據可能是朝正確方向邁出的一步。 –

在您的更新功能中，您可以添加邏輯來檢查玩家是否處於與您的完成狀態相匹配的位置。然後在條件集location.href ='level2.html';

我假設條件是使用colCheck函數，將播放器和頂盒用作參數並尋找特定的返回值，這可以是您完成的練習。一般的代碼移動到一個新的水平會是什麼樣子：

if(playerReachedFinish()) { 
    location.href = 'level2.html'; 
}

來源

2014-02-26 20:55:20 Rich

在我們的JavaScript遊戲中觸發下一個關卡？

回答

相關問題