2015-12-14 246 views
-1

我遇到了以下问题:我创建了一个创建子弹的对象构造函数,当我尝试使用它时,事件是“控制台日志”对象正在返回未定义的控制台日志。我出于什么错误的想法。函数对象返回undefined

对不起,代码混乱,英文不好。并提前致谢。 编辑:如果你打算投票,请告诉我的原因,所以我可以知道如何改善。

var canvas, ctx, Player,players, intervalo,x,y, keyUp,keyDown,keyLeft,keyRight,rX,rY,rRadius,rAngle,hei, orbitals, Orbital, mouseX, mouseY, tiros, Bullet, bullets; 
 
keyUp = 87; keyDown = 83; keyRight = 68; keyLeft = 65; 
 
hei = 0; 
 
test = 0; tiros = 0; 
 
function load(){ 
 
\t canvas = document.getElementById('box'); 
 
\t ctx = canvas.getContext('2d'); 
 
\t ctx.lineWidth = 3; 
 
\t function player(){ 
 
\t \t this.x = canvas.width/2; 
 
\t \t this.y = canvas.height/2; 
 
\t \t this.speed = 2; 
 
\t \t this.width = 10; 
 
\t \t this.height = 10; 
 
\t \t 
 
\t \t this.up = false; 
 
\t \t this.down = false; 
 
\t \t this.left = false; 
 
\t \t this.right = false; 
 
\t } 
 
\t function orbital(){ 
 
\t \t this.x = x; 
 
\t \t this.y = y; 
 
\t \t this.width = 3; 
 
\t \t this.height = 3; 
 
\t \t this.radius = 20; 
 
\t \t this.angle = hei; 
 
\t \t this.speed = 0; 
 
\t } 
 
\t Orbital = new Array(); 
 
\t for (var i = 0;i < 10; i++){ 
 
\t \t Orbital.push(new orbital()) 
 
\t \t orbitals = Orbital[i]; 
 
\t \t hei += 10; 
 
\t \t orbitals.angle = hei; 
 
\t } 
 
\t Player = new Array(); 
 
\t Player.push(new player()) 
 
\t players = Player[0]; 
 
\t window.addEventListener("keydown", checkKeyDown, false); 
 
\t function checkKeyDown(e) { 
 
\t \t if (event.keyCode == keyUp){ 
 
\t \t \t players.up = true; 
 
\t \t \t console.log("Up key is pressed"); 
 
\t \t } else if (event.keyCode == keyDown){ 
 
\t \t \t players.down = true; 
 
\t \t \t console.log("Down key is pressed"); 
 
\t \t } else if (event.keyCode == keyLeft){ 
 
\t \t \t players.left = true; 
 
\t \t \t console.log("Left key is pressed"); 
 
\t \t } else if (event.keyCode == keyRight){ 
 
\t \t \t players.right = true; 
 
\t \t \t console.log("Right key is pressed"); 
 
\t \t } 
 
\t } 
 
\t window.addEventListener("keyup", checkKeyUp, false); \t 
 
\t function checkKeyUp(e){ 
 
\t \t if (event.keyCode == keyUp){ 
 
\t \t \t players.up = false; 
 
\t \t \t console.log("Up key is released"); 
 
\t \t } else if (event.keyCode == keyDown){ 
 
\t \t \t players.down = false; 
 
\t \t \t console.log("Down key is released"); 
 
\t \t } else if (event.keyCode == keyLeft){ 
 
\t \t \t players.left = false; 
 
\t \t \t console.log("Left key is released"); 
 
\t \t } else if (event.keyCode == keyRight){ 
 
\t \t \t players.right = false; 
 
\t \t \t console.log("Right key is released"); 
 
\t \t } 
 
\t } 
 
\t document.onmousemove = mouseMove;//Detectando posição do mouse; 
 
\t function mouseMove(e) { 
 
\t \t e = e || window.event 
 
\t \t mouseX = e.pageX; 
 
\t \t mouseY = e.pageY; 
 
\t \t document.getElementById('demo').innerHTML = mouseX + " " + mouseY; 
 
\t } 
 
    //Here is where the bullet begins: 
 
\t function bullet(){ 
 
\t \t this.x = players.x; 
 
\t \t this.y = players.y; 
 
\t \t this.width = 5; 
 
\t \t this.height = 5; 
 
\t \t this.speed = 20; 
 
\t \t var dX = mouseX - players.x; 
 
\t \t var dY = mouseY - players.y; 
 
\t \t var distance = Math.sqrt(dX*dX + dY*dY); 
 
\t \t this.speedX = (dX/distance) * 10; 
 
\t \t this.speedY = (dY/distance) * 10; 
 
\t } 
 
\t Bullet = new Array(); 
 
\t canvas.onmousedown = function() { 
 
     Bullet.push(new bullet()) 
 
\t \t tiros++; 
 
\t \t bullets = Bullet[tiros]; 
 
\t \t document.getElementById('demo2').innerHTML = tiros; 
 
    }; 
 
} 
 
function play(){ 
 
\t intervalo = setInterval(animate, 1000/60); 
 
} 
 
function animate(){ 
 
\t ctx.clearRect(0,0,canvas.width,canvas.height);// Os if's tem q estar em uma ordem específica onde o if que detecta o movimento tem q estar antes do if q detecta a colisão com o muro. 
 
\t //Key detection, that makes the player move. 
 
\t if (players.up){ 
 
\t \t players.y -= players.speed; 
 
\t } 
 
\t if (players.down){ 
 
\t \t players.y += players.speed; 
 
\t } 
 
\t if (players.right){ 
 
\t \t players.x += players.speed; 
 
\t } 
 
\t if (players.left){ 
 
\t \t players.x -= players.speed; 
 
\t } 
 
\t // End 
 
\t //Detecção de colisão no muro 
 
\t if (players.y < 50){ 
 
\t \t players.y += players.speed; 
 
\t } 
 
\t if (players.y > canvas.height - players.height - 50){ 
 
\t \t players.y -= players.speed; 
 
\t } 
 
\t if (players.x < 50){ 
 
\t \t players.x += players.speed; 
 
\t } 
 
\t if (players.x > canvas.width - players.width - 50){ 
 
\t \t players.x -= players.speed; 
 
\t } 
 
\t //end 
 
\t ctx.fillStyle = "brown"; 
 
\t ctx.beginPath(); 
 
\t ctx.moveTo(0,0); 
 
\t ctx.lineTo(50,50); 
 
\t ctx.moveTo(0,500); 
 
\t ctx.lineTo(50,450); 
 
\t ctx.moveTo(700,0); 
 
\t ctx.lineTo(650,50); 
 
\t ctx.moveTo(700,500); 
 
\t ctx.lineTo(650,450); 
 
\t ctx.strokeRect(50,50,600,400); 
 
\t ctx.stroke(); 
 
\t angleToTurn = -Math.atan2((mouseX-15) - players.x, (mouseY-15) - players.y)*(180/Math.PI);//Pega a posição do players.x e do mouse para criar o angulo de movimento; 
 
\t for (var z = 0; z < Orbital.length; z++){ 
 
\t \t ctx.fillStyle = "red"; 
 
\t \t orbitals = Orbital[z]; 
 
\t \t orbitals.angle = angleToTurn+85; 
 
\t \t orbitals.x = players.x+(orbitals.radius*Math.cos(orbitals.angle*(Math.PI/180)))+(players.width/2)-2; 
 
\t \t orbitals.y = players.y+(orbitals.radius*Math.sin(orbitals.angle*(Math.PI/180)))+(players.height/2)-2; 
 
\t \t if (orbitals.angle > 360){ 
 
\t \t \t orbitals.angle = 0; 
 
\t \t } 
 
\t \t ctx.fillRect(orbitals.x,orbitals.y,orbitals.width,orbitals.height); 
 
\t } 
 
    //Here is the part that returns undefined at the console log 
 
\t if (tiros >= 1){ 
 
\t \t bullets.x += bullets.speedX; 
 
\t \t bullets.y += bullets.speedY; 
 
\t \t document.getElementById('demo2').innerHTML = "if"; 
 
\t \t ctx.fillRect(bullets.x,bullets.y,bullets.width,bullets.height); 
 
\t } 
 
\t ctx.fillStyle = "black"; 
 
\t ctx.fillRect(players.x,players.y,players.width,players.height); 
 
}
<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/estilo.css"> 
 
\t \t <script src="js/main.js"></script> 
 
\t </head> 
 
\t <body onload="load()"> 
 
\t \t <canvas id="box" width="700" height="500"></canvas> 
 
\t \t <button onclick="play()">Go</button> 
 
\t \t <h1 id="demo">Teste</h1> 
 
\t \t <h1 id="demo2"></h1> 
 
\t </body> 
 
</html>

+0

的'泰罗斯++'和'子弹=子弹交换顺序[泰罗斯]' –

回答

0

的问题看起来是tiros正在被使用,当它应该是前后递增。尝试:

canvas.onmousedown = function() { 
     Bullet.push(new bullet()) 
     bullets = Bullet[tiros++]; 
     document.getElementById('demo2').innerHTML = tiros; 
    }; 
+0

是啊,它的工作原理,谢谢:) –

+0

很乐意帮忙!如果这个或任何答案已解决您的问题,请考虑通过点击复选标记来接受它。这向更广泛的社区表明,您已经找到了解决方案,并为答复者和您自己提供了一些声誉。但是,没有义务这样做。快乐的编码! – TAGraves

+0

是的,我只是在等,它说我需要等3分钟才能接受答案。再次感谢你 :) –