battle

by surfine

HTML

<table id="battle" border="1" cellpadding="15">
    <tr>
    <td><img src="http://pkmnplanet.net/rpg/images/pokemon/Shiny%20Halloween%20Totodile.png" /></td>
    <td><img src="http://pkmnplanet.net/rpg/images/pokemon/Shiny%20Halloween%20Kyurem.png" /></td></tr>
    <tr><td><input id="poke1hlth" value="500" disabled="disabled"/></td>
        <td><input id="poke2hlth" value="500" disabled="disabled"/></td></tr>
</table>
<table width="384px"><tr><td><select id="select_atk">
    <option>Scratch</option>
    <option>Growl</option>
    <option>Leer</option>
    <option>Hydro Pump</option>
    </select></td></tr></table><br />
<table width="384px"><tr><td><button id="atk">Attack</button></td></tr></table>

CSS

#battle {
    border: 1px solid black;
    border-collapse:collapse;
}
td {
    width: 160px;
    text-align: center;
}

JavaScript

$(document).ready(function() {
    $('#atk').click(function() {
        if ($('#poke2hlth').val() > 0 && $('#poke1hlth').val() > 0) {
            var atk = $('#select_atk').val();
            if (atk == 'Scratch') {
                var health = $('#poke2hlth').val()-10;
                $('#poke2hlth').val(health);
            } else if (atk == 'Growl') {
                var health = $('#poke2hlth').val()-3;
                $('#poke2hlth').val(health);
            } else if (atk == 'Leer') {
                var health = $('#poke2hlth').val()-1;
                $('#poke2hlth').val(health);
            } else if (atk == 'Hydro Pump') {
                var health = $('#poke2hlth').val()-20;
                $('#poke2hlth').val(health);
            }
            var damage = 1 + Math.floor(Math.random() * 20);
            var health2 = $('#poke1hlth').val()-damage;
            $('#poke1hlth').val(health2);
            if ($('#poke2hlth').val() > 0 && $('#poke1hlth').val() < 1) {
                alert('You Loose!');
            } else if ($('#poke2hlth').val() <= 0 && $('#poke1hlth').val() > 0) {
                alert('You Won!');
                // give some money and blah blah
            }
            // ajax code goes here
            // no need to update database after each attack
            // this method will be a lot faster
        }
    })
})