Question

我正在尝试为一个学校项目制作一个射击游戏类型，而我正在努力创建与他们相关的不同类的多个div。我是一个非常新的程序员，所以任何帮助都会受到赞赏。

$(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



});

我打算只使用HTML CSS JS和jQuery。

Answer 1

我猜这就是问题所在：

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

将其更改为

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

这将使第一个div有一个类“laser0”（因为默认值为0），第二个div将是“laser1”等。

Answer 2

不确定如何重现您的问题，但这里是working JSFiddle。我主要编辑了targetSpawn()函数，因为在创建新的.target之后，您正在修改每个目标而不是仅修改新创建的目标。

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);

};

点击一下，看下雨！

如何在jQuery / JavaScript中创建具有单独类的div？

2 个答案: