结对编程作业

Github

姓名 分工 博客链接
黄荣涛 前端界面，游戏逻辑 博客链接
黄泽华 原型设计 博客链接

一、原型设计

设计说明

  • 原型作品链接
  • 本次原型设计采用墨刀工具，共制作四个模块，分别说明如下：
    • 登录界面：登录界面有两种登录方式，一是通过学号密码登录在线模式，二是本地游戏离线模式。
    • 模式选择：登录后进入模式选择界面。分别有三种模式：本地游戏、线上对战、人机对战。玩家可以自行选择一种模式进行游戏。
    • 对战模式
      • 本地游戏：无需登录，两个玩家通过一台设备进行面对面游戏。
      • 在线对战：选择线上对战模式后跳转至游戏大厅界面。在游戏大厅界面可以通过以下方式创建或加入对局：1.创建房间，公有会开放至游戏大厅允许所有人加入；私有则需要房间号进入房间进行游戏。2.加入房间，通过输入其他玩家的房间号加入该玩家的房间进行游戏。3.大厅加入，可以选择大厅中其他玩家的公有房间加入进行游戏。

      • 人机对战：选择该模式后将与人机进行对战，玩家操作后，人机将模拟真人进行操作。
  • 遇到的困难及解决办法。
    • 困难：接口实现问题，没有素材，需要学习原型设计工具。
    • 解决办法：网上寻找相关资料、素材，然后学习原型设计工具。
    • 收货：了解了原型设计工具的使用，积累了一波素材，知道如何进行设计、接口的实现。

二、原型设计实现

微信小程序体验版二维码：

代码实现思路

  • 网络接口的使用：（以登录接口为例）

    wx.request({
            url:"http://172.17.173.97:8080/api/user/login",
            method:"POST",
            data:{
                student_id: student_id,
                password: password,
            },
            header: {
                "Content-Type" : 'application/x-www-form-urlencoded '
            },
            success(res){
                console.log(res.data.data.token)
                if(res.data.message=="Success"){
                    wx.setStorage({
                        key:"token",
                        data:res.data.data.token
                    })
                    console.log(res.data.data.detail.name)
                    wx.setStorage({
                        key:"name",
                        data:res.data.data.detail.name,
                    })
                    wx.redirectTo({
                        url:"/pages/gamelobby/gamelobby"
                    })
                }
                else{
                    wx.showToast({
                        title: '账号或密码错误，请重试',
                        icon: 'none',
                        duration: 1500
                    })
                }
            },
            fail(res){
                console.log(res);
                wx.showToast({
                    title: '网络错误，请重试',
                    icon: 'none',
                    duration: 1500
                })
            }
        })

  • 算法的关键与关键实现部分流程图
    由于线上对战与本地游戏代码思路差不多，这里以本地游戏为例。算法的逻辑如图：

  • 有价值的代码

    clickConfirm:function(){
        if(this.data.isHandCard) this.outCard();//执行出牌函数
        else this.touchCard();//执行摸牌函数
        //图片的渲染
        var showAreaImage="";
        var playerASpade="";
        var playerAHeart="";
        var playerAClub="";
        var playerADiomond="";
        var playerBSpade="";
        var playerBHeart="";
        var playerBClub="";
        var playerBDiomond="";
        if (this.data.cardShowed[0]) showAreaImage="/images/poker/"+this.data.cardShowed[0]+".jpg";
        if(this.data.playerACard["Spade"][0]) playerASpade="/images/poker/"+ this.data.playerACard["Spade"][0]+".jpg";
        if(this.data.playerACard["Heart"][0]) playerAHeart="/images/poker/"+ this.data.playerACard["Heart"][0]+".jpg";
        if(this.data.playerACard["Club"][0]) playerAClub="/images/poker/"+ this.data.playerACard["Club"][0]+".jpg";
        if(this.data.playerACard["Diomond"][0]) playerADiomond="/images/poker/"+ this.data.playerACard["Diomond"][0]+".jpg";
        if(this.data.playerBCard["Spade"][0]) playerBSpade="/images/poker/"+ this.data.playerBCard["Spade"][0]+".jpg";
        if(this.data.playerBCard["Heart"][0]) playerBHeart="/images/poker/"+ this.data.playerBCard["Heart"][0]+".jpg";
        if(this.data.playerBCard["Club"][0]) playerBClub="/images/poker/"+ this.data.playerBCard["Club"][0]+".jpg";
        if(this.data.playerBCard["Diomond"][0]) playerBDiomond="/images/poker/"+ this.data.playerBCard["Diomond"][0]+".jpg";
        this.setData({
            pickPlayerA:!this.data.pickPlayerA,
            pickPlayerB:!this.data.pickPlayerB,
            cardSelected:false,
            isHandCard:false,
            showAreaImage: showAreaImage,
            playerASpade: playerASpade,
            playerAHeart: playerAHeart,
            playerAClub: playerAClub,
            playerADiomond: playerADiomond,
            playerBSpade: playerBSpade,
            playerBHeart: playerBHeart,
            playerBClub: playerBClub,
            playerBDiomond: playerBDiomond,
            playerASpadeCount:this.data.playerACard["Spade"].length,
            playerAHeartCount:this.data.playerACard["Heart"].length,
            playerAClubCount:this.data.playerACard["Club"].length,
            playerADiomondCount:this.data.playerACard["Diomond"].length,
            playerBSpadeCount:this.data.playerBCard["Spade"].length,
            playerBHeartCount:this.data.playerBCard["Heart"].length,
            playerBClubCount:this.data.playerBCard["Club"].length,
            playerBDiomondCount:this.data.playerBCard["Diomond"].length,
            cardPoolCount:this.data.cardPool.length,
            cardShowCount:this.data.cardShowed.length,
        })
        //判断游戏输赢
        if(this.data.cardPool.length==0){
            var countA=this.data.playerASpadeCount+this.data.playerAHeartCount+this.data.playerAClubCount+this.data.playerADiomondCount;
            var countB=this.data.playerBSpadeCount+this.data.playerBHeartCount+this.data.playerBClubCount+this.data.playerBDiomondCount;
            if(countA>countB){
                wx.showToast({
                    title: '游戏结束,下方玩家获胜',
                    icon: 'none',
                    duration: 10000
                })
            }
            else if(countA<countB){
                wx.showToast({
                    title: '游戏结束,上方玩家获胜',
                    icon: 'none',
                    duration: 10000
                })
            }
            else{
                wx.showToast({
                    title: '游戏结束,平局',
                    icon: 'none',
                    duration: 10000
                })
            }
            this.setData({
                end:true,
                pickPlayerA:false,
                pickPlayerB:false,
            })
        }
    },

    此段代码体现了游戏的基本逻辑

  • 性能分析与改进
    未找到相关的工具，于是没有进行这部分工作。

GitHub代码签入记录

遇到的代码模块异常或结对困难及解决方法。

  • 困难：此前并没有微信小程序开发的经验，在开发过程中遇到了很多问题。在利用提供的接口进行实现线上对战对战时，出现了很多bug，寄！
  • 解决过程：面向网络编程，以及向不愿意透露姓名的大佬请教。
  • 收获：学习到了很多新知识，熟悉了微信小程序开发的流程。

评价你的队友

  • 值得学习的地方：任务完成快，执行能力强，也十分愿意去学习新的知识。
  • 需要改进的地方：我们在沟通上存在一些问题，在遇到问题时可以交流一下。

PSP与学习进度条

第N周 新增代码（行） 累计代码（行） 本周学习耗时(小时) 累计学习耗时（小时） 重要成长
1 500 500 10 10 学习了强化学习的一些经典算法
2 100 600 15 30 复习了html、css、js，学习微信小程序开发
3 1000 1600 15 45 实现游戏的基本界面
4 1500 3100 30 75 实现游戏的功能

三、心得

  • 黄荣涛：在看到本次作业有一个人工智能打牌时，去网络上搜索了一些资料，然后去B站观看强化学习的视频，后来考虑到实际情况，便去写前端了。作业难度：由于错误的估计了本次作业的难度，前期划了太多水了，导致后面疯狂赶ddl，本次作业完成度并不是很高，在线对战存在bug，人机对战没有实现。。。作业感想：虽然本次作业完成度不高，但还是学到了很多东西，强化学习入门、微信小程序开发等等。启发：还是要改掉赶ddl的坏习惯，学习要有规划。最后感谢队友的付出与努力以及一位不愿意透露姓名的大佬！
  • 黄泽华：这次的结对编程负责的是原型设计，对于原型设计还是学习到了许多。能从网上获取很多资源、素材，然后是如何设计界面、美化等等。一开始试图寻找必胜策略的算法，但是自己模拟了很多遍发现随机性很大，虽然有最后几步的必胜策略，但是对面游戏开局的情况，各种策略各有各的优势，不能说哪一种就是必定赢的，还是有点看脸。虽然可以通过大数据训练的办法，但是本人刚学python还不会用这么牛逼的技术。最后就是对队友的感谢，队友承担了大部分工作，感谢队友带我飞！
posted @ 2021-10-24 22:42  v4star  阅读(94)  评论(0)  编辑  收藏  举报