快速编程JS初级教程2-1 计时器和移动

之前学习了分支、循环、函数等基本技术，可以用星号输出一个三角形。接下来，让这个三角形在屏幕上左右来回移动。

实现的办法有很多种，一种方法是在每行星号前，输出一些空格。通过空格的数量，移动三角形的位置。

这就要用到setInterval("重复执行的函数", 间隔毫秒数); 也就是JS的计时器。效果如下：

游戏中，主要有三种移动：序列帧的动画，游戏元素移动，游戏地图移动。

游戏地图移动，分两种：一种大地图移动，例如：超级玛丽，王者荣耀，都是一张大地图，每次给用户展现一部分。

另一种地图，是循环移动。比如：可以无限循环的跑酷，反复循环的地图背景。主要是横版过关游戏是用。

地图的移动，要放在游戏结构讲以后。

一、序列帧

2D，3D游戏，人物的一个动作（Sprite，精灵）都是连续多幅画面组成的。就像这样：

用计时器，每隔一段时间，修改<img>的图片路径，形成动画效果，代码如下：

<script language=javascript>
var frame=1; 
function myFunction()
{
	frame++;	
	if(frame >5)
	{	frame=1;
	}	
	
	document.body.innerHTML=""; //清空内容
	document.write("<img src='a"+frame+".png'>");	//  
	document.write("<br>");	//  	
 }
setInterval("myFunction()",200);
</script>

由于使用了document.write输出图片标签，write的作用其实是“追加”。所以，先有一个空字符串，清空内容的操作。

二、游戏元素移动，攻击的子弹

在鼠标点击的位置，出现一个箭头，向右飞，效果：

技术：两个数组存储x,y坐标，鼠标点击，添加数组元素。根据数组元素，用<img>画出图片素材，设置图片坐标。

每次绘制画面前，先清空网页内容。

虽然有其他做法，但这个做法的程序量少，方便基础学习。代码如下：

<script type="text/javascript">
/////////数据
var itemsx=new Array();
var itemsy=new Array();
////////////////////////// 基本函数
function draw(x,y)
{
//创建div
 var div=document.createElement("div");
 div.innerHTML='<img src="bullet2.png" style="position:absolute;visibility:visible;left:'+x+'px;top:'+y+'px" />';
 document.body.appendChild(div); 
}

function updatedata()
{
	for(var i=0;i< itemsx.length; i++)
	{
		itemsx[i]+=10;		
	}	
}
function paint()
{
	document.body.innerHTML=""; //清空内容
	for(var i=0;i< itemsx.length; i++)
	{
		draw(itemsx[i], itemsy[i] );
	}
	
	updatedata();
}
/////////////////////////////////// 事件函数
document.onmousedown =function(a) 
{ 

 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 
 //创建
 itemsx.push(x);
 itemsy.push(y);
}  
draw(100,50);

var int=self.setInterval("paint()",500);
</script>

现在的结构是：计时器+画面绘制+数值刷新。

再做一个效果：发出子弹，子弹碰到一个边框后，消失。

这就是典型的游戏程序结构：计时器，画面绘制+数值刷新+碰撞检测。

详细介绍，见下一篇教程。

快速编程JS初级教程2-1 计时器和移动

猜你喜欢