Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm having trouble in the "Bullet.prototype.draw = function ()" section of this code below. I'm trying to fix it so that I can shoot more at a time instead of just one bullet like it is now. Thus, what could I add to my code below to make that work. I wrote a comment below in the section that I need help in (i.e. the "Bullet.prototype.draw = function" part), so that the part I need help in could be easier to find. Thanks.

      <title>HE</title>

<body style="background:#808080;">
        <br>

        <canvas id="canvasBg" width="800px" height="500px" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>

        <canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>

        <canvas id="canvasBullet" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>


<script>


var isPlaying = false;
var requestAnimframe = window.requestAnimationFrame ||
                                             window.webkitRequestAnimationFrame ||
                                             window.mozRequestAnimationFrame ||
                                             window.msRequestAnimationFrame ||
                                             window.oRequestAnimationFrame;



var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');



var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1;  Man1 = new Man();


var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');

//I think is might be where the error might be (according to when I ran this as an "hta" file).
//but I'm not sure. I haven't really seen anything written in JavaScript like this yet (since
//I'm new to the language too. So, I don't know if this is an error or not. But, it might be 
    //this "var bullets = new List<Bullet>();" part.

var bullets = new List<Bullet>(); 


var imgSprite = new Image();
imgSprite.src = 'SpritesI.png';
imgSprite.addEventListener('load',init,false);

function init() {

        drawBg();
        startLoop();
        document.addEventListener('keydown',checkKeyDown,false);
        document.addEventListener('keyup',checkKeyUp,false);
}

function startLoop(){
        isPlaying = true;
        loop();
}


function stopLoop(){
        isPlaying = false;

}


function loop() {   
         if (isPlaying === true){
                     Man1.draw();

                     //specifically the "bullets.toArray();" part might be undefined but I
                     //don't know for sure.

                     var tempBullets = bullets.toArray(); 
                     for (var i = 0; i < tempBullets.length; i++)
                     {
                        tempBullets[i].draw(); 
                     }
                     requestAnimframe(loop);
         }

}

function drawBg() {
        var srcX = 0;
        var srcY = 0;
        var drawX = 0;
        var drawY = 0;
        ctxBg.drawImage(imgSprite,srcX,srcY,800,500,drawX,drawY,800,500);
}


function clearctxBg() {
         ctxBg.clearRect(0,0,800,500);
} 

function Man() {
        this.srcX = 10;
        this.srcY = 540;
        this.width = 40;
        this.height = 115;  
        this.drawX = 100;
        this.drawY = 260;
        this.noseX = this.drawX + 30;
        this.noseY = this.drawY + 560;
        this.speed = 10;
        this.actualFrame = 1;
        this.speed = 2;
        this.isUpKey = false;
        this.isRightKey = false;
        this.isDownKey = false;
        this.isLeftKey = false;
        this.isSpacebar = false;
        this.isRight = false;
        this.isLeft = false; 
}

Man.prototype.draw = function () {
        clearCtxMan();
        this.updateCoors();
        this.checkDirection();
        this.noseX = this.drawX + 100;
        this.noseY = this.drawY + 30;

        ctxMan.drawImage(imgSprite,this.srcX,this.srcY+this.height*this.actualFrame,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        }; //careful

Man.prototype.updateCoors = function(){

        this.leftX = this.drawX;
        this.rightX = this.drawX + this.width;
        this.topY = this.drawY;
        this.bottomY = this.drawY + this.height;


}


Man.prototype.checkDirection = function () {

        if (this.isUpKey && this.topY > 240){
                this.drawY -= this.speed;

        }
        if (this.isRightKey && this.rightX < 800) {
                this.drawX += this.speed;
                this.isRight = true;
                this.isLeft = false;


        }
        if (this.isDownKey && this.bottomY < 500){
                this.drawY += this.speed;


        }
        if (this.isLeftKey && this.leftX > 0) {
                this.drawX -= this.speed;
                this.isRight = false;
                this.isLeft = true;

        }


        if (this.isRightKey && this.rightX < 800) {

                 if (this.actualFrame > 0) {
                         this.actualFrame = 0;
                    }
        else {
            this.actualFrame++;
        }
}

        if (this.isLeftKey) {

                 if (this.actualFrame > 2) {
                         this.actualFrame = 2;
                    }
        else {
            this.actualFrame++;
        }
}


};


function checkKeyDown(e) {


        var keyID = e.keyCode || e.which;
        if (keyID === 38) { //up arrow or W key
                Man1.isUpKey = true;
                e.preventDefault();
        }
        if (keyID === 39 ) { //right arrow or D key
                Man1.isRightKey = true;
                e.preventDefault();
        }
        if (keyID === 40 ) { //down arrow or S key
                Man1.isDownKey = true;
                e.preventDefault();
        }
        if (keyID === 37 ) { //left arrow or A key
                Man1.isLeftKey = true;
                e.preventDefault();
        }

        if (keyID === 32  ) { //spacebar
                Man1.isSpacebar = true;
                var b = new Bullet();
                b.isShootingRight = man.isRight;
                b.isShottingLeft = man.isLeft;                
                bullets.add(b);
                e.preventDefault();
        }


}


function checkKeyUp(e) {
        var keyID = e.keyCode || e.which;
        if (keyID === 38 ) { //up arrow or W key
                Man1.isUpKey = false;
                e.preventDefault();
        }
        if (keyID === 39 ) { //right arrow or D key
                Man1.isRightKey = false;

                e.preventDefault();
        }
        if (keyID === 40 ) { //down arrow or S key
                Man1.isDownKey = false;
                e.preventDefault();
        }
        if (keyID === 37 ) { //left arrow or A key
                Man1.isLeftKey = false;

                e.preventDefault();
        }

        if (keyID === 32 ) { //Spacebar

                Man1.isSpacebar = false;
                e.preventDefault();
        }

}


function clearCtxMan() {
         ctxMan.clearRect(0,0,800,500);

}


function Bullet() {
        this.srcX = 430;
        this.srcY = 545;
        this.width = 20;
        this.height = 25;
        this.drawX = Man1.drawX;
        this.drawY = Man1.drawY +50;
        this.isSpacebar = false;
        this.isRightKey = false;
        this.isLeftKey = false;
        this.isRight = false;
        this.isLeft = false;
        this.isShootingRight = false;
        this.isShootingLeft = false;
}

//Here is where I'm having trouble. Now, it only shoots 1 bullet, but I want to shoot more
//bullets at a time. Thus, what do I add to this code to do that?


Bullet.prototype.draw = function () {

        clearCtxBullet();


        ctxBullet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); // I grabbed this line out from below


            if (this.isShootingRight){

                this.drawX = this.drawX + 2;


            }

            if (this.isShootingLeft){

                this.drawX = this.drawX - 2;


            }


            if (this.drawX > 800){

                bullets.remove(this);


            }

            if (this.drawX < -20){

                bullets.remove(this);


            }



}; 




    function clearCtxBullet() {
             ctxBullet.clearRect(0,0,800,500);

    }

    </script>


    <style>
    .top{
            position: absolute;
            top: 4px;
            left: 10px;
            color:black;
    }

    .top2{
            position: absolute;
            top: 60px;
            left: 10px;
            color:black;
    }


    </style>

        <div class="top">
                        <p><font face="arial" color="black" size="4"><b>Henry's Game</b><font/><p/> 
                    <p><font face="arial" color="black" size="3">

                                Below is a game featuring me. The game won't work in Internet Explorer (I wish it did). 
                                Firefox might take a little while to load but it'll still work. I'm not done with it yet.
                                The game is not going anywhere now, 
                <font/><p/>      

        </div>      


                <div class="top2">

                    <p><font face="arial" color="black" size="3">
                                         but it's something else to play around with until I get done with it.
                <font/><p/>      

        </div>      
share|improve this question
    
Hey Henry, if you want to update the source code, do so in your question, not in the supplied answer. You're welcome to update the source code in your question at will. Then you can leave a comment for the person that supplied the answer, directing them to your updates. Thanks. –  Byte56 Jul 18 '12 at 22:19
    
Hey, why are you using three canvases? If anything, rendering a big background picture would only be faster using the DOM, if that's what you're trying to achieve. –  akled Jul 18 '12 at 23:07
    
It's all based on a tutorial I got off of youtube. That's actually where I get all of my information from (even though I think the one who is making the tutorial is making things harder and more confusing than need be, but I don't know since I'm beginning. Here's the link: youtube.com/… –  Henry Jul 18 '12 at 23:24
add comment

1 Answer

up vote 2 down vote accepted

You have code here:

    if (Bullet1.isShootingLeft || Bullet1.isShootingRight) {

            Man1.isSpacebar = false;
    }

which disables a second shot from firing, as your game so far only works with one bullet (without this code, the 'old' bullet would disappear and the 'new' bullet would appear). Instead, try implementing an array to hold new bullets, instead of limiting yourself to only one.

(Though you may want to implement a cooldown on firing, otherwise space could be held for an extremely rapid fire)

EDIT: Quite a few changes to the code had to be made... As i havn't used javascript or HTML5 before, i couldn't really test all of this, though it should be fine. I commented out lines of code instead of deleting them, and tried to point out where i modified stuff.

    <title>HE</title>

<body style="background:#808080;">
        <br>

        <canvas id="canvasBg" width="800px" height="500px" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>

        <canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>

        <canvas id="canvasBullet" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>


<script>


var isPlaying = false;
var requestAnimframe = window.requestAnimationFrame ||
                                             window.webkitRequestAnimationFrame ||
                                             window.mozRequestAnimationFrame ||
                                             window.msRequestAnimationFrame ||
                                             window.oRequestAnimationFrame;



var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');



var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1;  Man1 = new Man();


var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');
//var Bullet1; Bullet1 = new Bullet();
var bullets = new List<Bullet>(); //here we create an array of bullets instead of a single one


var imgSprite = new Image();
imgSprite.src = 'SpritesI.png';
imgSprite.addEventListener('load',init,false);

function init() {

        drawBg();
        startLoop();
        document.addEventListener('keydown',checkKeyDown,false);
        document.addEventListener('keyup',checkKeyUp,false);
}

function startLoop(){
        isPlaying = true;
        loop();
}


function stopLoop(){
        isPlaying = false;

}


function loop() {   
         if (isPlaying === true){
                     Man1.draw();
                     //Bullet1.draw(); 
                     var tempBullets = bullets.toArray(); //creating a temporary array to store the bullets means that we can freely modify the 'bullets' list even during the drawing of bullets, without any issues.
                     for (var i = 0; i < tempBullets.length; i++)
                     {
                        tempBullets[i].draw(); //Here we are looping through all the bullets and drawing each of them
                     }
                     requestAnimframe(loop);
         }

}

function drawBg() {
        var srcX = 0;
        var srcY = 0;
        var drawX = 0;
        var drawY = 0;
        ctxBg.drawImage(imgSprite,srcX,srcY,800,500,drawX,drawY,800,500);
}


function clearctxBg() {
         ctxBg.clearRect(0,0,800,500);
} 

function Man() {
        this.srcX = 10;
        this.srcY = 540;
        this.width = 40;
        this.height = 115;  
        this.drawX = 100;
        this.drawY = 260;
        this.noseX = this.drawX + 30;
        this.noseY = this.drawY + 560;
        this.speed = 10;
        this.actualFrame = 1;
        this.speed = 2;
        this.isUpKey = false;
        this.isRightKey = false;
        this.isDownKey = false;
        this.isLeftKey = false;
        this.isSpacebar = false;
        this.isRight = false;
        this.isLeft = false; 
}

Man.prototype.draw = function () {
        clearCtxMan();
        this.updateCoors();
        this.checkDirection();
        this.noseX = this.drawX + 100;
        this.noseY = this.drawY + 30;

        ctxMan.drawImage(imgSprite,this.srcX,this.srcY+this.height*this.actualFrame,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        }; //careful

Man.prototype.updateCoors = function(){

        this.leftX = this.drawX;
        this.rightX = this.drawX + this.width;
        this.topY = this.drawY;
        this.bottomY = this.drawY + this.height;


}


Man.prototype.checkDirection = function ()
{
        if (this.isUpKey && this.topY > 240){
                this.drawY -= this.speed;

            //if (!Bullet1.isShootingRight && !Bullet1.isShootingLeft){      DON'T NEED THESE
            //    Bullet1.drawY -= this.speed;
            //}   
        }
        if (this.isRightKey && this.rightX < 800) {
                this.drawX += this.speed;
                this.isRight = true;
                this.isLeft = false;

            //if (!Bullet1.isShootingRight && !Bullet1.isShootingLeft){      DON'T NEED THESE       
            //    Bullet1.drawX += this.speed;

            //}
        }
        if (this.isDownKey && this.bottomY < 500){
                this.drawY += this.speed;

            //if (!Bullet1.isShootingRight && !Bullet1.isShootingLeft){      DON'T NEED THESE       
            //    Bullet1.drawY += this.speed;

            //}   

        }
        if (this.isLeftKey && this.leftX > 0) {
                this.drawX -= this.speed;
                this.isRight = false;
                this.isLeft = true;
            //if (!Bullet1.isShootingRight && !Bullet1.isShootingLeft){      DON'T NEED THESE       
            //    Bullet1.drawX -= this.speed;
            //}       
        }


        if (this.isRightKey && this.rightX < 800) {

                 if (this.actualFrame > 0) {
                         this.actualFrame = 0;
                    }
        else {
            this.actualFrame++;
        }
}

        if (this.isLeftKey) {

                 if (this.actualFrame > 2) {
                         this.actualFrame = 2;
                    }
        else {
            this.actualFrame++;
        }
}


};


function checkKeyDown(e) {


        var keyID = e.keyCode || e.which;
        if (keyID === 38) { //up arrow or W key
                Man1.isUpKey = true;
                e.preventDefault();
        }
        if (keyID === 39 ) { //right arrow or D key
                Man1.isRightKey = true;
                e.preventDefault();
        }
        if (keyID === 40 ) { //down arrow or S key
                Man1.isDownKey = true;
                e.preventDefault();
        }
        if (keyID === 37 ) { //left arrow or A key
                Man1.isLeftKey = true;
                e.preventDefault();
        }

        if (keyID === 32  ) { //spacebar
                Man1.isSpacebar = true;
                var b = new Bullet();
                b.isShootingRight = man.isRight;
                b.isShottingLeft = man.isLeft;                    //I've implemented bullet firing here.
                bullets.add(b);
                e.preventDefault();
        }

        //if (Bullet1.isShootingLeft || Bullet1.isShootingRight) {      DON'T NEED THIS
        //
        //        Man1.isSpacebar = false;
        //}
}


function checkKeyUp(e) {
        var keyID = e.keyCode || e.which;
        if (keyID === 38 ) { //up arrow or W key
                Man1.isUpKey = false;
                e.preventDefault();
        }
        if (keyID === 39 ) { //right arrow or D key
                Man1.isRightKey = false;

                e.preventDefault();
        }
        if (keyID === 40 ) { //down arrow or S key
                Man1.isDownKey = false;
                e.preventDefault();
        }
        if (keyID === 37 ) { //left arrow or A key
                Man1.isLeftKey = false;

                e.preventDefault();
        }

        if (keyID === 32 ) { //Spacebar

                Man1.isSpacebar = false;
                e.preventDefault();
        }

}


function clearCtxMan() {
         ctxMan.clearRect(0,0,800,500);

}


function Bullet() {
        this.srcX = 430;
        this.srcY = 545;
        this.width = 20;
        this.height = 25;
        this.drawX = Man1.drawX;
        this.drawY = Man1.drawY +50;
        this.isSpacebar = false;
        this.isRightKey = false;
        this.isLeftKey = false;
        this.isRight = false;
        this.isLeft = false;
        this.isShootingRight = false;
        this.isShootingLeft = false;
}

//Here is where I'm having trouble. Now, it only shoots 1 bullet, but I want to shoot more
//bullets at a time. Thus, what do I add to this code to do that?


Bullet.prototype.draw = function () {

        clearCtxBullet();


        ctxBullet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); // I grabbed this line out from below

        /* ALL OF THIS CAN GO!!!
    for(var i = 0; i < 1; i++) {
        if (this.isShootingRight || this.isShootingLeft){   
        ctxBullet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        }



            if (Man1.isRight && Man1.isSpacebar){

                this.isShootingRight = true;

            }

            if (Man1.isLeft && Man1.isSpacebar){

                this.isShootingLeft = true;

            }*/

            if (this.isShootingRight){

                this.drawX = this.drawX + 2;


            }

            if (this.isShootingLeft){

                this.drawX = this.drawX - 2;


            }


            if (this.drawX > 800){

                bullets.remove(this);
                //this.isShootingRight = false;        THESE LINES ARE IRRELEVANT, THE BULLET IS BEING DELETED
                //this.drawX = Man1.drawX;
                //this.drawY = Man1.drawY + 50;

            }

            if (this.drawX < -20){

                bullets.remove(this);
                //this.isShootingLeft = false;        THESE LINES ARE IRRELEVANT, THE BULLET IS BEING DELETED
                //this.drawX = Man1.drawX;
                //this.drawY = Man1.drawY + 50;

            }

        }

}; 




    function clearCtxBullet() {
             ctxBullet.clearRect(0,0,800,500);

    }

    </script>


    <style>
    .top{
            position: absolute;
            top: 4px;
            left: 10px;
            color:black;
    }

    .top2{
            position: absolute;
            top: 60px;
            left: 10px;
            color:black;
    }


    </style>

        <div class="top">
                        <p><font face="arial" color="black" size="4"><b>Henry's Game</b><font/><p/> 
                    <p><font face="arial" color="black" size="3">

                                Below is a game featuring me. The game won't work in Internet Explorer (I wish it did). 
                                Firefox might take a little while to load but it'll still work. I'm not done with it yet.
                                The game is not going anywhere now, 
                <font/><p/>      

        </div>      


                <div class="top2">

                    <p><font face="arial" color="black" size="3">
                                         but it's something else to play around with until I get done with it.
                <font/><p/>      

        </div>      
share|improve this answer
    
The part with "if (Bullet1.isShooting || Bullet1.isShootingRight){}", etc. was written so that when the "Man" character is facing left while the bullet is going right (or vice versa) and the Spacebar is hit at the same time, it was put there so that the bullet wouldn't stop going in whichever direction it was headed. I'm sorry. I admit, I don't know how to make an array for the bullet. –  Henry Jul 18 '12 at 7:37
    
kirupa.com/html5/arrays_javascript.htm#.UAZpLfUZhj4 Try reading that –  Randomman159 Jul 18 '12 at 7:43
    
Yes, I was meaning I don't know how to include the array with what I have. –  Henry Jul 18 '12 at 8:15
    
(Actually... list instead of array).. I'll edit my answer –  Randomman159 Jul 18 '12 at 9:42
    
I ran the code above, but it didn't work. I think there might be an error in it. –  Henry Jul 18 '12 at 11:55
show 6 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.