我对此代码感到头疼。我试图寻找帮助，但没有:(
我想计算穿过画布高度的对象，如果超过5，它将算作游戏结束。
我是一个新手，如果编码太惨了，我很抱歉。我尝试在动画功能中执行此操作：
if (object.y<0){
gameOver();
}
但是它变成了5分或其他任何分数，然后将我带入了比赛。这是完整的代码：
<!doctype html>
<html>
<style type="text/css">
body {
text-align:center;
font-family:PeggyFont;
font-size:20px;
background-image:url('back.jpg');
}
h1 {
font-size:50px;
}
canvas {
border:5px solid #c3c3c3;
position:absolute;
top:120px;
left:70px;
}
#canvas{
z-index:1;
}
#canvas2{
z-index:0;
display:none;
}
#splash{
z-index:2;
}
#gameover{
z-index:3;
}
#score {
display: none;
position:absolute;
top:130px;
left:490px;
color:#087276;
z-index:4;
}
#timerDisplay {
display:none;
position:absolute;
top:150px;
left:490px;
color:#087276;
z-index:5;
}
#howto {
margin-left:700px;
margin-right:70px;
font-size:30px;
}
</style>
<title>Bubble Pop</title>
<body>
<div id="back">
<h1>Bubble Pop Game</h1>
<br><br><br><br><br><br><br>
<center>
<canvas id="canvas" height= "500" width="500">
</canvas>
<canvas id="canvas2" height= "500" width="500">
</canvas>
<canvas id="splash" height= "500" width="500">
</canvas>
<canvas id="gameover" height= "500" width="500">
</canvas>
<p id="score" >Score: 0</p>
<p id="timerDisplay"></p>
<div id="howto">
Pop the bubble as many as you can within 1 minute!! The <font style="color:blue">BLUE</font> one
has scored 2 and the <font style="color:red">RED</font> one has scored 1.<br>
Good Luck!
</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<script type="text/javascript" src="jq/jquery-2.1.0.min.js"></script>
</center>
</div>
<script>
$(function(){
$("#splash").show();
$("#canvas").hide();
$("#gameover").hide();
$("#score").hide();
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var splash = document.getElementById("splash");
var s = splash.getContext("2d");
var gameover = document.getElementById("gameover");
var gm = gameover.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var c2 = canvas2.getContext("2d");
var splashOffset=$("#splash").offset();
var gmOffset=$("#gameover").offset();
var canvasOffset=$("#canvas").offset();
var offsetX = canvasOffset.left+70;
var offsetY = canvasOffset.top+120;
var splashoffsetX = splashOffset.left;
var splashoffsetY = splashOffset.top;
var gmoffsetX = gmOffset.left+70;
var gmoffsetY = gmOffset.top+120;
var $score = $("#score");
var $timerDisplay = $("#timerDisplay");
var j = 0;
var k = 0;
//var active = true;
var active = false;
var spawnLineY = 500;
var spawnLineYtop = 0;
var spawnRate = 900;
var spawnRateOfDescent = 3;
var lastSpawn = -1;
var objects=[];
var rects=[];
var rects2=[];
var startTime = Date.now();
var g = s.createLinearGradient(0,0,0,500);
var g2 = gm.createLinearGradient(0,0,0,500);
var g3 = c2.createLinearGradient(0,0,0,500);
var image= new Image();
var image2= new Image();
var image3= new Image();
var image4= new Image();
var image5= new Image();
var image6= new Image();
var sound = new Audio();
var sound2 = new Audio();
sound.src = "backgame.ogg";
sound2.src = "collision2.wav";
//animate();
function spawnRandomObject(){
var t;
if (Math.random()<0.50){
t = "red";
} else {
t = "blue";
}
var object={
type:t,
x:Math.random()*(canvas.width-40)+20,
y:spawnLineY,
radius:20
}
objects.push(object);
}
function animate(){
//active=true;
sound.play();
var time=Date.now();
if(time>(lastSpawn+spawnRate)){
lastSpawn = time;
spawnRandomObject();
}
if (active){
webkitRequestAnimationFrame(animate);
}
c.clearRect(0,0,canvas.width,canvas.height);
//c.beginPath();
//c.moveTo(0,spawnLineY);
//c.lineTo(canvas.width,spawnLineY);
//c.stroke();
//c.beginPath();
//c.moveTo(0,spawnLineYtop);
//c.lineTo(canvas.width,spawnLineYtop);
//c.stroke();
var timeElapsed = startTime - Date.now() + 61000;
if (timeElapsed < 1000) {
gameOver();
}
var timeElapsed_second = Math.floor(timeElapsed/1000);
$timerDisplay.text("Time: "+timeElapsed_second);
for (var i=0;i<objects.length;i++){
var object = objects[i];
object.y=object.y-spawnRateOfDescent;
c.beginPath();
c.arc(object.x,object.y,object.radius,0,Math.PI*2);
c.closePath();
c.fillStyle=object.type;
c.fill();
//NOT WORKING
if (object.y<0){
gameOver();
}
}
}
function handleButtonClick(e){
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
for(var i=0;i<objects.length;i++){
var dx = parseInt(canvasMouseX-objects[i].x);
var dy = parseInt(canvasMouseY-objects[i].y);
var asd = dx*dx+dy*dy;
var hit = (dx*dx+dy*dy)<(objects[i].radius*objects[i].radius);
if (hit){
if (objects[i].type=="red"){
sound2.play();
j=j+1;
objects[i].x=objects[i].x+1000;
}
else {
sound2.play();
j=j+2;
objects[i].x=objects[i].x+1000;
}
}
$score.text("Score: "+j);
}
}
function gameOver(){
sound.pause();
active = false;
$("#gameover").show();
$("#canvas").hide();
}
$("#canvas").mousedown(function(e){handleButtonClick(e);});
g3.addColorStop(0,"#04a0b7");
g3.addColorStop(.3,"#04bfdb");
g3.addColorStop(.7,"#5beaff");
g3.addColorStop(1,"#cef9ff");
c2.fillStyle=g3;
c2.fillRect(0,0,canvas.width,canvas.height);
c2.beginPath();
image5.onload = function(){
c2.drawImage(image5, 0, 0, 125, 82);
//s.drawImage(image, 200, 0, 125, 82);
c2.drawImage(image5, 390, 0, 125, 82);
c2.drawImage(image5, -50, 200, 125, 82);
//s.drawImage(image, 150, 200, 125, 82);
//s.drawImage(image, 350, 200, 125, 82);
c2.drawImage(image5, 0, 400, 125, 82);
//s.drawImage(image, 200, 400, 125, 82);
c2.drawImage(image5, 400, 400, 125, 82);
}
image6.onload = function(){
//s.drawImage(image2, -100, 100, 125, 82);
//s.drawImage(image2, 100, 100, 125, 82);
//s.drawImage(image2, 300, 100, 125, 82);
c2.drawImage(image6, 320, 300, 125, 82);
//s.drawImage(image2, 100, 300, 125, 82);
//s.drawImage(image2, -100, 300, 125, 82);
}
image5.src='awan.png';
image6.src='awan2.png';
g.addColorStop(0,"#04a0b7");
g.addColorStop(.3,"#04bfdb");
g.addColorStop(.7,"#5beaff");
g.addColorStop(1,"#cef9ff");
s.fillStyle=g;
s.fillRect(0,0,canvas.width,canvas.height);
s.beginPath();
image.onload = function(){
s.drawImage(image, 0, 0, 125, 82);
//s.drawImage(image, 200, 0, 125, 82);
s.drawImage(image, 390, 0, 125, 82);
s.drawImage(image, -50, 200, 125, 82);
//s.drawImage(image, 150, 200, 125, 82);
//s.drawImage(image, 350, 200, 125, 82);
s.drawImage(image, 0, 400, 125, 82);
//s.drawImage(image, 200, 400, 125, 82);
s.drawImage(image, 400, 400, 125, 82);
}
image2.onload = function(){
//s.drawImage(image2, -100, 100, 125, 82);
//s.drawImage(image2, 100, 100, 125, 82);
//s.drawImage(image2, 300, 100, 125, 82);
s.drawImage(image2, 320, 300, 125, 82);
//s.drawImage(image2, 100, 300, 125, 82);
//s.drawImage(image2, -100, 300, 125, 82);
}
image.src='awan.png';
image2.src='awan2.png';
s.font="70px PeggyFont";
s.fillStyle ="#087276";
s.fillText("Bubble Pop",100,170);
var rect={
x:200,
y:300,
}
rects.push(rect);
for (var i=0;i<rects.length;i++){
var rect = rects[i];
s.beginPath();
s.fillRect(rect.x,rect.y,100,50);
s.fillStyle="#087276";
s.font = '25pt PeggyFont';
s.fillStyle ="#20d7b7";
s.fillText ('Play', 220, 338);
}
function Play(e){
splashMouseX=parseInt(e.clientX-splashoffsetX);
splashMouseY=parseInt(e.clientY-splashoffsetY);
for(var i=0;i<rects.length;i++){
var dx = parseInt(splashMouseX-rects[i].x);
var dy = parseInt(splashMouseY-rects[i].y);
if (dx>0&&dx<100&&dy>0&&dy<50){
$("#splash").hide();
$("#canvas").show();
$("#canvas2").show();
active = true;
$("#timerDisplay").show();
$("#score").show();
$("#miss").show();
animate();
}
}
}
$("#splash").mousedown(function(e){Play(e);});
g2.addColorStop(0,"#04a0b7");
g2.addColorStop(.3,"#04bfdb");
g2.addColorStop(.7,"#5beaff");
g2.addColorStop(1,"#cef9ff");
gm.fillStyle=g2;
gm.fillRect(0,0,canvas.width,canvas.height);
gm.beginPath();
image3.onload = function(){
gm.drawImage(image3, 0, 0, 125, 82);
//s.drawImage(image, 200, 0, 125, 82);
gm.drawImage(image3, 390, 0, 125, 82);
gm.drawImage(image3, -50, 200, 125, 82);
//s.drawImage(image, 150, 200, 125, 82);
//s.drawImage(image, 350, 200, 125, 82);
gm.drawImage(image3, 0, 400, 125, 82);
//s.drawImage(image, 200, 400, 125, 82);
gm.drawImage(image3, 400, 400, 125, 82);
}
image4.onload = function(){
//s.drawImage(image2, -100, 100, 125, 82);
//s.drawImage(image2, 100, 100, 125, 82);
//s.drawImage(image2, 300, 100, 125, 82);
gm.drawImage(image4, 320, 300, 125, 82);
//s.drawImage(image2, 100, 300, 125, 82);
//s.drawImage(image2, -100, 300, 125, 82);
}
image3.src='awan.png';
image4.src='awan2.png';
gm.font="70px PeggyFont";
gm.fillStyle ="#087276";
gm.fillText("Game Over",90,170);
var rect2={
x:190,
y:350,
}
rects2.push(rect2);
for (var i=0;i<rects2.length;i++){
gm.beginPath();
gm.fillRect(rect2.x,rect2.y,120,50);
gm.fillStyle="#087276";
gm.font = '25pt PeggyFont';
gm.fillStyle ="#20d7b7";
gm.fillText ('Restart', 195, 388);
}
function Restart(e){
gmMouseX=parseInt(e.clientX-gmoffsetX);
gmMouseY=parseInt(e.clientY-gmoffsetY);
for(var i=0;i<rects2.length;i++){
var dx = parseInt(gmMouseX-rects2[i].x);
var dy = parseInt(gmMouseY-rects2[i].y);
if (dx>0&&dx<120&&dy>0&&dy<50){
location.reload();
}
}
}
$("#gameover").click(function(e){Restart(e);});
});
</script>
</body>
JS小提琴链接：http://jsfiddle.net/yt7Zn/
最佳答案
你近了！
像这样调整：http://jsfiddle.net/m1erickson/5zp4M/
添加一个failCounter，它从0开始并随着每个新对象的失败而递增到5（object.y 当failCounter为5时，声明gameOver（）;
当气泡浮在画布上方（object.y 如果重新启动新游戏，请重置failCounter。
使用failCounter的示例代码：
// set the failure counter to zero at the beginning of the game (or when restarting)
var failCounter=0;
// add a property to object that indicates if this object is still in play
var object={
type:t,
x:Math.random()*(canvas.width-40)+20,
y:spawnLineY,
radius:20,
isInPlay:true,
}
// in the animation loop
// If the object is still in play (hasn't previously failed) and the object now fails
// then increment the failCounter and take this bubble out of play.
// If the failCounter reaches 5 then gameOver
if (object.isInPlay && object.y<0){
object.isInPlay=false;
if(++failCounter>=5){
gameOver();
}
}