首页 > 代码库 > lufylegend游戏引擎

lufylegend游戏引擎

2024-08-16 21:29:11   220人阅读

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="http://www.mamicode.com/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=http://www.mamicode.com/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游戏引擎


联系
我们