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>
    // 引擎初始化函式，等同于 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套
打卡文章更新 40 / 100天

大家可以點贊、收藏、關注、評論我啦、需要完整檔案隨時聯系我或交流喲~！
在這里插入圖片描述
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/298450.html
標籤：其他
上一篇：用Python進行游戲輿論分析，生成詞云，原始碼贈送，文末評論送書包郵！！！
下一篇：Java入門基礎知識點總結（詳細篇）