Javascript 计算通过画布高度的浮动对象
我对这个代码感到头疼。我正在尝试搜索帮助，但没有：( 我想计算通过画布高度的对象，如果超过5，则视为游戏结束 我是个新手，如果编码太糟糕，我很抱歉。我尝试在动画功能中这样做：Javascript 计算通过画布高度的浮动对象,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我对这个代码感到头疼。我正在尝试搜索帮助，但没有：( 我想计算通过画布高度的对象，如果超过5，则视为游戏结束 我是个新手，如果编码太糟糕，我很抱歉。我尝试在动画功能中这样做： if (object.y<0){ gameOver(); } 如果（object.y你接近了 调整如下： 添加一个故障计数器，该计数器从0开始，每发生一次新的对象故障，它就会增加到5（object.ytry打开并发布链接这有助于人们测试你的代码。在这里，即使蓝色或红色的球没有到达最顶端，我似乎也能结束游戏。
if (object.y<0){
gameOver();
}
如果（object.y你接近了
调整如下：
- 添加一个
故障计数器
，该计数器从0开始，每发生一次新的对象故障，它就会增加到5（object.ytry打开并发布链接这有助于人们测试你的代码。在这里，即使蓝色或红色的球没有到达最顶端，我似乎也能结束游戏。我不是一个游戏程序员，但最简单的想法可能是，你可以检查对象的位置，每当它达到特定高度时，你可以增加变量的值（仅此目的）。当此变量变为5时，游戏结束。这就是我应该做的。我曾尝试过此操作，但当我玩它时，它总是计数为5，尽管它没有通过画布的顶部：（奇怪，只是我吗？我在浏览器中尝试，但不工作。我尝试使用小提琴，但无法玩它。）（我在IE11、Chrome34和FF中进行了测试，游戏在5个泡泡从画布上浮起后触发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>
// 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();
}
}