Butterfly Sniper

Trying out some game logic for fun and practice.

by AlienWebguy

HTML

<script src="http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js"></script>
<div id="ui">
    <div id="scoreboard">
        Score: <span id="score"></span>
    </div>
    <div id="current_level">
        Level: <span id="level"></span>
    </div>
    <div id="weapons">
        Ammo: <span id="ammo"></span>
    </div>
    <div id="current_lives">
        Lives: <span id="lives"></span>
    </div>
</div>

<div id="canvas">
    <div id="spawn" class="spawn">
        <img />
    </div> 
</div>
<audio id="background_music" autoplay preload loop>
    <source src="http://www.seancannon.com/butterflysniper/audio/rainforest_ambience.wav" />
</audio>
<audio id="gun_sound" preload>
    <source src="http://www.seancannon.com/butterflysniper/gun_bang.wav" />
</audio>

CSS

#canvas {
    width:1000px;
    height:625px;
    border:2px solid #000;
    background-color:#F0F0F0;
    background-image:url(http://www.seancannon.com/butterflysniper/images/bg/1000/1.jpg);
    overflow:hidden;
    position:relative;
    cursor:url(http://www.seancannon.com/butterflysniper/images/cursors/scope.cur) 14 14,default;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#ui {
    width:500px;
    height:40px;
    overflow:hidden;
}

#ui div {
    margin-right:40px;
    text-align:left;
    font-weight:bold;
    float:left;
}

#spawn, .clone {
    position:absolute;
    left:0px;
    top:-50px;
    height:49px;
    width:84px;
    background-color:#F00;
}

#bonus_msg {
    height:100%;
    width:100%;
    background-color:rgba(255,215,0,0.4);
    color:#FFF;
    font-size:3em;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}

#end_msg {
    height:100%;
    width:100%;
    background-color:rgba(255,0,0,0.4);
    color:#FFF;
    font-size:3em;
    text-align:center;
}

#level_up_msg {
    height:100%;
    width:100%;
    background-color:rgba(0,255,0,0.4);
    color:#FFF;
    font-size:3em;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}


.clone {
    background-color:transparent;
    position:absolute;
}

.clone img {
    width:100%;
    height:100%;
}

.piece {
    background-color:rgba(255,0,0,0.6);
}

.bonus {
    /*background-image:url(http://www.seancannon.com/_test/animated-gifs-butterflies-07.gif);*/
}

.reverse {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

/* For JQuery preload plugin - we wont actually reference these classes */
.preload_bg_1 { background-image:url(http://www.seancannon.com/butterflysniper/images/bg/1000/1.jpg);}
.preload_bg_2 {...

JavaScript

/**
 * Pseudo Constants
 */

var CANVAS_BG_DIR = 'http://www.seancannon.com/butterflysniper/images/bg/1000/';
var CANVAS_BG_NUM = 1;
var CANVAS_MAX_BG_NUM = 19;
var CANVAS_WIDTH = 1000;
var CANVAS_HEIGHT = 625;
var CANVAS_TOP_BUFFER_PX = 60;
var FLY_DISTANCE_MIN = 0;
var FLY_DISTANCE_MAX = 3;
var PIECES_MIN = 5;
var PIECES_MAX = 10;
var LEFT_RIGHT_MIN_PX = '-' + CANVAS_WIDTH + 'px';
var LEFT_RIGHT_MAX_PX = CANVAS_WIDTH + 'px';
var UP_DOWN_MIN_PX = 50;
var UP_DOWN_MAX_PX = 200;
var BASE_NODE_ID = 'spawn';
var BASE_NODE_INIT_TOP_PX = '-100px';
var BASE_NODE_INIT_LEFT_PX = '1100px';
var BASE_NODE_INIT_LEFT_MIN_PX = 0;
var BASE_NODE_INIT_LEFT_MAX_PX = 550;
var BASE_NODE_INIT_TOP_MIN_PX = 0;
var BASE_NODE_INIT_TOP_MAX_PX = 350;
var BASE_NODE_ANIMATE_DISTANCE_Y_PX = '600px';
var BASE_NODE_ANIMATE_DISTANCE_X_PX = '-300px';
var BASE_NODE_ANIMATE_DUR_MIN = 3500;
var BASE_NODE_ANIMATE_DUR_MAX = 6000;
var BASE_NODE_IMG_SRC = 'http://www.seancannon.com/butterflysniper/images/objects/butterfly-blue.gif';
var BONUS_NODE_IMG_SRC = 'http://www.seancannon.com/butterflysniper/images/objects/butterfly-yellow.gif';
var AUDIO_GUN_SRC = 'http://www.seancannon.com/butterflysniper/audio/gun_bang.wav';
var CLONE_PIECES_CLASS = 'clone piece';
var CLONE_CLASS = 'clone';
var BONUS_CLASS = 'bonus';
var BONUS_ODDS = 20; // 1 in 20 chance of seeing yellow butterfly
var BONUS_LIVES = 5;
var BONUS_NOTIFICATION = '+' + BONUS_LIVES + ' LIVES!'
var CLONE_ID = 'clone';
var CANVAS_ID = 'canvas';
var BLOW_UP_DUR_MIN = 50;
var BLOW_UP_DUR_MAX = 500;
var GAME_DATA_LIVES_ID = 'lives';
var GAME_DATA_LIVES_DEFAULT = 99;
var GAME_DATA_LEVEL_ID = 'level';
var GAME_DATA_LEVEL_DEFAULT = 1;
var GAME_DATA_CURRENT_LEVEL = GAME_DATA_LEVEL_DEFAULT;
var GAME_DATA_AMMO_ID = 'ammo';
var GAME_DATA_AMMO_DEFAULT = 10;
var GAME_DATA_LEVEL_UP_AMMO_AMT = 20;
var GAME_DATA_SCORE_ID = 'score';
var GAME_DATA_SCORE_DEFAULT = 0;
var GAME_DATA_FLY_FRAME_RATE = 6; // 6ms interval
var LEVEL_UP_ARRAY = [5, 10, 20, 30, 45, 60, 75,...