每日一练（二）HTML5-lufylegend.js制作猜拳游戏

最新推荐文章于 2024-04-17 09:44:36 发布

WebCoderT

最新推荐文章于 2024-04-17 09:44:36 发布

阅读量283

点赞数

分类专栏： canvas lufylegend 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_46819856/article/details/112210346

版权

canvas 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

lufylegend

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>石头剪刀布</title>
    <script src="lufylegend-1.10.1.min.js"></script>
</head>
<body>
<div id="legend"></div>
</body>
<script>
    init(50, "legend", 800, 500, main);
    var backLayer, clickLayer, resultLayer, loadingLayer, selfBitmap, enemyBitmap;
    var imglist = {}, imgData = new Array(
        {name: "title", path: "./images/title.png"},
        {name: "shitou", path: "./images/1.png"},
        {name: "jiandao", path: "./images/2.png"},
        {name: "bu", path: "./images/3.png"}
    );
    var showList = new Array();
    var selfTextALl, selfTextWin, selfTextLoss, selfTextDraw;
    var all = 0, win = 0, loss = 0, draw = 0;
    var checkList = [
        [0, 1, -1],
        [-1, 0, 1],
        [1, -1, 0]
    ];

    function main() {
        backLayer = new LSprite();
        addChild(backLayer);
        loadingLayer = new LoadingSample3();
        backLayer.addChild(loadingLayer);
        LLoadManage.load(
            imgData,
            function (progress) {
                loadingLayer.setProgress(progress)
            },
            function (result) {
                imglist = result;
                backLayer.removeChild(loadingLayer)
                loadingLayer = null;
                initGame();
            }
        )
    }

    function initGame() {
        showList.push(new LBitmapData(imglist["shitou"]));
        showList.push(new LBitmapData(imglist["jiandao"]));
        showList.push(new LBitmapData(imglist["bu"]));
        //添加游戏界面背景
        backLayer.graphics.drawRect(10, "#008800", [0, 0, LGlobal.width, LGlobal.height], 1, "#000");
        //显示游戏标题
        var titleBitmap = new LBitmap(new LBitmapData(imglist["title"]));
        titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
        titleBitmap.y = 10;
        backLayer.addChild(titleBitmap);
        //玩家方出拳图片
        selfBitmap = new LBitmap(showList[0]);
        selfBitmap.x = 400 - selfBitmap.width - 50;
        selfBitmap.y = 300;
        backLayer.addChild(selfBitmap);
        //电脑方出拳图片
        enemyBitmap = new LBitmap(showList[0]);
        enemyBitmap.x = 400 - enemyBitmap.width + 50;
        enemyBitmap.y = 300;
        backLayer.addChild(enemyBitmap);
        //玩家，电脑名称设定
        var nameText;
        nameText = new LTextField();
        nameText.text = "玩家";
        nameText.weight = "bolder";
        nameText.color = "#fff";
        nameText.size = 24;
        nameText.x = selfBitmap.x + (selfBitmap.width - nameText.getWidth()) / 2;
        nameText.y = selfBitmap.y - selfBitmap.height - 50;
        backLayer.addChild(nameText);
        nameText = new LTextField();
        nameText.text = "电脑";
        nameText.weight = "bolder";
        nameText.color = "#fff";
        nameText.size = 24;
        nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth()) / 2;
        nameText.y = enemyBitmap.y - enemyBitmap.height - 50;
        backLayer.addChild(nameText);
        initResultLayer();//结果层初始化
        initClickLayer();//操作层初始化
    }

    function initResultLayer() {
        resultLayer = new LSprite();
        resultLayer.graphics.drawRect(4, "#ff8800", [0, 0, 150, 110], 1, "#fff");
        resultLayer.x = 10;
        resultLayer.y = 100;
        backLayer.addChild(resultLayer);
        drawResultText("selfTextALl", "猜拳次数：0", 10, 20);
        drawResultText("selfTextWin", "获胜次数：0", 10, 40);
        drawResultText("selfTextLoss", "失败次数：0", 10, 60);
        drawResultText("selfTextDraw", "平局次数：0", 10, 80);
    }

    function drawResultText(name, text, x, y) {
        window[name] = new LTextField();
        window[name]["text"] = text;
        window[name]["weight"] = "bolder";
        window[name]["color"] = "red";
        window[name]["x"] = x;
        window[name]["y"] = y;
        resultLayer.addChild(window[name]);
    }

    function initClickLayer() {
        clickLayer = new LSprite();
        clickLayer.graphics.drawRect(4, "#ff8800", [0, 0, 300, 110], 1, "#fff");
        clickLayer.x = 250;
        clickLayer.y = 380;
        backLayer.addChild(clickLayer);
        var mesText = new LTextField();
        mesText.text = "请出拳：";
        mesText.weight = "bolder";
        mesText.x = 10;
        mesText.y = 10;
        clickLayer.addChild(mesText);
        var shitou = getButton("shitou");
        shitou.x = 30;
        shitou.y = 35;
        clickLayer.addChild(shitou);
        var jiandao = getButton("jiandao");
        jiandao.x = 115;
        jiandao.y = 35;
        clickLayer.addChild(jiandao);
        var bu = getButton("bu");
        bu.x = 200;
        bu.y = 35;
        clickLayer.addChild(bu);
        shitou.addEventListener(LMouseEvent.MOUSE_UP, onclick);
        jiandao.addEventListener(LMouseEvent.MOUSE_UP, onclick);
        bu.addEventListener(LMouseEvent.MOUSE_UP, onclick);

    }

    function getButton(value) {
        var btnUp = new LBitmap(new LBitmapData(imglist[value]));
        var btnOver = new LBitmap(new LBitmapData(imglist[value]));
        btnOver.x = 2;
        btnOver.y = 2;
        var btn = new LButton(btnUp, btnOver);
        btn.name = value;
        return btn;
    }

    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;
        }
        enemyValue = Math.floor(Math.random() * 3);
        selfBitmap.bitmapData = showList[selfValue];
        enemyBitmap.bitmapData = showList[enemyValue];
        var result = checkList[selfValue][enemyValue];
        if (result == 1) {
            win += 1;
        } else if (result == 0) {
            draw += 1;
        } else if (result == -1) {
            loss += 1;
        }
        all += 1;
        selfTextALl.text = "猜拳次数：" + all;
        selfTextWin.text = "胜利次数：" + win;
        selfTextLoss.text = "失败次数：" + loss;
        selfTextDraw.text = "平局次数：" + draw;
    }
</script>
</html>

WebCoderT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
每日一练（二）HTML5-lufylegend.js制作猜拳游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>石头剪刀布</title> <script src="lufylegend-1.10.1.min.js"></script></head><body><div id="legend"></div>
复制链接

扫一扫