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

灰太狼 2022-09-10 07:21 185阅读 0赞

> ##    效果演示：   ##
> 
> ![20210906151032164.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 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>
        // 引擎初始化函数。等同于 init
        init(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 - 7
            loadingLayer = 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套][HTML5_100] ###

>   打卡 文章 更新** 40  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210906151032164.gif]: /images/20220829/0f27a555e3734433b5e01f803f0b4950.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/158025e16d1c4af7ba9bbf5629e50cdf.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/8b6407d5c56e4180b16d14d3c942ac8e.png