Игры на HTML...
...вместо Flash (:

Я считаю, что флеша не должно быть везде и много. В интернете на нем должны быть только загрузчики файлов. Flash надо использовать по назначению - для создания сложных мультфильмов. Веб-приложения вполне могут обойтись без флеш-элементов..

Но как быть с играми? Да, при знании jQuery (а он намного проще ActionScript!!) можно сделать простую игру ;)

Пример - сборка АК, подсказал один товарищ. Надо не так много: средство против лени, фото разобранного автомата (идите в гугл!), графический и текстовый редакторы, нормальный браузер (Safari, Chrome или Firefox).

Я не буду подробно расписывать каждую строчку - скажу лишь, что с помощью jQueryUI мы придаем деталям draggable и создаем цели, куда они droppable. Тут сильно не доделано все - можно деталь поместить не в то место и отображается все это только в консоли. Доработаете и сделаете таймер - будет вам игра :)

<!DOCTYPE HTML>
<html><head><title>AK Game</title>
<script src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js" type="application/x-javascript"></script>
<script src="http://myfreeweb.ru/media/mfwjs/jquery-ui-1.7.2.custom.min.js" type="application/x-javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.piece').draggable({ cursor: 'crosshair' });
$('#t_2').droppable({ drop: function(event, ui){
console.log('dropped to 2'); } });
$('#t_3').droppable({ drop: function(event, ui){
console.log('dropped to 3'); } });
$('#t_4').droppable({ drop: function(event, ui){
console.log('dropped to 4'); } });
});
</script>
<style type="text/css">
.target { position: absolute; }
#t_2 { margin: 55px 0px 0px 215px; width: 120px; height: 150px; }
#t_3 { margin: 10px 0px 0px 277px; width: 177px; height: 22px; }
#t_4 { margin: 5px 0px 0px 100px; width: 128px; height: 32px; }
</style></head>
<body>
<div id="ak">
  <div class="target" id="t_2"></div><div class="target" id="t_3"></div><div class="target" id="t_4"></div>
  <img src="1.png" alt="включи картинки!"/>
</div>
<img src="2.png" id="2" class="piece" alt="включи картинки!"/>
<img src="3.png" id="3" class="piece" alt="включи картинки!"/>
<img src="4.png" id="4" class="piece" alt="включи картинки!"/>
</body></html>
СКАЧАТЬ демо (картинки + код выше)
Постовой: Создание сайта визитки
2009-11-30 20:32:47 | Теги: test web20 apps javascript markup