lufylegend游戏引擎
lufylegend游戏引擎介绍：click
这个链接我觉得已经很详细的介绍了这个引擎。
所以以下我只说说一些简单的游戏代码过程。
首先从canvas做游戏叙述起：
这是一个让人很熟悉的简单小游戏，网上到处都是这个小游戏代码，所以就简单说说；
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单游戏</title>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
<canvas id="canvas">你的浏览器太low了！</canvas>
<script type="text/javascript"> window.onload=function(){
game("canvas");
}
</script>
</body>
</html>
js代码：
function game(id){
/*创建画布*/
var oCanvas=document.getElementById(id);
var canvas=oCanvas.getContext("2d");
oCanvas.width="512";
oCanvas.height="480";
/*******准备图片***********/
/******************
为什么要确认图片是否被加载进来了，因为在图片还没加载进来就对其操作，
很容易会出现各种问题，如图片出不来
*******************/
/*背景图*/
var bgImg=new Image();
bgImg.src="./images/background.png";
bgImg.success=false;
bgImg.onload=function(){
bgImg.success=true;
}
/*玩家人物图*/
var hero=new Image();
hero.src="./images/hero.png";
hero.success=false;
hero.onload=function(){
hero.success=true;
}
/*怪物图*/
var monster=new Image();
monster.src="./images/monster.png";
monster.success=false;
monster.onload=function(){
monster.success=true;
}
/***********游戏对象*********/
/*人物位置*/
/*******************
为什么使用数组？因为这样好管理，优化代码
*********************/
hero.pos={
x:0,
y:0,
speed:256
}
/*怪物位置*/
monster.pos={
x:0,
y:0
}
var monsterCaught=0;
/*******处理用户的输入*******/
/***************
为什么按键弹起取消获取到键值了，这是为了下面判断时运动的
**************************/
var keysDown={};
var keyNum=null;
/*addEventListener,在没有写对象下，默认为window下的对象*/
addEventListener("keydown",function(e){
e= e || window.event;
keyNum=e.keyCode;
keysDown[e.keyCode]=true;
},false);
addEventListener("keyup",function(e){
keyNum=null;
delete keysDown[e.keyCode];
},false);
/*******初始化游戏******/
/**************
确认怪物和玩家的初始位置
*******************/
function gameInit(){
hero.pos.x=oCanvas.width/2;
hero.pos.y=oCanvas.height/2;
monster.pos.x=32+(Math.random()*oCanvas.width-64);
if(monster.pos.x<=0){
monster.pos.x=0;
}
monster.pos.y=32+(Math.random()*oCanvas.height-64);
if(monster.pos.y<=0){
monster.pos.y=0;
}
}
/*更新对象*/
function update(m){
if(keyNum==38){
/*每秒走的距离*时间间距=距离*/
hero.pos.y-=hero.pos.speed*m;
}else if(keyNum==40){
hero.pos.y+=hero.pos.speed*m;
}else if(keyNum==37){
hero.pos.x-=hero.pos.speed*m;
}else if(keyNum==39){
hero.pos.x+=hero.pos.speed*m;
}
/*monster.pos.x<=hero.pos.x<=monster.pos.x+32*/
/*y也同理*/
/*这是为了碰撞检测的,是碰撞就初始化游戏*/
if(hero.pos.x<=(monster.pos.x+32)&&monster.pos.x<=(hero.pos.x+32)&&hero.pos.y<=(monster.pos.y+32)&&monster.pos.y<=(hero.pos.y+32)){
monsterCaught++;
gameInit();
}
}
/*渲染物体*/
/*画出游戏界面*/
function render(){
if(bgImg.success){
canvas.drawImage(bgImg,0,0);
}
if(hero.success){
canvas.drawImage(hero,hero.pos.x,hero.pos.y);
}
if(monster.success){
canvas.drawImage(monster,monster.pos.x,monster.pos.y);
}
canvas.fillStyle="red";
canvas.font="30px Arial";
canvas.textAlign="left";
canvas.textBaseline="top";
canvas.fillText("得分："+monsterCaught,10,10);
}
/*主循环函数*/
/*使用来循环的整个游戏的，这样就可以时时刻刻监听整个界面的变化，做出相对应的改变*/
function main(){
var now=new Date().getTime();
/*获取触发时间的间距*/
/*为每秒运动的距离不变,这个就不受定时器时间误差影响到运动距离*/
var delta=now-then;
/*时间间距以秒为准delta/1000*/
update(delta/1000);
render();
requestAnimationFrame(main);
then=now;
}
/*启动游戏！*/
/*它就是一个性能很好的setTimeout,只是它的帧数是根据浏览器来的，一般来说每秒60帧*/
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
var then=new Date().getTime();
gameInit();
main();
}
这是个很简单的游戏，而它没有使用clearRect这个清除界面，而是直接使用背景
去覆盖掉上去，达到清除的效果，就像ps图层一样，上一层覆盖下一层。
OK，接下来是游戏引擎的。
让小人走动起来；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lufylegend-1.5.1.js"></script>
</head>
<body>
<div id="my"></div>
<script>
/*把屏幕分成4行，4列*/
// console.log(LGlobal.divideCoordinate(256,256,4,4));
init(100,"my",500,350,main);
var layer,aina,loader;
/*LEvent.COMPLETE图片加载完成后进入下一个函数*/
function main(){
loader=new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitData);
loader.load("chara.png","bitmapData");
}
function loadBitData(){
/*LBitmapData图片数据，可以操作图片*/
var bitmapdata=new LBitmapData(loader.content,0,0,64,64);
/*把宽高为固定的图像分成多少行，多少列*/
var list=LGlobal.divideCoordinate(256,256,4,4);
/*创建图层*/
layer=new LSprite();
/*添加图层到底层*/
addChild(layer);
/*运动*/
aina=new LAnimation(layer,bitmapdata,list);
layer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
var gA=aina.getAction();
switch(gA[0]){
case 0 : layer.y+=5;
if(layer.y>=200){
aina.setAction(2);
};break;
case 1 : layer.x-=5;
if(layer.x<=0){
aina.setAction(0);
};break;
case 2 : layer.x+=5;
if(layer.x>=200){
aina.setAction(3);
};break;
case 3 : layer.y-=5;
if(layer.y<=0){
aina.setAction(1);
};break;
}
aina.onframe();
}
</script>
</body>
</html>
核心是LAnimation，只要会使用这个就很好理解上的了，查手册就知道怎么使用。
其实游戏就是在动画的基础上进一步对这个动画各种效果进行人工的操作，而这个
人工操作的实现过程就需要各种判断来实现，所以让画面动了就成功一半，只差一些
游戏方面的逻辑修改它，让它转为人工操作了。所以我把这个叫做从自动转为手动。
当然游戏没有那么简单，这只是做一些很简单的游戏是这样，但游戏就是人为操作动画的
过程，而在代码实现过程最好的是为好层次，如js文件就要分基础，背景，人物，怪物，按键等等
这只是比如，不同情况，不同对待，这样可以让逻辑清晰，易读，但要修改就要使用到面向对象的模式去
编写代码了，这个比较易维护。不过现在编写模式很多，个人的判断和习惯。
虽然刚刚学游戏编写没有多久，但觉得这个数学很重要，所以数学知识也不能缺。
lufylegend游戏引擎的更多相关文章
- 国内开源html5游戏引擎全收录
本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...
- HTML5 RPG游戏引擎 地图实现篇
一,话说全国年夜事 前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做.因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于 ...
- HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylege ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 如何制作一款HTML5 RPG游戏引擎——第四篇，情景对话
今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
- 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...
- 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现
一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...
- HTML5开源RPG游戏引擎lufylegendRPG 0.1发布
一,小小开篇 首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能 ...
随机推荐
- 原声JavaScript实现滚动条·改1
修正了获取元素相对视口左距离的逻辑问题(之前的函数实际获取的是相对于页面左距离).去除了调试时忘记删除的mouseleave事件.将创建滚动条的功能单独列为一个函数. 添加了鼠标点在滚动条什么位置,就 ...
- MYSQL中 ENUM 类型
MYSQL中 ENUM 类型的详细解释 ENUM类型 ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串(&quo ...
- 初步了解yield_python
yield 关键字是在学习python生成器(Generator)时遇到的,对于它及Generator至今我还不能很深入的理解,当前只是把所理解的知识作下记录,以便以后翻查. yield关键字是用来定 ...
- 【C-分支结构】
一.关系运算符 双目运算符 自左向右结合 关系运算符的优先级低于算术运算符,高于赋值运算符 <(小于) <=(小于或等于) >(大于) >=(大于或等于) ==(等于) !=( ...
- 我的c漏洞
传入指针参数 #include<stdio.h> #include<stdlib.h> void READ(int *a) { scanf("%d",a); ...
- C++之const
C++中const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不变的.如果在编程中确实有某个值保持不变,就应该明确使用const,这样可以获得编译器的帮助.cons ...
- 在CentOS上搭建svn服务器及注意事项
系统环境 CentOS 5.9 推荐使用yum install安装,比较简单 一.检查是否已经安装其他版本svn # rpm -qa subversion #卸载svn # yum remove ...
- 解决PHP move_uploaded_file函数移动图片失败
出现的问题描述:今天在实现一个在用户注册时上传头像图片文件的PHP脚本时,出现了问题:PHP脚本在前面已经确定 浏览器端上传文件没有错误.上传的文件是合法的.上传的文件是图像文件.已经在服务器端生成了 ...
- 苹果全新 Mac OS X 系统开放下载
在今天的发布会上,苹果除了发布多款硬件产品之外,还更新了Mac OS X Mavericks(小牛)系统,作为重大改变,这一Mac系统将从今天起开始免费升级. 升级后的Mavericks系统将进一步与 ...
- noty – jQuery通知插件
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从https://github.com/needim/noty 可 ...