快速编程JS初级教程5 综合案例，超级玛丽

一、游戏素材

二、游戏效果

三、主要技术

1.循环地图，有普通地面和障碍物。尖刺图片50x50，地图移动每个时间片，左移5像素。

2.用户按空格键，人物跳跃，按抛物线修改坐标，持续20个时间片，地图移动100像素，刚好跨过一个尖刺。

四、代码

<script>
// http://www.w3school.com.cn
var o = document.body; 
///
var mapx=0; //地图横坐标
var gframe; //游戏画布div
var role2;  // 地图div
var role1;  // 人物div
var role1_state="walk"; //状态机
var jumptime=0; // 跳跃时间片技术
var role1_y=300; // 人物纵坐标

///
function init()
{
	gframe = document.createElement("div"); 
	gframe.style = background-color:#00a0f0;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 :350px;left: 0px; 
	role2.id="divmap";
	gframe.appendChild(role2);
	
	initmap();
}
function mapcomponent()
{
	var tmp;
	for(var i=0;i<10;i++)
	{
		tmp= document.createElement("img"); 
		if(i==4 || i==6 || i==8 )
			tmp.src = "img/role2ci.png";
		else
			tmp.src = "img/role2.png";
			
		tmp.style = width:50px; height : 50px;  ; 
	 	role2.appendChild(tmp);
	}
}
function initmap()
{
	
	role1= document.createElement("img"); 
		role1.src = "img/rolemali.png";
		role1.style = width:50px; height : 50px; position : absolute;top :300px;left: 100px ; 
	 	gframe.appendChild(role1);

		mapcomponent();
		mapcomponent();	 
 }

function gameupdate()
{
	mapx-=5;
	if(mapx<-500)
		mapx=0;
	
	role2.style.left=mapx;
	//
	
	if(role1_state== "jump")
	{
		jumptime++;
		role1_y=(jumptime-10)*(jumptime-10)+200;	
		
		if(jumptime>=20)
		{//跳跃结束
			jumptime=0;
			role1_y=300;			
			role1_state="walk";
		}
	}
	role1.style.top=role1_y;
}

init();
var int=self.setInterval("gameupdate()",200);

document.onkeydown = function(e)
 {
        var e = window.event ? window.event : e;
		  		
        switch(e.keyCode){
        case 32: //up
           role1_state="jump";
            break;
        }
}
</script>

JS的部分告一段落，基本编程的技术，DIV和图片，函数流程，综合的案例，都已实现。

如果是单纯地理论学习，不会练出技术。技术本身很简单，技术可以补充理论，促进理论的理解。

有了这样的编程技术做基础，大学的各种专业课，不再是难事。

如果有创意，可以做出很好的应用软件、游戏软件。