canvas-基于lufyLegend的石头、剪刀、布游戏

最新推荐文章于 2024-05-14 02:27:52 发布
最新推荐文章于 2024-05-14 02:27:52 发布
阅读量232 收藏
点赞数
分类专栏： 前端 WEB 文章标签： 游戏 js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013362192/article/details/114050062
版权
前端 同时被 2 个专栏收录
67 篇文章 0 订阅
订阅专栏
WEB
50 篇文章 1 订阅
订阅专栏

canvas-基于lufyLegend的石头、剪刀、布游戏 目录

文章目录

前言

  • 存在一些问题

开发实战

石头剪子布

游戏分析

游戏需要的东西：

  1. 图片描画
  2. 图形绘制
  3. 文字绘制
  4. 鼠标的点击
  5. 电脑AI
  6. 条件分支与判断

必要的JS知识

  • 随机数
  • 条件分支
  • canvas操作，文本框、图像、切换
  • lufylegend操作，最好分层

分层实现

  1. 整个游戏界面
  2. 出拳部分
  3. 结果显示部分

代码实现

1.整个界面

    <div id="legend"></div>
    <script>
        let backLayer;
        init(50,"legend", 800, 400, () =>{
            backLayer = new LSprite();
            addChild(backLayer);
            // 游戏背景
            backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');
            
            // 结果显示层初始化
            initResultLayer();
            // 操作层初始化
            initClickLayer();
        });

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

                backLayer.addChild(resultLayer);
        }
        function initClickLayer() {
            let clickLayer = new LSprite();
            clickLayer.graphics.drawRect(4,'#ff8800',
                [0,0,300,110],
                true,
                '#ffffff');
                clickLayer.x = 250;
                clickLayer.y = 275;
                backLayer.addChild(clickLayer);
        }
    </script>

在这里插入图片描述

代码解析
  1. 分3个显示层：背景、结果、操作
  2. LGlobal.width,LGlobal.height是canvas的宽、高

2. 出拳部分

  • 准备素材

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 图片读取函数：LLoadManage.load(lits,onupdate,oncoplete)
    • list：图片数组，格式必须为规定格式
    • onupdate：每读取数组中一张图片后调用的函数
    • oncomplete：读取完所有后调用的函数
    <div id="legend"></div>
    <script>
        let backLayer;
        init(50,"legend", 800, 400, () =>{
            backLayer = new LSprite();
            addChild(backLayer);
            // loading画面
            let loadingLayer = new LoadingSample3();

            backLayer.addChild(loadingLayer);

            // imglist
            let imgList = {};
            let imgData = new Array(
                {name: "title", path: "./show.jpg"},
                {name: "hand", path: "./58-hand.png"},
                {name: "hand", path: "./59-clip.png"},
                {name: "hand", path: "./60-ham.png"},
                );
            // manage
            LLoadManage.load(
                imgData,
                progress => {
                    loadingLayer.setProgress(progress);
                },
                result => {
                    imgList = result;
                    backLayer.removeChild(loadingLayer);
                    loadingLayer = null;

                    backLayer.graphics.drawRect(10, '#008800',
                        [0,0,LGlobal.width,LGlobal.height],
                        true,
                        '#000000');
                    initResultLayer();
                    initClickLayer();
                }
            );
            
        });

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

                backLayer.addChild(resultLayer);
        }
        function initClickLayer() {
            let clickLayer = new LSprite();
            clickLayer.graphics.drawRect(4,'#ff8800',
                [0,0,300,110],
                true,
                '#ffffff');
                clickLayer.x = 250;
                clickLayer.y = 275;
                backLayer.addChild(clickLayer);
        }
    </script>

在这里插入图片描述

  • 代码反思：虽然对着写是很好用，但是耦合性太强，需要考虑高内聚低耦合，建立函数模块
init(50,"legend", 800, 400, main);
// imglist
let imgList = {},
        backLayer;
let imgData = new Array(
        {name: "title", path: "./show.jpg"},
        {name: "hand", path: "./58-hand.png"},
        {name: "clip", path: "./59-clip.png"},
        {name: "ham", path: "./60-ham.png"},
        );
    
function main() {
    backLayer = new LSprite();
    addChild(backLayer);
    // loading画面
    let loadingLayer = new LoadingSample3();

    backLayer.addChild(loadingLayer);
    // manage
    LLoadManage.load(
        imgData,
        progress => {
            loadingLayer.setProgress(progress);
        },
        result => {
            imgList = result;
            backLayer.removeChild(loadingLayer);
            loadingLayer = null;
            gameInit();
        }
    );
}

function gameInit() {
    backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');
    initResultLayer();
    initClickLayer();

}

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

        backLayer.addChild(resultLayer);
}
function initClickLayer() {
    let clickLayer = new LSprite();
    clickLayer.graphics.drawRect(4,'#ff8800',
        [0,0,300,110],
        true,
        '#ffffff');
        clickLayer.x = 250;
        clickLayer.y = 275;
        backLayer.addChild(clickLayer);
}
  • imgData中包含的是图片的路径{name:"x",path:"y"}
  • 加载进度条：loadingLayer = new LoadingSample3();backLayer.addChild(loadingLayer)
  • lufylegend中一共有3个进度条显示对象，LoadingSample1,LoadingSample2,LoadingSample3
  • LLoadManage.load()利用静态类LLoadManage的load函数去读取数组中的图片
  • loadingLayer.setProgress(progress)：获取图片个数占图片数组长度的比例，将这个比例通过setProgress传递，实现动态的进度条
  • 读取完图片后的结果集赋值给imglist，然后一处画面上的进度条对象，再调用gameInit进入下一步
<div id="legend"></div>
<script>

init(50,"legend", 800, 400, main);
// imglist
let imgList = {},
        backLayer,
        showList = new Array();
let imgData = new Array(
        {name: "title", path: "./show.jpg"},
        {name: "hand", path: "./58-hand.png"},
        {name: "clip", path: "./59-clip.png"},
        {name: "ham", path: "./60-ham.png"},
        );
    
function main() {
    backLayer = new LSprite();
    addChild(backLayer);
    // loading画面
    let loadingLayer = new LoadingSample3();

    backLayer.addChild(loadingLayer);
    // manage
    LLoadManage.load(
        imgData,
        progress => {
            loadingLayer.setProgress(progress);
        },
        result => {
            imgList = result;
            backLayer.removeChild(loadingLayer);
            loadingLayer = null;
            gameInit();
        }
    );
}

function gameInit() {
    // console.log(imgList);
    showList.push(new LBitmapData(imgList["ham"]));
    showList.push(new LBitmapData(imgList["clip"]));
    showList.push(new LBitmapData(imgList["hand"]));
    // console.log(showList[0].image);
    // console.log(showList[0] == imgList["ham"]);
    // 游戏背景
    backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');

    // 显示游戏标题
    let titleBitmap = new LBitmap(new LBitmapData(imgList["title"],20,20,50,50));
    // (全部-图的长度)/2 = 中点
    titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
    titleBitmap.y = 10;
    // 加到背景层里
    backLayer.addChild(titleBitmap);

    // 玩家
    selfBitmap = new LBitmap(new LBitmapData(showList[0].image));
    selfBitmap.x = 400 - selfBitmap.width - 50;
    selfBitmap.y = 130;
    backLayer.addChild(selfBitmap);

    // 电脑
    computerBitmap = new LBitmap(new LBitmapData(showList[0].image));
    computerBitmap.x = 400 + 50;
    computerBitmap.y = 130;
    backLayer.addChild(computerBitmap);

    // 玩家，电脑名称设定
    let nameText;
    nameText = new LTextField();
    nameText.text = 'Player';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = selfBitmap.x + 
        (selfBitmap.width - nameText.getWidth()) / 2;
    nameText.y = 95;
    backLayer.addChild(nameText);

    nameText = new LTextField();
    nameText.text = 'computer';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = computerBitmap.x + 
        (computerBitmap.width - nameText.getWidth())/2;
    nameText.y = 95;
    backLayer.addChild(nameText);


    initResultLayer();
    initClickLayer();
}

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

        backLayer.addChild(resultLayer);
}
function initClickLayer() {
    let clickLayer = new LSprite();
    clickLayer.graphics.drawRect(4,'#ff8800',
        [0,0,300,110],
        true,
        '#ffffff');
        clickLayer.x = 250;
        clickLayer.y = 275;
        backLayer.addChild(clickLayer);
}
</script>

在这里插入图片描述

3. 结果层显示

  • 用win,loss,equal表示结果的次数
<div id="legend"></div>
<script>

init(50,"legend", 800, 400, main);
// imglist
let imgList = {},
        backLayer,
        showList = new Array();
let imgData = new Array(
        {name: "title", path: "./show.jpg"},
        {name: "hand", path: "./58-hand.png"},
        {name: "clip", path: "./59-clip.png"},
        {name: "ham", path: "./60-ham.png"},
        );
    
function main() {
    backLayer = new LSprite();
    addChild(backLayer);
    // loading画面
    let loadingLayer = new LoadingSample3();

    backLayer.addChild(loadingLayer);
    // manage
    LLoadManage.load(
        imgData,
        progress => {
            loadingLayer.setProgress(progress);
        },
        result => {
            imgList = result;
            backLayer.removeChild(loadingLayer);
            loadingLayer = null;
            gameInit();
        }
    );
}

function gameInit() {
    // console.log(imgList);
    showList.push(new LBitmapData(imgList["ham"]));
    showList.push(new LBitmapData(imgList["clip"]));
    showList.push(new LBitmapData(imgList["hand"]));
    // console.log(showList[0].image);
    // console.log(showList[0] == imgList["ham"]);
    // 游戏背景
    backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');

    // 显示游戏标题
    let titleBitmap = new LBitmap(new LBitmapData(imgList["title"],20,20,50,50));
    // (全部-图的长度)/2 = 中点
    titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
    titleBitmap.y = 10;
    // 加到背景层里
    backLayer.addChild(titleBitmap);

    // 玩家
    selfBitmap = new LBitmap(new LBitmapData(showList[0].image));
    selfBitmap.x = 400 - selfBitmap.width - 50;
    selfBitmap.y = 130;
    backLayer.addChild(selfBitmap);

    // 电脑
    computerBitmap = new LBitmap(new LBitmapData(showList[0].image));
    computerBitmap.x = 400 + 50;
    computerBitmap.y = 130;
    backLayer.addChild(computerBitmap);

    // 玩家，电脑名称设定
    let nameText;
    nameText = new LTextField();
    nameText.text = 'Player';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = selfBitmap.x + 
        (selfBitmap.width - nameText.getWidth()) / 2;
    nameText.y = 95;
    backLayer.addChild(nameText);

    nameText = new LTextField();
    nameText.text = 'computer';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = computerBitmap.x + 
        (computerBitmap.width - nameText.getWidth())/2;
    nameText.y = 95;
    backLayer.addChild(nameText);


    initResultLayer();
    initClickLayer();
}

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

        backLayer.addChild(resultLayer);

        let selfText = new LTextField();
        selfText.text = '猜拳次数: 0';
        selfText.weight = 'bolder';
        selfText.x = 10;
        selfText.y = 20;
        resultLayer.addChild(selfText);
        
        let win = new LTextField();
        win.text = 'win: 0';
        win.weight = 'bolder';
        win.x = 10;
        win.y = 40;
        resultLayer.addChild(win);

        let loss = new LTextField();
        loss.text = 'loss: 0';
        loss.weight = 'bolder';
        loss.x = 10;
        loss.y = 60;
        resultLayer.addChild(loss);

        let equal = new LTextField();
        equal.text = 'equal: 0';
        equal.weight = "bolder";
        equal.x = 10;
        equal.y = 80;
        resultLayer.addChild(equal);
}
function initClickLayer() {
    let clickLayer = new LSprite();
    clickLayer.graphics.drawRect(4,'#ff8800',
        [0,0,300,110],
        true,
        '#ffffff');
        clickLayer.x = 250;
        clickLayer.y = 275;
        backLayer.addChild(clickLayer);
}

4. 控制层

  • 添加替换按钮
  • LButton(up,down)
<div id="legend"></div>
<script>

init(50,"legend", 800, 400, main);
// imglist
let imgList = {},
        backLayer,
        showList = new Array();
let imgData = new Array(
        {name: "title", path: "./show.jpg"},
        {name: "hand", path: "./58-hand.png"},
        {name: "clip", path: "./59-clip.png"},
        {name: "ham", path: "./60-ham.png"},
        );
    
function main() {
    backLayer = new LSprite();
    addChild(backLayer);
    // loading画面
    let loadingLayer = new LoadingSample3();

    backLayer.addChild(loadingLayer);
    // manage
    LLoadManage.load(
        imgData,
        progress => {
            loadingLayer.setProgress(progress);
        },
        result => {
            imgList = result;
            backLayer.removeChild(loadingLayer);
            loadingLayer = null;
            gameInit();
        }
    );
}

function gameInit() {
    // console.log(imgList);
    showList.push(new LBitmapData(imgList["ham"]));
    showList.push(new LBitmapData(imgList["clip"]));
    showList.push(new LBitmapData(imgList["hand"]));
    // console.log(showList[0].image);
    // console.log(showList[0] == imgList["ham"]);
    // 游戏背景
    backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');

    // 显示游戏标题
    let titleBitmap = new LBitmap(new LBitmapData(imgList["title"],20,20,50,50));
    // (全部-图的长度)/2 = 中点
    titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
    titleBitmap.y = 10;
    // 加到背景层里
    backLayer.addChild(titleBitmap);

    // 玩家
    selfBitmap = new LBitmap(new LBitmapData(showList[0].image));
    selfBitmap.x = 400 - selfBitmap.width - 50;
    selfBitmap.y = 130;
    backLayer.addChild(selfBitmap);

    // 电脑
    computerBitmap = new LBitmap(new LBitmapData(showList[0].image));
    computerBitmap.x = 400 + 50;
    computerBitmap.y = 130;
    backLayer.addChild(computerBitmap);

    // 玩家，电脑名称设定
    let nameText;
    nameText = new LTextField();
    nameText.text = 'Player';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = selfBitmap.x + 
        (selfBitmap.width - nameText.getWidth()) / 2;
    nameText.y = 95;
    backLayer.addChild(nameText);

    nameText = new LTextField();
    nameText.text = 'computer';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = computerBitmap.x + 
        (computerBitmap.width - nameText.getWidth())/2;
    nameText.y = 95;
    backLayer.addChild(nameText);


    initResultLayer();
    initClickLayer();
}

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

        backLayer.addChild(resultLayer);

        let selfText = new LTextField();
        selfText.text = '猜拳次数: 0';
        selfText.weight = 'bolder';
        selfText.x = 10;
        selfText.y = 20;
        resultLayer.addChild(selfText);
        
        let win = new LTextField();
        win.text = 'win: 0';
        win.weight = 'bolder';
        win.x = 10;
        win.y = 40;
        resultLayer.addChild(win);

        let loss = new LTextField();
        loss.text = 'loss: 0';
        loss.weight = 'bolder';
        loss.x = 10;
        loss.y = 60;
        resultLayer.addChild(loss);

        let equal = new LTextField();
        equal.text = 'equal: 0';
        equal.weight = "bolder";
        equal.x = 10;
        equal.y = 80;
        resultLayer.addChild(equal);
}
function initClickLayer() {
    let clickLayer = new LSprite();
    clickLayer.graphics.drawRect(4,'#ff8800',
        [0,0,300,110],
        true,
        '#ffffff');

        let msgText = new LTextField();
        msgText.text = "请出拳：";
        msgText.weight = 'bolder';
        msgText.x = 10;
        msgText.y = 10;

        clickLayer.addChild(msgText);

        let btnHam = getButton('ham');
        btnHam.x = 30;
        btnHam.y = 35;
        clickLayer.addChild(btnHam);

        let btnClip = getButton('clip');
        btnClip.x = 115;
        btnClip.y = 35;
        clickLayer.addChild(btnClip);

        let btnHand = getButton('hand');
        btnHand.x = 200;
        btnHand.y = 35;
        clickLayer.addChild(btnHand);

        clickLayer.x = 250;
        clickLayer.y = 275;
        backLayer.addChild(clickLayer);
}

function getButton(value){
    let btnUp = new LBitmap(new LBitmapData(imgList[value]));
    btnUp.scaleX = 0.5;
    btnUp.scaleY = 0.5;

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

    let btn = new LButton(btnUp, btnOver);
    btn.name = value;
    return btn;
}
</script>

5. 出拳

  • 利用随机函数Math.floor(Math.random() * 3)对机器人进行赋值

6. 结果判定

制作判定数组：

在这里插入图片描述

let checkList = [
    [0,1,-1],
    [-1,0,1],
    [1,-1,0]
];

7. 游戏总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lufylegend-1.10.1.js"></script>
</head>
<body>
<div id="legend"></div>
<script>

init(50,"legend", 800, 400, main);
// imglist
let imgList = {},
        backLayer,
        showList = new Array(),
        selfBitmap,
        computerBitmap,
        win,
        loss,
        equal,
        selfText,        
        lossCount = 0,
        winCount = 0,
        equalCount = 0;
let imgData = new Array(
        {name: "title", path: "./show.jpg"},
        {name: "hand", path: "./58-hand.png"},
        {name: "clip", path: "./59-clip.png"},
        {name: "ham", path: "./60-ham.png"},
        );
let checkList = [
    [0,1,-1],
    [-1,0,1],
    [1,-1,0]
];

function main() {
    backLayer = new LSprite();
    addChild(backLayer);
    // loading画面
    let loadingLayer = new LoadingSample3();

    backLayer.addChild(loadingLayer);
    // manage
    LLoadManage.load(
        imgData,
        progress => {
            loadingLayer.setProgress(progress);
        },
        result => {
            imgList = result;
            backLayer.removeChild(loadingLayer);
            loadingLayer = null;
            gameInit();
        }
    );
}

function gameInit() {
    // console.log(imgList);
    showList.push(new LBitmapData(imgList["ham"]));
    showList.push(new LBitmapData(imgList["clip"]));
    showList.push(new LBitmapData(imgList["hand"]));
    // console.log(showList[0].image);
    // console.log(showList[0] == imgList["ham"]);
    // 游戏背景
    backLayer.graphics.drawRect(10, '#008800',
                [0,0,LGlobal.width,LGlobal.height],
                true,
                '#000000');

    // 显示游戏标题
    let titleBitmap = new LBitmap(new LBitmapData(imgList["title"],20,20,50,50));
    // (全部-图的长度)/2 = 中点
    titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
    titleBitmap.y = 10;
    // 加到背景层里
    backLayer.addChild(titleBitmap);

    // 玩家
    selfBitmap = new LBitmap(new LBitmapData(showList[0].image));
    selfBitmap.x = 400 - selfBitmap.width - 50;
    selfBitmap.y = 130;
    backLayer.addChild(selfBitmap);

    // 电脑
    computerBitmap = new LBitmap(new LBitmapData(showList[0].image));
    computerBitmap.x = 400 + 50;
    computerBitmap.y = 130;
    backLayer.addChild(computerBitmap);

    // 玩家，电脑名称设定
    let nameText;
    nameText = new LTextField();
    nameText.text = 'Player';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = selfBitmap.x + 
        (selfBitmap.width - nameText.getWidth()) / 2;
    nameText.y = 95;
    backLayer.addChild(nameText);

    nameText = new LTextField();
    nameText.text = 'computer';
    nameText.weight = 'bolder';
    nameText.color = '#ffffff';
    nameText.size = 24;
    nameText.x = computerBitmap.x + 
        (computerBitmap.width - nameText.getWidth())/2;
    nameText.y = 95;
    backLayer.addChild(nameText);


    initResultLayer();
    initClickLayer();
}

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

        backLayer.addChild(resultLayer);

        selfText = new LTextField();
        selfText.text = '猜拳次数: 0';
        selfText.weight = 'bolder';
        selfText.x = 10;
        selfText.y = 20;
        resultLayer.addChild(selfText);
        
        win = new LTextField();
        win.text = 'win: 0';
        win.weight = 'bolder';
        win.x = 10;
        win.y = 40;
        resultLayer.addChild(win);

        loss = new LTextField();
        loss.text = 'loss: 0';
        loss.weight = 'bolder';
        loss.x = 10;
        loss.y = 60;
        resultLayer.addChild(loss);

        equal = new LTextField();
        equal.text = 'equal: 0';
        equal.weight = "bolder";
        equal.x = 10;
        equal.y = 80;
        resultLayer.addChild(equal);
}
function initClickLayer() {
    let clickLayer = new LSprite();
    clickLayer.graphics.drawRect(4,'#ff8800',
        [0,0,300,110],
        true,
        '#ffffff');

        let msgText = new LTextField();
        msgText.text = "请出拳：";
        msgText.weight = 'bolder';
        msgText.x = 10;
        msgText.y = 10;

        clickLayer.addChild(msgText);

        let btnHam = getButton('ham');
        btnHam.x = 30;
        btnHam.y = 35;
        clickLayer.addChild(btnHam);
        btnHam.addEventListener(LMouseEvent.MOUSE_UP, onclick);

        let btnClip = getButton('clip');
        btnClip.x = 115;
        btnClip.y = 35;
        clickLayer.addChild(btnClip);
        btnClip.addEventListener(LMouseEvent.MOUSE_UP, onclick);

        let btnHand = getButton('hand');
        btnHand.x = 200;
        btnHand.y = 35;
        clickLayer.addChild(btnHand);
        btnHand.addEventListener(LMouseEvent.MOUSE_UP, onclick);

        clickLayer.x = 250;
        clickLayer.y = 275;
        backLayer.addChild(clickLayer);
}

function getButton(value){
    let btnUp = new LBitmap(new LBitmapData(imgList[value]));
    btnUp.scaleX = 0.5;
    btnUp.scaleY = 0.5;

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

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

function onclick(event, display){
    let selfValue, computerValue;

    if(display.name == 'ham')   selfValue = 0;
    else if(display.name == 'clip') selfValue = 1;
    else if(display.name == 'hand') selfValue = 2;

    computerValue = Math.floor(Math.random()*3);
    console.log(computerValue);
    selfBitmap.bitmapData = showList[selfValue];
    computerBitmap.bitmapData = showList[computerValue];

    let result = checkList[selfValue][computerValue];
    if(result == -1)    lossCount += 1;
    else if(result == 1)    winCount += 1;
    else if(result == 0)    equalCount += 1;

    win.text = `win: ${winCount}`,
    loss.text = `loss: ${lossCount}`,
    equal.text = `equal: ${equalCount}`;
    selfText.text = `次数： ${winCount + lossCount + equalCount}`;
}
</script>
</body>
</html>

在这里插入图片描述

总结和评价

游戏制作思路：

  1. 建立容器背景
  2. 画出结果和操作栏
  3. 画出显示栏
  4. 通过操作从而实现更换图片，并记录数值，最后与机器人比较，并获得判定结果
  5. 显示结果改变

总结：

  • 用到的方法大体为：

    • 原生：图片引入，画文本框，输入文字
    • luxylegend：分层，loading动画，监听事件

  • 原版代码水平质量较低，只是单纯的增加函数，而没有考虑做成模块，并且分类进行调取运用

模块

  • 暂时存在addChild问题，需要解决
class GamePlay {
    constructor(linethickness, idName, width, height){
        const checkList = [
            [0,1,-1],
            [-1,0,1],
            [1,-1,0]
        ];
        this.variable = new Map({
            [Symbol.iterator]: function*() {
                yield* [
                    [Symbol.for('imgList'), {}],
                    [Symbol.for('showList'), []],
                    [Symbol.for('imgData'), []],
                    [Symbol.for('checkList'), checkList]
                ];
            }
        });

        this.linethickness = linethickness,
        this.idName = idName,
        this.width = width,
        this.height = height;
        this.lossCount = 0,
        this.winCount = 0,
        this.equalCount = 0;

        this.backLayer = new LSprite();
        console.log(this.backLayer);
        // 此处报错，暂时找不到问题和解决办法
        this.prototype.LSprite().addChild(this.backLayer);
        this.resultLayer = new LSprite();  
        this.list = ['ham', 'clip', 'hand'];
        
    }

    setVal(id, val){
        this.variable.set(Symbol.for(id), val);
    }

    getVal(id){
        return this.variable.get(Symbol.for(id));
    }

    pushImgData(name,path){
        let imgData = Symbol.for('imgData');
        this.variable.get(imgData).push({name:name, path:path});
        return this.variable.get(imgData);
    }

    backGroundPotray(){
        init(this.linethickness, this.idName, this.width, this.height, this.load);
    }

    load(){        
        
        // loading
        let loadingLayer = new LoadingSample3();

        this.backLayer.addChild(loadingLayer);
        this.pushImgData('title','./show.jpg');
        this.pushImgData('hand','./58-hand.png');
        this.pushImgData('clip','./59-clip.png');
        this.pushImgData('ham','./60-ham.png');
        // manage
        LLoadManage.load(
            this.getVal('imgData'),
            progress => loadingLayer.setProgress(progress),
            result => {
                this.getVal('imgList').data = result;
                this.backLayer.removeChild(loadingLayer);
                loadingLayer = null;
                this.gameInit();
            });
    }

    gameInit(){
        for(let val of this.list)   this.getVal('showList').push(new LBitmapData(this.getVal('imgList').data[val]));

        // 游戏背景
        this.backLayer.graphics.drawRect(10, '#008800',
            [0,0,LGlobal.width,LGlobal.height],
            true,
            '#000000');

        // title
        let titleBitmap = new LBitmap(new LBitmapData(
            this.getVal('imgList').data['title'],20,20,50,50
        ));
        this.location(titleBitmap, (LGlobal.width - titleBitmap.width)/2, 10);
        
        // player
        let selfBitmap = new LBitmap(new LBitmapData(this.getVal('showList')[0].image));
        this.setVal('selfBitmap', selfBitmap);
        this.location(selfBitmap, 400 - selfBitmap.width - 50, 130);

        // computer
        let computerBitmap = new LBitmap(new LBitmapData(this.getVal('showList')[0].image));
        this.setVal('computerBitmap', computerBitmap);
        this.location(computerBitmap, 400 + 500, 130);

        // text setting
        this.textSetting('Player', 'bolder', '#ffffff', 24, 
            this.getVal('selfBitmap').x + (this.getVal('selfBitmap').width/2),
            95, this.backLayer);

        this.textSetting('computer', 'bolder', '#ffffff', 24,
            this.getVal('computerBitmap').x + this.getVal('computerBitmap').width/2,
            95, this.backLayer);

        this.initResultLayer();

    }

    initResultLayer(){
        
        this.resultLayer.graphics.drawRect(4, '#ff8800',
            [0,0,150,110],
            true,
            '#ffffff');
        this.resultLayer.x = 0;
        this.resultLayer.y = 100;

        this.backLayer.addChild(this.resultLayer);

        this.textSetting('猜拳的次数： 0','bolder', '#000000',24,10,20, this.resultLayer);
        this.textSetting('win： 0','bolder', '#000000',24,10,40, this.resultLayer);
        this.textSetting('loss： 0','bolder', '#000000',24,10,60, this.resultLayer);
        this.textSetting('equal: 0','bolder', '#000000',24,10,80, this.resultLayer);
    }

    initClickLayer(){
        let clickLayer = new LSprite();

        clickLayer.graphics.drawRect(4, '#ff8800',
            [0,0,300,110],
            true,
            '#ffffff');

        this.textSetting('请出拳','bolder', '#000000',24,10,40, clickLayer);

        this.getButton('ham', 30, 35, clickLayer, onclick);
        this.getButton('ham', 115, 35, clickLayer, onclick);
        this.getButton('ham', 200, 35, clickLayer, onclick);
    }

    location(bitmap, x, y){
        bitmap.x = x;
        bitmap.y = y;
        this.backLayer.addChild(bitmap);
    }

    textSetting(text, weight, color, size, x, y, layer){
        let nameText = new LTexField();

        nameText.text = text;
        nameText.weight = weight;
        nameText.color = color;
        nameText.sieze = size;
        nameText.x = x;
        nameText.y = y;
        layer.addChild(nameText);
    }

    getButton(value, x, y, layer, callback){
        let btnUp = new LBitmap(new LBitmapData(this.getVal('imgList').data[value]));
        btnUp.scaleX = 0.5;
        btnUp.scaleY = 0.5;

        let btnOver = new LBitmap(new LBitmapData(this.getVal('imgList').data[value]));
        btnOver.scaleX = 0.5;
        btnOver.scaleY = 0.5;
        btnOver.x = 2;
        btnOver.y = 2;
        
        let btn = new LButton(btnUp, btnOver);
        btn.name = value;
        
        btn.x = x;
        btn.y = y;
        layer.addChild(btn);

        btn.addEventListener(LMouseEvent.MOUSE_UP, callback);
    }

    onclick(event, display){
        let selfValue, computer;
        
        if(display.name == 'ham')   selfValue = 0;
        else if(display.name == 'clip') selfValue = 1;
        else if(display.name == 'hand') selfValue = 2;
    
        computerValue = Math.floor(Math.random()*3);
        console.log(computerValue);
        this.getVal('selfBitmap').bitmapData = this.getVal('showList')[selfValue];
        this.getVal('computerBitmap').bitmapData = this.getVal('showList')[computerValue];
    
        let result = checkList[selfValue][computerValue];
        if(result == -1)    this.lossCount += 1;
        else if(result == 1)    this.winCount += 1;
        else if(result == 0)    this.equalCount += 1;

        
        this.textSetting(`次数： ${this.winCount + this.lossCount + this.equalCount}`,'bolder', '#000000',24,10,20, this.resultLayer);
        this.textSetting(`win: ${this.winCount}`,'bolder', '#000000',24,10,40, this.resultLayer);
        this.textSetting(`loss: ${this.lossCount}`,'bolder', '#000000',24,10,60, this.resultLayer);
        this.textSetting(`equal: ${this.equalCount}`,'bolder', '#000000',24,10,80, this.resultLayer);
    }

}

const game = new GamePlay(50, 'legend', 800, 400);
game.backGroundPotray();
莫兮是我
关注
专栏目录
jQuery深入浅出（二）石头剪刀布动画实现
qq_36760873的博客
09-26 594
jQuery深入浅出（二）-石头剪刀布动画实现1.准备几张可爱的照片素材2.代码实现3. 动画效果图 1.准备几张可爱的照片素材 (1)bu.png (2)jaindao.png (3)shitou.png (4)daiding.png 2.代码实现 <!DOCTYPE html> <html> <head> ...
基于H5canvas游戏引擎lufylegend开发小游戏合集
04-03
当然,我很乐意为您提供基于H5 canvas游戏引擎lufylegend开发小游戏合集的500字说明。 LufyLegend是一个开源的HTML5游戏引擎,它基于Canvas技术构建,能够帮助开发者快速创建HTML5游戏。该引擎提供了丰富的API和工具,...
canvas及lufylegend引擎
dietiaoxiu8119的博客
09-29 149
随着对canvas的深入了解，发现canvas真是个好东西，也发现android真烂，哎！ 最近在用canvas做小游戏，简单的跑酷类，打地鼠类的小游戏做了一遍，今天先写一个打地鼠的制作心得。 PS:以前用JS做过打地鼠的游戏，现在看看真心烂。 首先我使用的是lufylegend.js 1.9.1的版本（非常好用的引擎，强烈推荐）。 在制作过程中先来分析打地鼠的游戏大概需要那几个...
使用Lufylegend开发HTML5 Canvas游戏
网优如梦
12-08 462
最近在研究智能交通应用时，感觉交通道路上的人、车、物很适合抽象为游戏中的各类对象。（其实游戏本事也是现实场景的抽象） 使用游戏开发中面向对象思维来分析智能交通的应用场景与事件应该很有借鉴作用。 依着这个思路偶与了Lufylegend，发现其语法简单，开发速度快，还有提供很好的文档和示例，所以很适合学习，甚至于休闲娱乐!
HTML5 canvas游戏开发实战 4 : lufylegend开源库件
Just for fun的专栏
02-06 624
4.1 lufylegend库件简介     http://lufylegend.com/lufylegend     在lufylegend库件的使用步骤： （1）引入lufylegend库件 （2）在HTML中创建一个标签 （3）使用init函数进行初始化工作 loading... init(50, "mylegend", 500, 350, ma
H5canvas赛车游戏-基于lufylegend引擎
weixin_30877227的博客
01-06 177
lufylegend引擎是canvas游戏中，比较简单的引擎之一，它不需要配置环境，类似引入jquery包的方式，引用对应js文件即可 lufylegend官方网站：http://www.lufylegend.com/ 首先看下游戏的截图 游戏设计比较粗糙，逻辑也很简单，就是通过点击左右来控制红色的汽车躲避对面开过来的车，若发生碰撞则游戏结束，另游戏速度会越来越快 游戏...
canvas开发石头剪刀布游戏
12-26
在本文中，我们将深入探讨如何使用HTML5的Canvas API来开发一款简单的石头、剪刀、布游戏。Canvas是HTML5中的一个核心元素，它提供了一种在网页上绘制图形的方法，使得开发者能够创建动态和交互式的用户体验。 首先...
HTML5 canvas开发的石头剪刀布小游戏
04-27
在这个“石头剪刀布”小游戏中，HTML5 Canvas与lufylegend框架结合，构建了一个轻量级且趣味盎然的娱乐应用。 首先，让我们深入了解一下HTML5 Canvas。Canvas是一个基于矢量图形的API，通过JavaScript来控制，可以...
H5游戏源码 canvas开发的石头剪刀布小游戏.zip
10-15
【标题】"H5游戏源码 canvas开发的石头剪刀布小游戏"，揭示了这是一个基于HTML5技术，尤其是Canvas API开发的小型互动游戏。Canvas是HTML5中的一个核心元素，它提供了一个图形绘制区域，允许开发者通过JavaScript...
html5石头剪刀布手机小游戏源码
11-03
在这个石头剪刀布游戏中，JavaScript代码会定义玩家和电脑的选择，判断胜负，并展示游戏结果。通过分析源码，我们可以学习如何使用条件语句（如if...else）来比较玩家和电脑的选择，并确定谁是胜者。 HTML5的Canvas...
echarts legend颜色_Canvas专题—综合案例：echarts实现k线图（11）
weixin_39689687的博客
11-29 131
上一篇我们用面向对象的方式，实现了柱状图，扇形图，环形图。我们能手写自己的图表，但是图表库的出现在一定程度上节约了我们的开发成本，所以本篇我们了解一下echarts图表库，并介绍基于echarts的k线图的参数配置。为什么echarts4.0值得我们用：千万级数据可视化的无阻塞体验；渲染引擎 ZRender 全面升级，正式支持SVG；新增了旭日图类型；数据与样式分离让数据传入变得更加方便；更扁平的...
echarts 图例legend添加渐变色背景 | canvas矩形圆角
Igiveufireworks的博客
09-23 3844
echarts的API只支持配置全局的背景色，不能直接在legend中设置backgroundColor。需求：给echarts的每一项图例添加背景色。
基于Debian系统安装node运行环境（docker、canvas）
weixin_34362991的博客
03-02 646
以前的软件部暑的docker镜像一直用ubuntu14.04来制作的，综合考虑，决定将系统切换到debian8.7（stable）下。 难点 因为我们的系统使用了canvas插件，这个插件依赖库比较多，安装较为麻烦，还好ubuntu与debian是一个系列的，有ubuntu下的经验，处理起来还是有信心的。 docker宿主环境安装 因do...
Canvas 产品部署手册
Musicminion的博客
04-18 2012
Canvas 产品部署手册 由于时间原因，部分内容机器翻译可能不准确，欢迎修改提出 issue，本文档处于动态更新中 ······ 特别感谢为本篇文章提供了技术支持和bug修复的文章： 来自CSDN的博主提供的文章支持：Canvas LMS_geekfly的博客-CSDN博客 来自某位不知名的博主提供的文章支持：canvas-lms系统生产(productuon)环境安装（上） 文章目录Can
2024年HTML5——Canvas图表插件 chart，牛逼
最新发布
2401_85012088的博客
05-14 1094
Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。
Echarts学习计之组件---标题（title）
weixin_45278644的博客
06-02 1059
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Canvas的基础操作
qq_36344077的博客
05-12 291
一、Canvas 1.1、canvas文本 ctx.font="24px 隶书"; // 规定字号和字体 且必须写在绘制字体之前 ctx.strokeStyle="red"; // 规定描边颜色 必须在绘制之前定义 ctx.fillStyle="red"; // 规定字体颜色 必须在绘制之前定义 ctx.textAlign = "left"; // 规定水平对齐方向 可选值：（start, end, left, right or center.） ctx.textBaseline = "to
h5游戏开发_H5游戏开发利器之Lufylegend
weixin_39875192的博客
11-30 512
Lufylegend是一种基于html5的开源游戏引擎，它还内置了Box2dWeb,采用javascript语言编写，用户通过在网页中引用相关的Lufylegend.js文件就可以很方便的利用这个游戏引擎编写自己的网页游戏。推荐大家可以参考作者出版的《HTML5 Canvas游戏开发实战》一书，非常适合零基础小白阅读学习。本篇文章将带给大家对Lufylegend.js基础内容的大致了解，...
js简单实现剪刀石头布
wangweiruning的博客
01-05 3712
剪刀石头布小游戏的规则很简单，接下来就简单实现一下啊 div + css 随便写写 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值