Доброго времени суток, решил сделать игру на CSS3 + SVG, но без jQuery никуда ведь, поэтому есть несколько вопросов с которыми не могу справиться.
Есть 4 <section> (bg,map,units,ui)
bg - это просто фон
map - интерактивная карта
units - пока не используется
ui - интерфейс
Вот HTML код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FrameWarp - плагин для вывода страниц в окнах | Демонстрация для сайта RUDEBOX</title>
<!-- The stylesheets -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="layer" id="bg">
</section>
<section class="layer" id="map">
</section>
<section class="layer" id="units">
</section>
<section class="layer" id="ui">
<div class="uihead"></div>
<div class="uimenu"></div>
</section>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Тут CSS код
*{
margin:0;
padding:0;
}
html{
background-color:#eee;
background-image:-moz-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
background-image:-o-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
background-image:-webkit-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
background-image:radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
}
body{
font:14px/1.3 'Segoe UI',Arial, sans-serif;
overflow: hidden;
}
.layer {
position: absolute;
}
#main {
background: red;
}
#map {
background: aqua;
font-size: 0px;
}
.mapelement {
background: red;
display: inline-block;
width: 63px;
height: 63px;
border: 1px solid black;
border-top: 0px;
border-left: 0px;
}
#units {
background: blue;
display: none;
}
#ui {
width: calc(100% - 8px);
height: calc(100% - 8px);
border: 4px solid orange;
}
.uihead {
position: absolute;
width: 100%;
height: 5%;
background: yellow;
top: 0;
}
.uimenu {
position: absolute;
width: 100%;
height: 20%;
background: yellow;
bottom: 0;
}
А тут JS
$(function(){
var mapW = 7;
var mapH = 5;
$("#map").width(64*mapW);
$("#map").height(64*mapH);
$.each( mapW*mapH, function() {
$(".mapelement").prependTo("#map");
})
});
1. Как сделать что бы <section id="map"> был movable? Что бы можно было двигать как карту
2. В js коде я пытаюсь циклом заполнить <section id="map"> элементами
.mapelement так как это будут тайлы которые полностью заполняют саму карту. Ширина и высота карты равна установленным значениям умноженным на 64px
тайлы по высоте и ширине тоже равны 64px значит тайлов нужно создать высоту умножить на ширу. Но чего то у меня не вышло создать циклом необходимое количество тайлов внутри карты.