Make element disappear on touch with another element jquery

Question

Alright, this is one of my first times asking a question on here.. Hopefully there are no other answers questions like this one, I've looked.. Here's my problem, I'm just starting off learning JavaScript and I decided it would be good to make a simple game like Space Invaders.

But I cannot seem to figure out how to get collisions... I've been trying to make it so when the missile hits an image, the image disappears as well as the missile, but it's been quite a hard task. What I've got happening at this moment is the ship/cannon follows mouse x. And when you fire a missile by clicking it fires a missile straight up with you mouse x position. All I need it to do now is, have the missile kill the invader. Any chance someone could tell me the way about how to achieve this, or could someone please make it do what I want completely so I can review over the code and learn.

Current Fiddle link

HTML

<div id="invader_game">
        <div id="invader_row_1">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_1">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_2">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_3">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_4">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_5">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_6">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_7">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_8">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_9">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_10">
            <img src="http://s23.postimg.org/efz3zzizb/invader_1.png" class="invader breakable" id="invader_top_11">
        </div>
        <div id="invader_row_2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png"  style="margin-left:48px;" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
            <img src="http://s27.postimg.org/o9xl74xr3/invader_2.png" class="invader2">
        </div>
        <div id="invader_row_3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" style="margin-left:48px;" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
            <img src="http://s29.postimg.org/yzvy6upyr/invader_3.png" class="invader3">
        </div>
        <div id="bulletrow"></div>
        <div id="shiprow">
            <div id="ship"></div>
        </div>
    </div>

JAVASCRIPT/jQUERY

 function startinvaders(){
        setTimeout( function() {
            $("#invader_row_1").addClass("invadermove");
        }, 5000);
        setTimeout( function() {
            $("#invader_row_2").addClass("invadermove");
        }, 2500);
        $("#invader_row_3").addClass("invadermove");
        $('body').mousemove(function(e){
            var x = e.pageX - this.offsetLeft;
            var x2 = x - 57;
            $('#ship').css({
                left: x2
            });
        });
        $( "body" ).click(function(e) {
            var currenthtml =  $("#bulletrow").html();
            var x = e.pageX - this.offsetLeft;
            $("#bulletrow").append('<div class="bullet ui-widget-content" id="bullet" style="left:' + x + 'px !important; position:absolute; animation:bulletup 5s; -webkit-animation:bulletup 5s;"></div>');
        });
    }
    startinvaders();

CSS (Not really needed, but here.)

body {
    background: #000;
}

.invader {
    height:50px;
    margin-left: 50px;
}
.invader3 {
    height:40px;
    margin-left: 35px;
}
.invader2 {
    height:50px;
    margin-left: 35px;
}

#invader2 {
    height:50px;
    margin-left: 35px;
}

#invader_row_2 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_1 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader_row_3 {
    width:1200px;
    text-align: center;
    padding-top: 50px;
    margin-left:auto;
    margin-right: auto;
}

#invader3 {
    height:40px;
    margin-left: 35px;
}

#invader_game {
    width:100%;
    height:100%;
}
.invadermove{
    animation:invadermove 10s infinite;
    -webkit-animation:invadermove 10s infinite; /* Safari and Chrome */
}

@keyframes invadermove
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%   {padding-left:12px;}
    96%   {padding-left:0px;}
    100%   {padding-left:0px;}
}

@-webkit-keyframes invadermove /* Safari and Chrome */
{
    0%   {padding-left:0px;}
    11%   {padding-left:0px;}
    12%   {padding-left:12px;}
    23%   {padding-left:12px;}
    24%   {padding-left:24px;}
    35%   {padding-left:24px;}
    36%   {padding-left:38px;}
    47%   {padding-left:38px;}
    48%   {padding-left:50px;}
    59%   {padding-left:50px;}
    60%   {padding-left:38px;}
    71%   {padding-left:38px;}
    72%   {padding-left:24px;}
    83%   {padding-left:24px;}
    84%   {padding-left:12px;}
    95%   {padding-left:12px;}
    96%   {padding-left:0px;}
    100%   {padding-left:0px;}
} 

#shiprow {
    position: absolute;
    bottom:0px;
    height:100%;
    width: 100%;
}

#ship {
    height:50px;
    width:100px;
    position: absolute;
    bottom:0px;
    background-image: url(http://s7.postimg.org/pn387gu9z/cannon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bullet {
    position: absolute;
    height:20px;
    width: 2px;
    background-color: #fff;
    bottom:10000px;
}

#bulletrow {
    height:100%;
}
@keyframes bulletup
{
    0%   {bottom:0px;}
    100%   {bottom:10000px;}
}

@-webkit-keyframes bulletup /* Safari and Chrome */
{
    0%   {bottom:0px;}
    100%   {bottom:10000px;}
}

Take a look at this too: http://stackoverflow.com/questions/19661108/detect-element-if-over-another-element-via-using-css3-transform — ctwheels, Jul 31 '14 at 18:39
There is also this link: http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery — ctwheels, Jul 31 '14 at 18:45

Make element disappear on touch with another element jquery

0 Answers0