快速编程JS初级教程3-1 DIV游戏结构和单张地图

一个div表示一个矩形区域。通过设置CSS样式：position : absolute;可以在指定坐标，摆放一个div.

CSS属性：z-index，可以指定重叠顺序，数值越大，越靠上。

游戏画面分层：顶层,是用户的UI,比如小地图，技能图标。然后是各个游戏元素，底层是游戏地图。

DIV可以嵌套：一个div，可以包括多个div，img，文本等等。

按照标签的嵌套关系，一个网页的所有元素，组成了一棵DOM树，有根节点，子节点，子节点的子节点。

DIV的基本练习：

用纯标签，摆放一个游戏画面：

这种一张图，走到底，就是单张地图。接下来，地图动起来：

<script>
// http://www.w3school.com.cn
var o = document.body; 
var gframe;//游戏画布div
var role2;//放地图的div
var mapx=0;//地图横坐标
function init()
{
	gframe = document.createElement("div"); 
	gframe.style = 'background-color:#ff0000;width:500px; height : 400px;position:relative;overflow:hidden'; 
	gframe.id="game1";
	o.appendChild(gframe);	
	
	role2= document.createElement("div"); 
	role2.style = 'width:1000px; height : 400px;position : absolute;top :100px;left: 0px'; 
	role2.id="divmap";
	role2.innerHTML='<img src="map1.png"  ></img>';
	gframe.appendChild(role2);	
}
function gameupdate()
{
	// 地图横坐标+宽度 -500+1000=500 游戏区域宽度
	if(mapx > -500)
	{
		mapx-=10;
	}
	
	// 刷新坐标
	var divmap=document.getElementById("divmap");
	divmap.style.left=mapx;
}

init();
setInterval("gameupdate()",200);

</script>

效果: