HTML+CSS+JS实现 ❤️卡通人物吃水果游戏❤️

   效果演示:  

代码目录:

主要代码实现:

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/lufylegend-1.10.1.min.js"></script><script>//当前浏览器是否是移动浏览器if (LGlobal.canTouch) {//指定要使用哪种缩放模式的值。LGlobal.stageScale = LStageScaleMode.EXACT_FIT;//如果是移动端的话 就平铺效果LSystem.screen(LStage.FULL_SCREEN);}</script>
</head><body><div id="legend"></div>
</body></html>
<script>// 引擎初始化函数。等同于 initinit(50, "legend", 800, 450, main);//素材变量var imgData = [{name: "back",path: "./images/back.jpg"},{name: "player",path: "./images/player.png"},{name: "item0",path: "./images/item0.png"},{name: "item1",path: "./images/item1.png"},{name: "item2",path: "./images/item2.png"},{name: "item3",path: "./images/item3.png"},{name: "item4",path: "./images/item4.png"},{name: "item5",path: "./images/item5.png"},{name: "item6",path: "./images/item6.png"},{name: "item7",path: "./images/item7.png"}];var imglist;//层对象var backLayer, playerLayer, itemLayer, overLayer, loadingLayer;var hero; //人物角色var step = 50,stepindex = 0; //速度和初始化的图片位置var point = 0,pointTxt; //积分 和 积分的文本var hp = 1,hpTxt; //生命值 和生命值显示的文本function main() {//创建一个加载层对象  1 - 7loadingLayer = new LoadingSample3();//将加载层放到舞台上面 (底图)addChild(loadingLayer);//加载素材LLoadManage.load(imgData, function(progress) {loadingLayer.setProgress(progress);}, gameInit);}//游戏记载完素材后初始化function gameInit(result) {//删除掉加载层removeChild(loadingLayer);imglist = result;//绘制背景层//新建一个图层backLayer = new LSprite();//将背景图层添加到舞台上面addChild(backLayer);//添加背景图片   //自定义方法addBackGround();//添加人物  自定义方法addPlayer();//添加物品层itemLayer = new LSprite();//将物品添加到背景层backLayer.addChild(itemLayer);//初始化人物运动绑定事件addEvent();//添加分数addText();//添加一个游戏结束层overLayer = new LSprite();//将游戏结束层添加到背景层里面去backLayer.addChild(overLayer);}function addText() {//创建一个文本类的对象hpTxt = new LTextField();//填充颜色hpTxt.color = "#ff0000";hpTxt.size = 30;hpTxt.x = 10;hpTxt.y = 10;backLayer.addChild(hpTxt);//积分文本pointTxt = new LTextField();pointTxt.color = "#ffffff";pointTxt.size = 30;pointTxt.x = 10;pointTxt.y = 50;backLayer.addChild(pointTxt);showText();}function showText() {hpTxt.text = "生命:" + hp;pointTxt.text = "积分:" + point;}//添加一个物品function addItem() {//实例化一个物品对象var item = new Item();item.x = 20 + Math.floor(Math.random() * (LGlobal.width - 50));itemLayer.addChild(item);}//物品对象function Item() {//继承base(this, LSprite, []);var self = this;//物品会有一个die模式self.mode = "";//随机产生一个下标var index = Math.floor(Math.random() * 8);//根据下标来判断一下物品是加分还是减分self.value = index < 4 ? 1 : -1;//获取图片对象var bitmap = new LBitmap(new LBitmapData(imglist[`item${index}`]));//将图片塞到物品对象里面self.addChild(bitmap);}Item.prototype.run = function() {var self = this;self.y += 5; //往下落var hit = self.checkHit(); //自定义的方法 检测碰撞if (hit || self.y > LGlobal.height) {self.mode = "die"; //消亡}}//检测碰撞方法Item.prototype.checkHit = function() {var self = this;if (LGlobal.hitTestArc(self, hero)) {if (self.value > 0) {//加分point += 1;} else {//减生命值hp -= 1;}return true;}return false;}function addEvent() {backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);backLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);//播放事件  播放帧动画backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);}function onDown(event) {if (event.selfX < LGlobal.width / 2) {hero.mode = "left";hero.anime.setAction(1); //设置人物的第几行动画} else {hero.mode = "right";hero.anime.setAction(2);}}function onUp() {hero.mode = "";hero.anime.setAction(0); //弹起鼠标将人物回归正面}function onframe() {//给人物运动自定义一个方法hero.run();//让物品层里面的所有物品都下落运动for (var i = 0; i < itemLayer.childList.length; i++) {//让所有的物品运动itemLayer.childList[i].run();if (itemLayer.childList[i].mode == "die") {//销毁itemLayer.removeChild(itemLayer.childList[i]);}}if (stepindex++ > step) {stepindex = 0;//添加一个物品addItem();}//更新积分showText();//游戏结束if (hp <= 0) {gameOver();return false;}}//游戏结束function gameOver() {//将背景层里面的所有事件全部消亡backLayer.die();//删除物品层里面所有的物品itemLayer.removeAllChild();var txt = new LTextField();txt.color = "#ff0000";txt.size = 50;txt.text = "GAME OVER";txt.x = (LGlobal.width - txt.getWidth()) * 0.5;txt.y = 100;//将文本放到游戏结束层里面去overLayer.addChild(txt);backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function() {backLayer.die(); //全部销毁overLayer.removeAllChild(); //游戏结束层全部销毁hp = 10;point = 0;addEvent(); //重新绑定事件});}function addPlayer() {//新建一个图层playerLayer = new LSprite();//把人物添加到背景层里面去backLayer.addChild(playerLayer);//将人物封装成一个对象hero = new Player();//设置人物的坐标hero.x = hero.y = 350;//将人物图片对象塞到人物层里面playerLayer.addChild(hero);}//新建一个人物对象function Player() {//人物对象其实本身也是一个图层 所以需要继承base(this, LSprite, []);var self = this;//人物可以往左边 还可以右边self.mode = "";//将一张256*256的一张图片切割成 4行4列的一个二维数组坐标var list = LGlobal.divideCoordinate(256, 256, 4, 4);//搞一个人物图片  先加载素材 -> 变成 图片对象var data = new LBitmapData(imglist["player"], 0, 0, 64, 64);//设置一组动画 让当前图层里面的图片按照指定的坐标顺序来动self.anime = new LAnimation(self, data, list);//限制人物的走动速度self.step = 2, self.stepindex = 0;}//人物运动方法Player.prototype.run = function() {var self = this;//限制速度  每隔3次才调用一次运动方法if (self.stepindex++ > self.step) {self.stepindex = 0;self.anime.onframe(); //让人物动起来}//判断人物是往左边 还是右边if (self.mode == "left") {if (self.x > 10) {self.x -= 10;}} else if (self.mode == "right") {if (self.x < LGlobal.width - self.getWidth()) {self.x += 10;}}}function addBackGround() {// LBitmap将加载的图片素材变成一个具体的img对象 LBitmapData加载图片素材var bitmap = new LBitmap(new LBitmapData(imglist['back']));//将背景图片放到背景层里面去backLayer.addChild(bitmap);}document.onkeydown = function(e) {var e = e || event;}function keydown(e) {var e = e || event;var key = e.keyCode || e.which || e.charCode;if (key == 32) {if (hero.mode == "left") {if (hero.x > 10) {hero.x -= 20;}} else if (hero.mode == "right") {if (hero.x < LGlobal.width - hero.getWidth()) {hero.x += 20;}}}}document.onkeydown = keydown;
</script>

上面的图片和js需要引入 

源码获取

查看博主主页或私信博主获取

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新 40  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

py哪个函数可以返回输入的变量类型_[Python基础]二、pycharm,python变量

2.1 Python简介Life is short,you need Python (人生苦短&#xff0c;我用Python)解释器&#xff1a;将其他语言翻译成机器语言的工具&#xff0c;称为编译器编译器的翻译方法有两种&#xff1a;编译解释Python的设计哲学优雅明确简单Python开发者哲学&#xff1a;用一种方法&a…

HTML+CSS+JS实现 贪吃蛇游戏源码

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; 部分代码 : <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…

mysql sql高级应用程序_mysql-sql高级应用

sql语言进阶典型操作order by- select * from play_list order bycreatetime;- select * from play_list order by bookedcount desc,createtime asc;order by语句用于根据指定的列对结果集进行排序order by语句默认按照升序对记录排序&#xff0c;使用desc则降序排序order by也…

HTML+CSS+JS实现 ❤️个人相册封面卡片❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; import url("https://s2.pstatp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"); body {background-color: #1F1F1F;o…

python隐藏启动台_如何在Python中启动后台进程?

如何在Python中启动后台进程&#xff1f;我正在尝试将shell脚本移植到更易读的python版本。 原始shell脚本在后台使用“&#xff06;amp;”启动多个进程(实用程序&#xff0c;监视器等)。 如何在python中实现相同的效果&#xff1f; 我希望这些进程不会在python脚本完成时死掉。…

HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; .img_swiper {width: 800px;margin: 0 auto;position: relative; }.img {width: 100%;height: 100%; }.img_swiper .swiper-button-prev {width: 40px;height: 40px;background-im…

如何将c语言程序封装供python调用_C++调用python

C调用python在C/C中嵌入Python&#xff0c;可以使用Python提供的强大功能&#xff0c;通过嵌入Python可以替代动态链接库形式的接口&#xff0c;这样可以方便地根据需要修改脚本代码&#xff0c;而不用重新编译链接二进制的动态链接库。至少你可以把它当成文本形式的动态链接库…

HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; * {margin: 0;padding: 0;list-style: none;border: 0; }body {width: 100%;margin: 0 auto;overflow: hidden }/* main_image */.main_visual {heigh…

win10配置mysql8.0_Win10下mysql 8.0.20 安装配置方法图文教程

Win10系统下MySQL 8.0.20安装和配置超详细教程MySQL下载MySQL直接去官网下载就行&#xff0c;选择community版本(免费)下载&#xff0c;链接。在select operating system中选择Microsoft Windows&#xff0c;下方对应出现最新版本的MySQL&#xff0c;目前是MySQL 8.0.20&#x…

HTML+CSS+JS实现 ❤️echarts省市区地图城市选择❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; * {margin: 0;padding: 0; }body {font-family: Exo, -apple-system, Open Sans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Hiragino Sans GB, Microsoft YaH…

基于SpringBoot+mybatis+layui就业管理系统设计和实现

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java集合清空_java 集合删除数据

public static void main(String[] args) {List list new ArrayList<>(Arrays.asList(1, 2, 3, 4));// 常规删除// list.removeIf(next -> next 3);Iterator iterator list.iterator();while (iterator.hasNext()) {// Integer next iterator.next();// 当不执行 …

HTML+CSS+JS实现 ❤️图片轮播幻灯片❤️

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; font-face {font-weight: normal;font-style: normal; }.csslider1 {display: inline-block;position: relative;max-width: 833px;width: 100%;margin-top: 10px; }.…

single java_java single Pattern 单例模式

单例模式是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它涉及到一个单一的类&#xff0c;该类自己负责创建自己的对象并且确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式&#xff0c;可以直接访问&#xff0c;不需要实例化…

HTML+CSS+JS实现 ❤️ html5响应式图片轮播❤️

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; .flickerplate {position: relative;width: 100%;height: 600px;background-color: #e6e6e6;overflow: hidden }.flickerplate ul.flicks {width: 10000%;height: 100…

php time java_java 时间戳和PHP时间戳 的转换 php time()

最近在弄discuz,数据库mysql,时间类型int 10总结一下java 时间戳和PHP时间戳 的转换问题&#xff1a;由于精度不同&#xff0c;导致长度不一致&#xff0c;直接转换错误。JAVA时间戳长度是13位&#xff0c;如&#xff1a;1294890876859PHP时间戳长度是10位&#xff0c; 如&…

HTML+CSS+JS实现 ❤️HTML5图片幻灯片轮播切换❤️

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; HTML代码 : <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1…

HTML+CSS+JS实现echarts图表炫光分布地图动画

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; HTML代码 : <html lang"en"><head><meta charset"utf-8"><title>ECharts</title> </head><body style"background:#1B1…

java jndi使用_java – 使用JNDI进行数据库连接

那么,它是一个客户端应用程序&#xff1f;应用程序和数据库通常使用DriverManager#getConnection()获得的连接相互通信&#xff1f;如果是这样,那么您不一定需要JNDI才能使连接池工作.单独的连接池框架已经足够了.例如C3P0或Apache Commons DBCP(我建议使用C3P0; DBCP是单线程的…

HTML+CSS+JS实现 ❤️echarts企业地区大数据图表模板❤️

效果演示&#xff1a; 文末获取源码 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; body, ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd {margin: 0;padding: 0; }ul, li {list-style: none; }a:link, a:visited, a:active {text-decoration: none; …