一、游戏素材
二、游戏效果
三、主要技术
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和图片,函数流程,综合的案例,都已实现。
如果是单纯地理论学习,不会练出技术。技术本身很简单,技术可以补充理论,促进理论的理解。
有了这样的编程技术做基础,大学的各种专业课,不再是难事。
如果有创意,可以做出很好的应用软件、游戏软件。