HTML5(lufylegend.js练习)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5-lufyLegend测试</title>
<script type="text/javascript" src="js/lufylegend-1.5.1.min.js"></script>
<script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var layermap = 400;
var loader = "";
var annimation = "";
var layer = "";
/**
50 -游戏 加载速度
"mylegend" div的id
500,500 游戏 界面的宽和高
main 初始化完成后调用次函数
**/
init(50,"mylegend",500,500,main); function main(){
//使用Lloader类加载图片数据
loader = new LLoader();
loader.load("image/chara.png", "bitmapData");
//图片数据加载完成后执行loadbitMapData函数
loader.addEventListener(LEvent.COMPLETE, loadbitMapData);
} function loadbitMapData(){
//LBitmapData用来保存和读取image数据的
var bitmapData = new LBitmapData(loader.content,0,0,64,64);
//LBitmap用来显示图片的
var bitmap = new LBitmap(bitmapData);
//坐标组 分割出每个小图片的坐标值 可顺序显示每个图片的坐标
var list = LGlobal.divideCoordinate(256, 256, 4, 4);
//层的概念
layer = new LSprite();
annimation = new LAnimation(layer, bitmapData, list);
//layer.addChild(bitmap);
//设定层的 x,y,旋转以及透明度
//layer.x = 0;
//layer.y = 0;
//layer.rotate = 180;
//layer.alpha = 0.5;
//显示
addChild(layer);
//LGraphics()的使用
//var g = new LGraphics();
//var g = layer.graphics;
//用LGraphic画矩形
//g.drawRect(1, "#ccc",[50,50,100,100]);
//g.drawRect(1, "#ccc",[50,50,100,100],true,"red");
//用LGraphic画圆形
//g.drawArc(1, "#ddd", [30,30,10,0,360*Math.PI/180,true], true, "blue");
// layer.addEventListener(LEvent.ENTER_FRAME, onframe);
// layer.addEventListener(LKeyboardEvent.KEY_DOWN, onframe);
//增加键盘事件
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, onframe); }
function onframe(event){ var code = event.keyCode;
if(code == 37){// <- 左键
//读取第几行(改变行)
annimation.setAction(1);
layer.x-=5;
if(layer.x<=0){
layer.x = 0;
}
}else if(code == 38){ // 上键
annimation.setAction(3);
layer.y-=5;
if(layer.y<=0){
layer.y = 0;
} }else if(code == 39){ //右键
annimation.setAction(2);
layer.x+=5;
if(layer.x>=layermap){
layer.x = layermap;
} }else if(code == 40){//下键
annimation.setAction(0);
layer.y+=5;
if(layer.y>=layermap){
layer.y = layermap;
} }
/*
var action = annimation.getAction();
switch(action[0]){
case 0 :
layer.y+=15;
if(layer.y>=layermap){
annimation.setAction(2);
}
break;
case 1 :
layer.x-=5;
if(layer.x<=0){
annimation.setAction(0);
}
break;
case 2 :
layer.x+=5;
if(layer.x>=layermap){
annimation.setAction(3);
}
break;
case 3 :
layer.y-=5;
if(layer.y<=0){
annimation.setAction(1);
}
break;
} */
//将播放图片的序列号加1(改变列)
annimation.onframe(); } });
</script>
</head>
<body>
<div id="mylegend">loading...</div>
</body>
</html>
HTML5(lufylegend.js练习)的更多相关文章
- 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
前言 本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML5 Chart.js 框架
HTML5 Chart.js 框架 版权声明:未经博主授权,内容严禁转载 ! Chart.js 概述: chart.js 是一个简单的.面向对象.为设计者开发者准备的图表绘制工具. 点击进入官方网址 ...
随机推荐
- Java IO 学习（二）select/poll/epoll
如上文所说,select/poll/epoll本质上都是同步阻塞的,但是由于实现了IO多路复用,在处理聊天室这种需要处理大量长连接但是每个连接上数据事件较少的场景时,相比最原始的为每个连接新开一个线程 ...
- （2）JavaScript基础2
一.操作符 1.一元操作符 自加自减操作符 前置型 执行前置递增和递减操作时,变量的值都是在语句被求值以前改变的 var num1 = 2; var num2 = 20; var num3 = --n ...
- ELK之filebeat收集多类型日志
1.IP规划 10.0.0.33:filebeat+tomcat,filebeat收集系统日志.tomcat日志发送到logstash 10.0.0.32:logstash,将日志写入reids(in ...
- luogu P1260 工程规划（luogu wa）don't know way
题目描述 造一幢大楼是一项艰巨的工程,它是由n个子任务构成的,给它们分别编号1,2,…,n(5≤n≤1000).由于对一些任务的起始条件有着严格的限制,所以每个任务的起始时间T1,T2,…,Tn并不是 ...
- Http头 Range、Content-Range
HTTP头中一般断点下载时才用到Range和Content-Range实体头,Range用户请求头中,指定第一个字节的位置和最后一个字节的位置,如(Range:200-300)Content-Rang ...
- Mysql的时间戳转date类型
mysql 的 时间戳转date类型 select FROM_UNIXTIME(1491031706235/1000,'%Y-%m-%d') from dual;
- c/c++：回调函数
1:函数名为指针 首先,在C语言中函数是一种function-to-pointer的方式,即对于一个函数,会将其自己主动转换成指针的类型.如: 1 #include<stdio.h> 2 ...
- PM2.5
http://baike.baidu.com/view/1423678.htm PM2.5是指大气中直径小于或等于2.5微米的颗粒物,也称为可入肺颗粒物.虽然PM2.5只是地球大气成分中含量很少的组分 ...
- WINDOWS下的squid
今天写这篇教程目的在于分享自己在WINDOWS主机下配置squid的方法.哪些地方写的不完善或是不完整或是需要修改的地方,大家可以提出.我会第一时间纠正.下面看正文部分.先提条件,您预安装配置squi ...
- Splash动画启动app时空白屏
相信大多数人一开始都会对启动app的时候出现先白瓶或者黑屏然后才进入第一个界面,例如:SplashActivity.那这是什么原因造成的呢? <style name="Splash_T ...