JQuery Simple Shooting Game

February 20th, 2011 by aditia rahman / 5 Comments  

     

I continue to doing a little experiment with jquery query effect, this time I’m using it to create very simple shooting game, the rules is really easy just shoot the enemy character.

jquery shooting game thumb

The HTML

The HTML contain 3 main div elements, the button and stat, the main cardboard game and the game finish message box that will appear when the game finish.

View Demo | Dowload Source

div for button & stat

This will show how many times users shoot the bad and good character, and play button to start playing the game

<div id="stat">
    <span id="hit">0 Hit</span>
    &nbsp;
    <span id="miss">0 Miss</span>
    &nbsp;
    <a id="btnstart" href="javascript://">Play &darr;</a>
</div>

div for main game

In this game I provide three different bad characters and one good character.

<div id="container">
    <div id="char1" class="character enemy1"></div>
    <div id="char2" class="character enemy2"></div>
    <div id="char3" class="character enemy3"></div>
    <div id="char4" class="character ally"></div>
</div>

div for final message

This element default to hide, only open when the game finish.

<div id="message">
    Thank you for playing, press "Play" to start again.
</div>
The JQuery

The logic behind this game are quite simple when the game start all the characters are hidden, and moved to random position inside the container, and from all the character pick one random character to be shown.

When the start button clicked the game play will play for 30 seconds, by reseting all the stat to its default value, shoot on the enemy character, the explode effect triggered, otherwise shoot on the ally character the horizontal bounce effect triggered, all this effect are using jqueryui effects.

var miss = 0;
var hit = 0;

$(document).ready(function() {

    var play;

    $("#btnstart").click(function(){
        startplay();
    });

    function startplay() {
        $("#message").fadeOut('slow');
        $(".character").fadeOut('slow');
        $("#miss").html("0 Miss");
        $("#hit").html("0 Hit");
        miss = 0;
        hit = 0;
        $("#btnstart").css("color", "#e3e3e3");
        $("#btnstart").unbind("click");
        play = setInterval(scramble, 1800);
        setTimeout(function() {
            clearInterval(play);
            $("#btnstart").css("color", "#333333");
            $("#btnstart").bind("click", startplay);

            // show the final message
            var containerPos = $('#container').offset();
            $("#message").animate({
                top: containerPos.top,
                left: containerPos.left
                }, 'fast', function() {
                    setTimeout(function() {
                        $("#message").fadeIn('slow');
                        $(".character").fadeIn('slow');
                    }, 500);
            });
        }, 30000);
    }

    $(".character").click(function() {
        if ($(this).hasClass("ally")) {
            $(this).effect("bounce", {
                times: 2,
                direction: 'left'
            }, 300);
            $(this).slideUp("fast");
            miss++;
            $("#miss").html(miss + " Miss");
        } else {
            $(this).effect("explode", 500);
            hit++;
            $("#hit").html(hit + " Hit");
        }
    });
});

function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();

    var randomId = randomFromTo(1, children.length);
    moveRandom('char'+randomId);
    setTimeout(function(){
        $("#char"+randomId).slideDown('fast');
    }, 500);

    setTimeout(function() {
        $("#char"+randomId).slideUp('fast');
    }, 1500);
}

function moveRandom(id) {
    /* get container position and size
     * -- access method : cPos.top and cPos.left */
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));

    // get movable box size
    var bHeight = $('#'+id).height();
    var bWidth = $('#'+id).width();

    // set maximum position
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);

    $('#'+id).animate({
        top: newY,
        left: newX
        }, 'slow', function() {
    });
}
The CSS

And these are the CSS code, I’m using a pattern for background, there are four different background used to describing the character, and custom mouse pointer when aiming the target, but it not work on IE and Opera.

body {
    cursor: url('img/target.gif');
    background: #ffffff url("img/trentanove.gif") repeat top right;
}
#container {
    background: #ffffff url("img/trentaquattro.gif") repeat top right;
    margin: 0 auto;
    border: 5px solid #999999;
    width: 600px;
    height: 350px;
    padding: 20px 50px;
    cursor: url("img/target.gif"), pointer;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}

 #message {
    background: #999999;
    margin: 0 auto;
    border: 5px solid #999999;
    width: 600px;
    height: 350px;
    padding: 20px 50px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    position: absolute;
    opacity: 0.8;
    filter:alpha(opacity=80);
    text-align: center;
    font-size: 28px;
    color: #000000;
    display: none;
}

.character {
    border: 2px solid #f3f3f3;
    width: 95px;
    height: 95px;
    position: absolute;
    display: none;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    cursor: url('img/target.gif'), pointer;
}
.character:hover {
    opacity: 0.6;
    filter:alpha(opacity=60);
}
.enemy1 {
    background: url("img/enemy1.jpg");
}
.enemy2 {
    background: url("img/enemy2.jpg");
}
.enemy3 {
    background: url("img/enemy3.jpg");
}

.ally {
    background: url("img/ally.jpg");
}

View Demo | Dowload Source

jquery shooting game screencapture

        submit to reddit Delicious

5 Comments Leave a Comment Subscribe RSS

  • csabi says:

    Hi! I just love your tutorial! Congratulations!
    I know this is not the best way to say it, but I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials or to publish using our Publishing system, it will bring you some extra traffic
    Please give a chance for my website: http://www.tutorialswindow.com

    Thanks!

  • Beben Koben says:

    walah, sim kuring capek2 ngeutik bahasa inggris, ari pek teh ti bandung euy…heuheuheuheuhueh
    salam tepang ah bos….xixixixixi asem dah

  • Thank you for sharing us this code. I really need this for my upcoming project. It really helped me a lot. :)

  • Binkam says:

    Thanks for this game. I hope I can use it freely in my web site.

  • Alex says:

    This is a really great tutorial! Since I’m an absolute beginner in jQuery – I only have experience with integrating jQuery plugins with html, and as I’m a math teacher this tutorial gives me ideas of creating different math games for my students… Thanks!

Leave a Comment