HTML5游戏开发之 -- lufylegend. js猜拳游戏(竖屏)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_19327991/article/details/77325483

不懂的部分可以查询API

传送门在此: http://lufylegend.com/api/zh_CN/out/classes/FPS.html

效果预览:
这里写图片描述

代码部分:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="mylegend"></div>
        <script type="text/javascript" src="js/lufylegend-1.7.6.min.js"></script>
        <script type="text/javascript">

            //窗口发生变化重新获取数据
            window.onresize = function(){
                history.go(0);//刷新页面进入进度条界面
                gamesSize();
            }

            function gamesSize() {

                //获取可视区域宽高
                var w = document.documentElement.clientWidth || document.body.clientWidth;
                var h = document.documentElement.clientHeight || document.body.clientHeight;

                //初始化(游戏速度设定,canvas的容器ID,游戏界面的宽,游戏界面的高,初始化后执行的函数)
                init(50,"mylegend",w,h,main);
            }

            gamesSize();

            var loadingLayer,//进度条
            backLayer,//背景层
            resultLayer,//结果显示层
            clickLayer,//操作层
            selfBitmap,//玩家出拳图片
            enemyBitmap,//电脑出拳图片
            selfTextAll,//猜拳次数
            selfTextWin,//胜利次数
            selfTextLoss,//失败次数
            selfTextDraw,//平局次数
            win = 0,
            loss = 0,
            draw = 0;
            var imglist = {};

            //设置需要加载的图片数据数组
            var imgData = new Array(
                    {name:"title",path:"./img/title2.png"},
                    {name:"shitou",path:"./img/shitou.png"},
                    {name:"jiandao",path:"./img/jiandao.png"},
                    {name:"bu",path:"./img/bu.png"}
                );

            //胜负结果判断数组
            var checkList = [
                    [0,1,-1],
                    [-1,0,1],
                    [1,-1,0]
                ];          

            var showList = new Array();

            function main() {

                //建立一个容器
                backLayer = new LSprite();  
                addChild(backLayer);

                //建立一个进度条(效果是第三种)
                loadingLayer = new LoadingSample3();

                //将进度条添加到backLayer容器中
                backLayer.addChild(loadingLayer);

                //LLoadManage类是可以用来同时读取图片,文本以及js多种类型的文件
                LLoadManage.load(

                    //指定需要加载的数组
                    imgData,

                    //加载过程中调用的函数,计算已加载的文件个数与总数比例,以设置进度条进度
                    function(progress) {
                        loadingLayer.setProgress(progress)
                    },

                    //数组中的所有数据加载完毕后调用的函数
                    function(result) {

                        //将进度条返回的数组赋值给imglist数组
                        imglist = result;

                        //移除进度条
                        backLayer.removeChild(loadingLayer);   

                        //清除loadingLayer容器
                        loadingLayer = null;

                        //数据加载完毕后显示游戏界面
                        gameInit();
                    }
                );                  
            }

            function gameInit(){

                //将所有图像路径添加至showList数组中
                showList.push(new LBitmapData(imglist["shitou"]));
                showList.push(new LBitmapData(imglist["jiandao"]));
                showList.push(new LBitmapData(imglist["bu"]));

                //添加游戏界面背景
                //Objct.graphics.drawRect(边框线宽度,边框线颜色,[X轴坐标,Y轴坐标,宽,高],背景色是否显示,设置背景色)
                backLayer.graphics.drawRect(10,'#008800',[0,0,LGlobal.width,LGlobal.height],true,'#000000');

                //显示游戏标题图片
                titleBitmap = new LBitmap(new LBitmapData(imglist['title']));

                //X轴缩放大小
                titleBitmap.scaleX = 0.5;

                //Y轴缩放大小
                titleBitmap.scaleY = 0.5;

                //容器X轴坐标
                titleBitmap.x = (LGlobal.width - 220)/2;

                //容器Y轴坐标
                titleBitmap.y = 30;

                //将容器添加至背景图层backLayer容器内(相当于resultLayer成为backLayer的子元素,坐标以他为相对值进行移动)
                backLayer.addChild(titleBitmap);

                //玩家方出拳图片
                selfBitmap = new LBitmap(showList[0]);
                selfBitmap.x = (LGlobal.width - selfBitmap.width)/2 - 80;
                selfBitmap.y = (LGlobal.height - selfBitmap.height)/2 + 80;
                backLayer.addChild(selfBitmap);

                //电脑方出拳图片
                enemyBitmap = new LBitmap(showList[0]);
                enemyBitmap.x = (LGlobal.width - enemyBitmap.width)/2 + 70;
                enemyBitmap.y = (LGlobal.height - enemyBitmap.height)/2 + 80;
                backLayer.addChild(enemyBitmap);

                //玩家电脑名称设定
                var nameText;
                nameText = new LTextField();
                nameText.text = "玩家";
                nameText.weight = "bolder";
                nameText.color = "#ffffff";
                nameText.size = 20;
                nameText.x = selfBitmap.x + (selfBitmap.width - nameText.getWidth())/2;
                nameText.y = (LGlobal.height - enemyBitmap.height)/2 + 40;
                backLayer.addChild(nameText);
                nameText = new LTextField();
                nameText.text = "电脑";
                nameText.weight = "bolder";
                nameText.color = "#ffffff";
                nameText.size = 20;
                nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth())/2;
                nameText.y = (LGlobal.height - enemyBitmap.height)/2 + 40;
                backLayer.addChild(nameText);   

                //结果显示层初始化
                initResultLayer();

                //操作层初始化
                initClickLayer();
            }

            function initResultLayer(){

                resultLayer = new LSprite();
                resultLayer.graphics.drawRect(4,'#ff8800',[0,0,150,110],true,'#ffffff');
                resultLayer.x = 10;
                resultLayer.y = 100;
                backLayer.addChild(resultLayer);

                selfTextAll = new LTextField();
                selfTextAll.text = "猜拳次数 : 0";
                selfTextAll.weight = "bolder";
                selfTextAll.x = 10;
                selfTextAll.y = 20;
                resultLayer.addChild(selfTextAll);

                selfTextWin = new LTextField();
                selfTextWin.text = "胜利次数 : 0";
                selfTextWin.weight = "bolder";
                selfTextWin.x = 10;
                selfTextWin.y = 40;
                resultLayer.addChild(selfTextWin);

                selfTextLoss = new LTextField();
                selfTextLoss.text = "失败次数 : 0";
                selfTextLoss.weight = "bolder";
                selfTextLoss.x = 10;
                selfTextLoss.y = 60;
                resultLayer.addChild(selfTextLoss);

                selfTextDraw = new LTextField();
                selfTextDraw.text = "平局次数 : 0";
                selfTextDraw.weight = "bolder";
                selfTextDraw.x = 10;
                selfTextDraw.y = 80;
                resultLayer.addChild(selfTextDraw);
            }

            function initClickLayer(){
                clickLayer = new LSprite();
                clickLayer.graphics.drawRect(4,'#ff8800',[0,0,LGlobal.width - 14,90],true,'#ffffff');
                clickLayer.x = 7;
                clickLayer.y = (LGlobal.height - 90) - 7;

                var msgText = new LTextField();
                msgText.text = "请出拳:";
                msgText.weight = "bolder";
                msgText.x = 10;
                msgText.y = 10;
                clickLayer.addChild(msgText);

                var btnShitou = getButton("shitou");
                btnShitou.x = (LGlobal.width - btnShitou.width)/2 - 80;
                btnShitou.y = 35;
                clickLayer.addChild(btnShitou);
                btnShitou.addEventListener(LMouseEvent.MOUSE_UP,onclick);

                var btnJiandao = getButton("jiandao");
                btnJiandao.x = (LGlobal.width - btnJiandao.width)/2 + 10;
                btnJiandao.y = 35;
                clickLayer.addChild(btnJiandao);
                btnJiandao.addEventListener(LMouseEvent.MOUSE_UP,onclick);

                var btnBu = getButton("bu");
                btnBu.x = (LGlobal.width - btnBu.width)/2 + 105;
                btnBu.y = 35;
                clickLayer.addChild(btnBu);
                btnBu.addEventListener(LMouseEvent.MOUSE_UP,onclick);
                backLayer.addChild(clickLayer);     
            }

            function onclick(event,display){
                var selfValue,enemyValue;

                //获取点击按钮的名称,并设置每个按钮的值
                if(display.name == "shitou"){
                    selfValue = 0;
                }else if(display.name == "jiandao"){
                    selfValue = 1;
                }else if(display.name == "bu"){
                    selfValue = 2;
                }

                //设置电脑的值(0-2的随机数)
                enemyValue = Math.floor(Math.random()*3);


                selfBitmap.bitmapData = showList[selfValue];
                enemyBitmap.bitmapData = showList[enemyValue];
                var result = checkList[selfValue][enemyValue];

                //判断胜负
                if(result == -1){
                    loss += 1;
                }else if(result == 1){
                    win += 1;
                }else{
                    draw += 1;
                }

                //统计胜负
                selfTextWin.text = "胜利次数 : " + win;
                selfTextLoss.text = "失败次数 : " + loss;
                selfTextDraw.text = "平局次数 : " +  draw;
                selfTextAll.text = "猜拳次数 : " + (win + loss + draw);
            }

            function getButton(value){

                var btnUp = new LBitmap(new LBitmapData(imglist[value]));
                btnUp.scaleX = 0.5;
                btnUp.scaleY = 0.5;

                var btnOver = new LBitmap(new LBitmapData(imglist[value]));
                btnOver.scaleX = 0.5;
                btnOver.scaleY = 0.5;
                btnOver.x = 2;
                btnOver.y = 2;

                var btn = new LButton(btnUp,btnOver);
                btn.name = value;
                return btn;
            }

        </script>
    </body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页