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 是一个简单的.面向对象.为设计者开发者准备的图表绘制工具. 点击进入官方网址 ...
随机推荐
- HDU 6249 Alice’s Stamps（2017 CCPC-Final G题，DP）
题目链接 HDU 6249 题意 给定$m$个区间,在这些区间中选出不超过$k$个,求被覆盖的点的数量的最大值. 设$f[i][j]$表示选到第$i$个点并选了$j$个区间的时候能得到的最大答案. 处 ...
- usaco-Subset Sums
题意: 给出一个1-n的数列,求把它分为两组数使得两组数的和相等的方案数. 分析: 如果可能分成两组,那么(n+1)n/2一定为偶数,且n%4=2或3.可以设dp[i][j]表示从1-i中的数拼出的方 ...
- spring-cloud集成mybatis-plus
mybatis-plus插件是对mybatis做出系列增强插件,后面简称MP,MP可免去开发者重复编写xml.mapper.service.entity等代码,通过MP提供的实体注解来完成单表的CRU ...
- WinForm版聊天室复习Socket通信
聊天室:服务器端-------------客户端 最终演示展示图: 一. 服务器端 对服务端为了让主窗体后台不处理具体业务逻辑,因此对服务端进行了封装,专门用来处理某个客户端通信的过程. 而由于通信管 ...
- 基于WPF系统框架设计(8)-PasswordBox传值到ViewMode
应用场景 我要做一个系统登录功能,需要传用户名和密码到ViewModel中,可是PasswordBox传值到ViewModel中好像跟TextBox等控件不一样.这里需要用到附加属性. 附加属性:一个 ...
- JAVA_Could not find property [struts.actionMapping]怎么办
你的项目中不包含log4j.jar这个文件,包含进去即可
- 通过apache,和nginx模块去除html中的空格和tab
最近一个项目中,合作方要求去除html中的空格,不想改代码,所以百度了一下通过apache,和nginx模块去除html中的空格和tab的方案,下面记录下来: 一.nginx nginx可以通过mod ...
- PS中混合模式是什么意思？
PS中图层混合模式中的溶解,变暗,正片叠底,颜色加深,线性加深,叠加,柔光,亮光,强光,线性光,点光,实色混合,差值,排除,色相,饱和度,颜色,亮度各是什么原理? Normal 正常模式,也是 ...
- vue2.0 仿手机新闻站（四）axios
1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...
- VUE 路由变化页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...