9xakep, - нормальная Идея, ну коль я начал уже так, продолжу:
Кликаем по Квадратикам!
<html>
<body>
<style>
body{
background-color:blue;
}
#wrap {
width:156px;
background-color:#fff;
}
td{
text-align:center;
border:2px solid #000;
color:#fff;
text-shadow:#000 1px 1px 1px;
background-color:blue;
width:14px;
height:18px;
}
td[class*="bl_"]{
border:1px solid #FFFFFF;
background-color:green;
}
.БАБАХ{
background-image:url(http://uploads.ru/i/L/4/q/L4qjf.png);
background-position:1px 0;
color:transparent;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<div id=wrap>
<table class="table1">
<tr>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
</tr>
<tr>
<td class="bark bl_1">1</td>
<td class=""> </td>
<td class="titanick bl_1">1</td>
<td class="titanick bl_2">2</td>
<td class="titanick bl_3 БАБАХ">3</td>
<td class="titanick bl_4 ">4</td>
<td class=""> </td>
</tr>
<tr>
<td class="bark bl_2 БАБАХ">2</td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class=""> </td>
<td class="БАБАХ"> </td>
</tr>
</table>
</div>
<br />
<script type="text/javascript">
var TypeKorabl=[
'titanick',
// 'titanick_2', //Eще подобные
// 'bark_2', //Eще подобные
'bark'
]
var titanick=4;
var bark=2;
function TstPopad_Korabl(ThisTD) {
var ThisKorabl;
for(var i in TypeKorabl){ //Определяем Класс подбитого корабля
if(ThisTD.hasClass(TypeKorabl[i])){ThisKorabl=TypeKorabl[i];break;}
}
if(typeof(ThisKorabl)=='undefined'){return false} //Промазали!
return ThisKorabl
}
function Убит_Tst(ThisKorabl) {
var a=eval(ThisKorabl) //Устанавливаем общее число блоков подбитого корабля
$("."+ThisKorabl+".БАБАХ").each(function(i){
a-- ;//Удаляем убитые блоки;
});
if(a!=0){alert("\""+ThisKorabl+"\" Ранен, осталось целых отсеков: " + a )}
else {
var index;
for(var k in TypeKorabl){
if(TypeKorabl[k]==ThisKorabl){index=k; break }
} TypeKorabl.splice(index,1);
alert("\""+ThisKorabl+"\" Убит!");
if(!TypeKorabl.length){alert("Противник -Уничтожен!\n\n = GAME OVER! =")
$('table td').unbind(); // Отключаем клики
}
}
}
$('table td').bind('click', function() { //Клик по клетке
if(!$(this).hasClass('БАБАХ')){
$(this).addClass('БАБАХ');
var ThisKorabl=TstPopad_Korabl($(this))
if(ThisKorabl){Убит_Tst(ThisKorabl)}
else {alert("Промазал!")}
}
});
</script>
</body>
</html>