之前学习了分支、循环、函数等基本技术,可以用星号输出一个三角形。接下来,让这个三角形在屏幕上左右来回移动。
实现的办法有很多种,一种方法是在每行星号前,输出一些空格。通过空格的数量,移动三角形的位置。
这就要用到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>
现在的结构是:计时器+画面绘制+数值刷新。
再做一个效果:发出子弹,子弹碰到一个边框后,消失。
这就是典型的游戏程序结构:计时器,画面绘制+数值刷新+碰撞检测。
详细介绍,见下一篇教程。