當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

lufylegend游戏引擎

發布時間：2023/12/25 综合教程 36 生活家

生活随笔收集整理的這篇文章主要介紹了 lufylegend游戏引擎小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

lufylegend游戲引擎介紹：click

這個鏈接我覺得已經很詳細的介紹了這個引擎。

所以以下我只說說一些簡單的游戲代碼過程。

首先從canvas做游戲敘述起：

這是一個讓人很熟悉的簡單小游戲，網上到處都是這個小游戲代碼，所以就簡單說說；

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡單游戲</title>
    <script type="text/javascript" src="game.js"></script>
</head>
<body>
    <canvas id="canvas">你的瀏覽器太low了！</canvas>
    <script type="text/javascript">
    
        window.onload=function(){
            game("canvas");
        }
    </script>
</body>
</html>

js代碼：

function game(id){
    /*創建畫布*/
    var oCanvas=document.getElementById(id);
    var canvas=oCanvas.getContext("2d");
    oCanvas.width="512";
    oCanvas.height="480";
    /*******準備圖片***********/
    /******************
    為什么要確認圖片是否被加載進來了，因為在圖片還沒加載進來就對其操作，
    很容易會出現各種問題，如圖片出不來
    *******************/
    /*背景圖*/
    var bgImg=new Image();
    bgImg.src="./images/background.png";
    bgImg.success=false;
    bgImg.onload=function(){
        bgImg.success=true;
    }

    /*玩家人物圖*/
    var hero=new Image();
    hero.src="./images/hero.png";
    hero.success=false;
    hero.onload=function(){
        hero.success=true;
    }

    /*怪物圖*/
    var monster=new Image();
    monster.src="./images/monster.png";
    monster.success=false;
    monster.onload=function(){
        monster.success=true;
    }
    /***********游戲對象*********/
    /*人物位置*/
    /*******************
    為什么使用數組？因為這樣好管理，優化代碼
    *********************/
    hero.pos={
        x:0,
        y:0,
        speed:256
    }

    /*怪物位置*/
    monster.pos={
        x:0,
        y:0
    }

    var monsterCaught=0;
    /*******處理用戶的輸入*******/
    /***************
    為什么按鍵彈起取消獲取到鍵值了，這是為了下面判斷時運動的
    **************************/
    var keysDown={};
    var keyNum=null;
    /*addEventListener,在沒有寫對象下，默認為window下的對象*/
    addEventListener("keydown",function(e){
        e= e || window.event;
        keyNum=e.keyCode;
        keysDown[e.keyCode]=true;
    },false);
    addEventListener("keyup",function(e){
        keyNum=null;
        delete keysDown[e.keyCode];
    },false);

    /*******初始化游戲******/
    /**************
    確認怪物和玩家的初始位置
    *******************/
    function gameInit(){
        hero.pos.x=oCanvas.width/2;
        hero.pos.y=oCanvas.height/2;

        monster.pos.x=32+(Math.random()*oCanvas.width-64);
        if(monster.pos.x<=0){
            monster.pos.x=0;
        }
        monster.pos.y=32+(Math.random()*oCanvas.height-64);
        if(monster.pos.y<=0){
            monster.pos.y=0;
        }
    }
    /*更新對象*/

    function update(m){
        if(keyNum==38){
            /*每秒走的距離*時間間距=距離*/
            hero.pos.y-=hero.pos.speed*m;
        }else if(keyNum==40){
            hero.pos.y+=hero.pos.speed*m;
        }else if(keyNum==37){
            hero.pos.x-=hero.pos.speed*m;
        }else if(keyNum==39){
            hero.pos.x+=hero.pos.speed*m;
        }
        /*monster.pos.x<=hero.pos.x<=monster.pos.x+32*/
        /*y也同理*/
        /*這是為了碰撞檢測的,是碰撞就初始化游戲*/
        if(hero.pos.x<=(monster.pos.x+32)&&monster.pos.x<=(hero.pos.x+32)&&hero.pos.y<=(monster.pos.y+32)&&monster.pos.y<=(hero.pos.y+32)){
            monsterCaught++;
            gameInit();
        }

    }

    /*渲染物體*/
    /*畫出游戲界面*/
    function render(){
        if(bgImg.success){
            canvas.drawImage(bgImg,0,0);
        }
        if(hero.success){
            canvas.drawImage(hero,hero.pos.x,hero.pos.y);
        }
        if(monster.success){
            canvas.drawImage(monster,monster.pos.x,monster.pos.y);
        }
        canvas.fillStyle="red";
        canvas.font="30px Arial";
        canvas.textAlign="left";
        canvas.textBaseline="top";
        canvas.fillText("得分："+monsterCaught,10,10);
    }

    /*主循環函數*/
    /*使用來循環的整個游戲的，這樣就可以時時刻刻監聽整個界面的變化，做出相對應的改變*/
    function main(){
        var now=new  Date().getTime();
        /*獲取觸發時間的間距*/
        /*為每秒運動的距離不變,這個就不受定時器時間誤差影響到運動距離*/
        var delta=now-then;
        /*時間間距以秒為準delta/1000*/
        update(delta/1000);
        render();
        requestAnimationFrame(main);
        then=now;
    }
    /*啟動游戲！*/

/*它就是一個性能很好的setTimeout,只是它的幀數是根據瀏覽器來的，一般來說每秒60幀*/
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

var then=new  Date().getTime();
gameInit();
main();
}

這是個很簡單的游戲，而它沒有使用clearRect這個清除界面，而是直接使用背景

去覆蓋掉上去，達到清除的效果，就像ps圖層一樣，上一層覆蓋下一層。

OK，接下來是游戲引擎的。

讓小人走動起來；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="lufylegend-1.5.1.js"></script>
</head>
<body>
    <div id="my"></div>
    <script>
    /*把屏幕分成4行，4列*/
        // console.log(LGlobal.divideCoordinate(256,256,4,4));
        init(100,"my",500,350,main);
        var layer,aina,loader;
        /*LEvent.COMPLETE圖片加載完成后進入下一個函數*/
        function main(){
            loader=new LLoader();
            loader.addEventListener(LEvent.COMPLETE,loadBitData);
            loader.load("chara.png","bitmapData");
        }
        function loadBitData(){
            /*LBitmapData圖片數據，可以操作圖片*/
            var bitmapdata=new LBitmapData(loader.content,0,0,64,64);
            /*把寬高為固定的圖像分成多少行，多少列*/
            var list=LGlobal.divideCoordinate(256,256,4,4);
            /*創建圖層*/
            layer=new LSprite();
            /*添加圖層到底層*/
            addChild(layer);
            /*運動*/
            aina=new LAnimation(layer,bitmapdata,list);
            layer.addEventListener(LEvent.ENTER_FRAME,onframe);
        }
        function onframe(){
            var gA=aina.getAction();
            switch(gA[0]){
                case 0 : layer.y+=5;
                if(layer.y>=200){
                    aina.setAction(2);
                };break;
                case 1 : layer.x-=5;
                if(layer.x<=0){
                    aina.setAction(0);
                };break;
                case 2 : layer.x+=5;
                if(layer.x>=200){
                    aina.setAction(3);
                };break;
                case 3 : layer.y-=5;
                if(layer.y<=0){
                    aina.setAction(1);
                };break;
            }
            aina.onframe();
        }
    </script>
</body>
</html>

核心是LAnimation，只要會使用這個就很好理解上的了，查手冊就知道怎么使用。

其實游戲就是在動畫的基礎上進一步對這個動畫各種效果進行人工的操作，而這個

人工操作的實現過程就需要各種判斷來實現，所以讓畫面動了就成功一半，只差一些

游戲方面的邏輯修改它，讓它轉為人工操作了。所以我把這個叫做從自動轉為手動。

當然游戲沒有那么簡單，這只是做一些很簡單的游戲是這樣，但游戲就是人為操作動畫的

過程，而在代碼實現過程最好的是為好層次，如js文件就要分基礎，背景，人物，怪物，按鍵等等

這只是比如，不同情況，不同對待，這樣可以讓邏輯清晰，易讀，但要修改就要使用到面向對象的模式去

編寫代碼了，這個比較易維護。不過現在編寫模式很多，個人的判斷和習慣。

雖然剛剛學游戲編寫沒有多久，但覺得這個數學很重要，所以數學知識也不能缺。

總結

以上是生活随笔為你收集整理的lufylegend游戏引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。