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语法,这样才能 ...
随机推荐
- spark学习笔记总结-spark入门资料精化
Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...
- 个人网页的留言板实现与sae的数据库账户配置
个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...
- poj 1061 青蛙的约会 拓展欧几里得模板
// poj 1061 青蛙的约会 拓展欧几里得模板 // 注意进行exgcd时,保证a,b是正数,最后的答案如果是负数,要加上一个膜 #include <cstdio> #include ...
- Java学习笔记五——流程控制
分支结构 Java提供了两种常见的分支控制结构:if语句和switch语句. if语句 if语句使用布尔值或布尔表达式(表达式结果为布尔值),if语句有3中形式: 第一种形式: if (5 > ...
- 决策树 -- ID3算法小结
ID3算法(Iterative Dichotomiser 3 迭代二叉树3代),是一个由Ross Quinlan发明的用于决策树的算法:简单理论是越是小型的决策树越优于大的决策树. 算法归 ...
- ORACLE基本知识
一.数据库名 什么是数据库名? 数据库名就是一个数据库的标识,就像人的身份证号一样.他用参数DB_NAME表示,如果一台机器上装了多全数据库,那么每一个数据库都有一个数据库名.在数据库安装或创建完成 ...
- C#操作内存读写方法的主要实现代码
C#操作内存读写方法是什么呢?让我们来看看具体的实例实现: using System.Runtime.InteropServices; using System.Text; publicclass F ...
- Remote Desktop Connection Manager （RDCMan）
当前最新版本是 v2.7. 通过这款软件,我们便可以轻松的管理和访问数个RDP.左边的列表中我们可以创建总的分区列表(即 RDCMan Group),该列表保存采用的是RDG扩展名,使用时通过&quo ...
- Knockoutjs 实践入门 (3) 绑定数组
<form id="form1" runat="server"> <div> <!--text ...
- Python札记 -- 装饰器补充
本随笔是对Python札记 -- 装饰器的一些补充. 使用装饰器的时候,被装饰函数的一些属性会丢失,比如如下代码: #!/usr/bin/env python def deco(func): def ...