javascript - Try to implement shooting by bullets -
hello try implement shooting drawing bullets. created function shoot , called keyboard detection condition.... however, when press key shoot stopped , no shooting, no bullets....whats happening?! appreciated thanks.
<html> <head> <title>spaceman invaders</title> <script> window.onload = function() { var posx = 20; var posy = 0; var go_right = true; var go_down = false; var canvas = document.getelementbyid("screen"); context = canvas.getcontext("2d"); context2 = canvas.getcontext("2d"); var alien = function(x, y) { this.x = x; this.y = y; this.posx = 30 + x*30; this.posy = 90 + y*30; this.go_right = true; this.go_down = false; } function player() { this.x=0, this.y = 0, this.w = 20, this.h = 20; this.render = function (){ context.fillstyle = "orange"; context.fillrect(this.x, this.y, this.w, this.h); } } var x2=223; var y2=320; function shoot(){ context2.fillstyle = "white"; context2.fillrect = (x2, y2--, 5,10); context2.fillstyle = "yellow"; context2.fillrect = (x2, y2, 5,10); if (y2>=0) { timer=settimeout("shoot()", 5); } } var player = new player(); alien.prototype.move = function() { if (!this.go_down) { if(this.posx + (2-this.x) * 30 < 250 && this.go_right) { this.posx += 3; } else if(this.posx < 30 + this.x*30) { this.go_right = true; this.go_down = true; } else if(!this.go_right) { this.posx -= 3; } else { this.go_right = false; this.go_down = true; } } else { //if(posy <= 30) this.posy += 30; this.go_down = false; } } alien.prototype.draw = function(context) { if(this.x == 0) { context.fillstyle = "red"; } else if(this.x == 1) { context.fillstyle = "yellow"; } else { context.fillstyle = "blue"; } context.beginpath(); context.fillrect(this.posx, this.posy, 20 , 20); context.fill(); } var canvas = document.getelementbyid("screen"); context = canvas.getcontext("2d"); if (canvas.getcontext) { //init aliens array var aliens = []; for(var = 0; < 3; i++) { for(var j = 0; j < 3; j++) { aliens.push(new alien(j, i)); } } player.x=100; player.y= 480; setinterval( function() { context.fillstyle="black"; context.fillrect(0,0,canvas.width, canvas.height); /*context.fillstyle = "white"; context.fillrect(100, 460, 30 , 30);*/ player.render(); //move aliens & draw aliens for(var = 0; < 9; i++) { aliens[i].move(), aliens[i].draw(context); } }, 20); document.addeventlistener('keydown', function(event){ var key_press = string.fromcharcode(event.keycode); // alert(event.keycode + " | " + key_press); if (key_press == "d") { if (player.x >=(280)){ player.x=(280); } else { player.x +=3; } } else if (key_press=="a"){ if (player.x<0){ player.x=(0); } else {player.x -=3;} } else if (key_press="w") { //alert("pah-pah"); shoot(); } }); } }; </script> </head> <body> <canvas id="screen" width="300" height="500"/> </body> </html>
in shoot() function, you're setting fillrect parameters you're meaning pass fillrect().
function shoot(){ context2.fillstyle = "white"; //context2.fillrect = (x2, y2--, 5,10); -- bad line. correct: context2.fillrect(x2, y2--, 5,10); context2.fillstyle = "yellow"; //context2.fillrect = (x2, y2, 5,10); -- bad line. correct: context2.fillrect(x2, y2, 5,10); if (y2>=0) { timer=settimeout("shoot()", 5); } } has weird behavior, , there's lot improved , cleaned here, should on right track.
and future reference, if you're using chrome, open dev tools (ctrl/cmd + shift + j) , see error:
uncaught typeerror: property 'fillrect' of object #<canvasrenderingcontext2d> not function that clued me in know getting overwritten somewhere, know function of canvasrenderingcontext2d.
Comments
Post a Comment