How to create divs with separate classes in jQuery/JavaScript?

Question

I'm trying to make a shooter type game for a school project and I'm running in to trouble creating multiple divs with different classes associated with them. I'm a pretty new programmer so any help would be appreciated.

$(document).ready(function(){
var targetColor;
var randLocation;
var laserCounter = 0;
var targetCounter = 0; //creates multiple laser objects that can be accessed separately through an array
var laser = [];//making a different variable to animate lasers individually
var laserX;
var targetX;
var radians;
var randColor;

//pointer points in direction of cursor
function mouse(e){

    var pointerOffset = $('.pointer').offset();
    //calculates x and y offsets from the center of the div
    pointer_x = (pointerOffset.left) + ($('.pointer').width()/2);
    pointer_y = (pointerOffset.top) + ($('.pointer').height()/2);
    var mouse_x = e.pageX;
    var mouse_y = e.pageY;
    radians = Math.atan2(mouse_x - pointer_x, mouse_y - pointer_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90; 
    $('.pointer').css('transform', 'rotate(' + degree + 'deg)');//transforms div certain degrees calculated based on degrees from pointer to div
};

function targetSpawn(){//spawning targets of random color

    //random color picker
    randColor = Math.floor((Math.random() * 4) + 1);
    switch(randColor){
        case 1:
            targetColor = 'red';
            break;
        case 2:
            targetColor = 'yellow';
            break;
        case 3:
            targetColor = 'blue';
            break;
        case 4:
            targetColor = 'green';
            break;
    };

    randLocation = Math.floor((Math.random() * 1600) + 1);

    $('.container').append('<div class="target"></div>'); //adds a div
    $('.target').offset({top: -100, left: randLocation});

    $('.target').css('background-color', targetColor);

    $('.target').animate({top: "+800px"}, 10000);

};

$(document).keypress(function(){

    $('.container').append('<div class="laser" + laserCounter></div>'); //adds a div
    $('.laser').offset({top: pointer_y, left: pointer_x});//starts the laser at the pointer

    x = (100 / Math.tan(radians));
    $('.laser').animate({left: "+" + x + "px", top: "+100px"}, 1000);//moves the lasers to that angle

    $('.score').append(laserCounter);

    laserCounter++;//changes the next div that will be added

});


$(document).mousemove(mouse);//does function point the pointer
$(document).click(targetSpawn);//for testing the random div spawn



});

I am planning on only using HTML CSS JS and jQuery.

Baruch · Accepted Answer · 2015-10-06 21:08:19Z

1

I'm guessing this is where the issue is:

$('.container').append('<div class="laser" + laserCounter></div>'); //adds a div

Change it to

$('.container').append('<div class="laser"' + laserCounter +'></div>'); //adds a div

This is will make it so the first div will have a class "laser0" (since default value is 0), second div will be "laser1" etc.

answered Oct 6, 2015 at 21:08

Baruch

2,4481 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alvaro Flaño Larrondo Over a year ago

Be careful with the double quotes position. It should be '<div class="laser' + laserCounter +'"></div>' for the number be part of the class name.

Alvaro Flaño Larrondo · Accepted Answer · 2015-10-06 21:24:51Z

0

Not sure how to reproduce your problem, but here is a working JSFiddle. I edited mostly the targetSpawn() function, because after creating a new .target you were modifying every target instead of only the newly created.

function targetSpawn(){//spawning targets of random color

    //random color picker
    randColor = Math.floor((Math.random() * 4) + 1);
    switch(randColor){
        case 1:
            targetColor = 'red';
            break;
        case 2:
            targetColor = 'yellow';
            break;
        case 3:
            targetColor = 'blue';
            break;
        case 4:
            targetColor = 'green';
            break;
    };

    randLocation = Math.floor((Math.random() * 600) + 1);

    var new_target = $('<div class="target"></div>'); 

    $('.container').append(new_target); //adds a div
    $(new_target).offset({top: -30, left: randLocation});

    $(new_target).css('background-color', targetColor);

    $(new_target).animate({top: "+800px"}, 10000);

};

Make some clicks and watch it rain!

answered Oct 6, 2015 at 21:24

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

1 Comment

Dabble Over a year ago

The line x = (100 / Math.tan(radians)); seems to not work as the lasers only shoot in 2 directions. Any suggestions?

Collectives™ on Stack Overflow

How to create divs with separate classes in jQuery/JavaScript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related