javaScript扫雷

文章目录

  • 一、准备工作
    • 1.图片
    • 2.html
    • 2.css
    • 3.js
  • 二、初始化数据
    • 1. 配置文件
    • 2.工具文件
    • 3.逻辑文件
      • 1.main函数
      • 2.init函数
        • 1.随机生成雷
        • 2.css添加
  • 三、完整代码
    • 1.html
    • 2.js
    • 3.css


一、准备工作

1.图片

需要找三张图片 旗子的图片 炸弹的图片 爆炸的图片

2.html

html文件夹新建一个html文件

<!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>扫雷游戏</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  <!-- 游戏最外层容器 -->
  <div class="container">
    <!-- 游戏标题 -->
    <h1>扫雷</h1>
    <!-- 游戏难度 -->
    <div class="level">
      <button class="active">初级</button>
      <button>中级</button>
      <button>高级</button>
    </div>
    <!-- 总雷数和插旗树 -->
    <div class="info">总雷数:<span class="mineNum">10</span></div>
    <div class="info">插旗数:<span class="flagNum">0</span></div>
    <!-- 扫雷区域  通过js动态添加-->
    <div class="mineArea"></div>
  </div>
   <script src="../js/config.js"></script>
  <script src="../js/index.js"></script>
</body>
</html>

在这里插入图片描述
目前写好html后的样式

2.css

css文件夹下新建一个css文件

  1. 初始化
    • 内外边框为0
    • 改变盒子模型为边框盒子
    *{
      /* 初始化内外边距 */
      margin: 0;
      padding: 0;
      /* 改成边框盒 会把padding什么的算进去 */
      box-sizing: border-box;
    }
    
  2. 标题:
    • 文字居中
    • 字体大小46px
    • 粗100
    • 上下边距30 居中 左右20 居中
    /* 标题 */
    h1{
      text-align: center;
      font-size:46px;
      font-weight: 100;
      margin:30px auto 20px auto
    }
    
  3. 游戏难度选择
    • 字体居中
    • 下边距10px
    /* 游戏难度选择 */
    .level{
      text-align: center;
      margin-bottom: 10px;
    }
    
  4. 游戏难度选择按钮:
    • 内边距上下5px 左右15px
    • 背景颜色#02a4ad
    • 字体颜色白色
    • 取消轮廓(outline)
    • 取消外边框(border)
    • 圆角3px
    • 上下边距0 左右边距5px
    • 移动到按钮时鼠标改为手指
    .level button{
      padding: 5px 15px;
      background: #02a4ad;
      color: white;
      outline: none;
      border:none;
      border-radius: 3px;
      cursor:pointer
    }
    
  5. 当前按钮样式
    • 背景颜色 #00abff
    .level button.active{
      background-color: #00abff;
    }
    
  6. 提示信息相关样式
    • 文字居中
    • 粗200
    • 上下10px 左右居中
  7. 完成后的样式截图:
    在这里插入图片描述

3.js

新建一个js文件夹

  1. 创建index.js 写逻辑
  2. 创建config.js写配置

二、初始化数据

1. 配置文件

由于整个游戏是可以选择难度的,所以我们需要一些配置信息,我们单独创建了一个config.js,代码如下

// 游戏配置文件

//不同级别的配置
var config = {
  easy: {
    row: 10,
    col: 10,
    mineNum: 10,
  }, //简单模式
  noraml: {
    row: 15,
    col: 15,
    mineNum: 30,
  }, //普通模式
  hard: {
    row: 20,
    col: 20,
    mineNum: 60,
  }, //困难模式
  custom: {
    row: '',
    col: '',
    mineNum: '',
  }, //自定义模式
}
// 当前游戏难度 一开始默认为简单模式
var curLevel=config.easy

2.工具文件

新建一个tool.js

// 工具函数

// 1. 获取元素
function $(selector){
  return document.querySelector(selector)
}
//2.获取所有元素
function $$(selector){
  return document.querySelectorAll(selector)
}

3.逻辑文件

1.main函数

// 游戏主要逻辑

// 主函数
function main(){
  //1.进行游戏的初始化
  init()
  //2.绑定事件
  bindEvent()
}
main()

// 初始化
function init(){
}
//绑定事件
function bindEvent(){
}

2.init函数

  1. 思考:初始化要做什么事情?
    - 随机生成所选配置对应数量的雷
//index。js最上面的地方写
//用于存储生成的地雷的数组
var mineArray = null
//雷区的容器
var mineArea = $(".mineArea")
// 初始化
function init() {
  //1.随机生成所选配置对应的数量的雷
  mineArray = initMine()
  //2.根据雷的数量,生成对应的表格
  var table = document.createElement('table')
  //初始化格子的下标
  var index = 0

  for (var i = 0; i < curLevel.row; i++) {
    var tr = document.createElement('tr')
    for (var j = 0; j < curLevel.col; j++) {
      var td = document.createElement('td')
      tr.appendChild(td)
    }
    table.appendChild(tr)
  }
  mineArea.appendChild(table);
}

1.随机生成雷

// 随机生成所选配置对应的数量的雷
function initMine() {
  //1.创建一个数组,用于存储生成的地雷,生成对应长度的数组
  var arr = new Array(curLevel.row * curLevel.col)
  //2.往这个数组里面填充值
  for (var i = 0; i < arr.length; i++) {
    arr[i] = i
  }
  //3.接下来打乱这个数组
  arr.sort(() => 0.5 - Math.random())
  //4.只保留对应雷数量的数组长度
  return arr.slice(0, curLevel.mineNum)
}

2.css添加

/* 表格相关样式 */
table{
  background:#929196;
  margin: 0 auto;
  border-spacing:1px;
}
table td{
  width: 24px;
  height: 24px;
  background:#ccc;
  border: 2px solid;
  border-color: #fff #a1a1a1 #a1a1a1 #fff;
  text-align:center ;
  line-height: 24px;
  font-weight: bold;
  cursor:pointer
}

三、完整代码

1.html


<!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>扫雷游戏</title>
  <link rel="stylesheet" href="../css/index.css">
</head>

<body>
  <!-- 游戏最外层容器 -->
  <div class="container">
    <!-- 游戏标题 -->
    <h1>扫雷</h1>
    <!-- 游戏难度 -->
    <div class="level">
      <button class="active">初级</button>
      <button>中级</button>
      <button>高级</button>
      <button>自定义</button>
    </div>
    <!-- 总雷数和插旗树 -->
    <div class="info">总雷数:<span class="mineNum">10</span></div>
    <div class="info">插旗数:<span class="flagNum">0</span></div>
    <!-- 扫雷区域  通过js动态添加-->
    <div class="mineArea"></div>
  </div>
  <script src="../js/tool.js"></script>
  <script src="../js/config.js"></script>
  <script src="../js/index.js"></script>
</body>

</html>

2.js

config.js

// 游戏配置文件

//不同级别的配置
var config = {
  easy: {
    row: 10,
    col: 10,
    mineNum: 10,
  }, //简单模式
  normal: {
    row: 15,
    col: 15,
    mineNum: 30,
  }, //普通模式
  hard: {
    row: 20,
    col: 20,
    mineNum: 60,
  }, //困难模式
  custom: {
    row: '',
    col: '',
    mineNum: '',
  }, //自定义模式
}
// 当前游戏难度 一开始默认为简单模式
var curLevel=config.easy

index.js

// 游戏主要逻辑
//用于存储生成的地雷的数组
var mineArray = null
//雷区的容器
var mineArea = $('.mineArea')
//用于存储整张地图每个格子额外的一些信息
var tableData = []
//用于存储用户插旗的DOM元素
var flagArray = []
var mineNumber = $('.mineNum')
// 主函数
var btns = document.getElementsByTagName('button')
function main() {
  //1.进行游戏的初始化
  init()
  //2.绑定事件
  bindEvent()
}
main()
function clearScene(){
  mineArea.innerHTML = ''
  flagArray=[];
  $('.flagNum').innerHTML=0;//重置插旗
   mineNumber.innerHTML=curLevel.mineNum
}
// 初始化
function init() {
  //清空场景,或者叫做重置信息
  clearScene();
  //1.随机生成所选配置对应的数量的雷
  mineArray = initMine()
  // console.log(mineArray)
  //2.根据雷的数量,生成对应的表格
  var table = document.createElement('table')
  //初始化格子的下标
  var index = 0

  for (var i = 0; i < curLevel.row; i++) {
    var tr = document.createElement('tr')
    tableData[i] = []
    for (var j = 0; j < curLevel.col; j++) {
      var td = document.createElement('td')
      var div = document.createElement('div')
      //每一个小格子都会对应一个js对象
      //该对象存储了额外的一些信息
      tableData[i][j] = {
        row: i, //该格子的行
        col: j, //该格子的列
        type: 'number', //格子的属性 数字number  雷mine
        value: 0, //周围雷的数量
        index, //格子的下标
        checked: false, //是否被检验过,后面会用到
      }
      //为每一个div添加一个下标,方便用户点击的时候获取相应格子的下标
      div.dataset.id = index
      //当前格子是可以插旗的
      // div.classList.add('canFlag')
      div.setAttribute('class', 'canFlag')
      //查看当前格子的下标是否在雷的数组里面
      if (mineArray.includes(tableData[i][j].index)) {
        tableData[i][j].type = 'mine'
        div.classList.add('mine')
      }
      td.appendChild(div)
      tr.appendChild(td)
      //下标自增
      index++
    }
    table.appendChild(tr)
  }
  mineArea.appendChild(table)
  // console.log(table)
  // console.log(tableData)
  mineArea.onmousedown = function (e) {
    if (e.button === 0) {
      //左键
      //进行区域搜索操作
      searchArea(e.target)
    }
    if (e.button === 2) {
      //右键
      //插旗子
      flag(e.target)
    }
  }
}

// 随机生成所选配置对应的数量的雷
function initMine() {
  //1.创建一个数组,用于存储生成的地雷,生成对应长度的数组
  var arr = new Array(curLevel.row * curLevel.col)
  //2.往这个数组里面填充值
  for (var i = 0; i < arr.length; i++) {
    arr[i] = i
  }
  //3.接下来打乱这个数组
  arr.sort(() => 0.5 - Math.random())
  //4.只保留对应雷数量的数组长度
  return arr.slice(0, curLevel.mineNum)
}
//显示答案
function showAnswer() {
  var isAllRight = true
  //1.显示所有的雷
  //2.有些雷可能插了旗子 需要判断插旗是否正确
  //正确添加绿色背景
  //错误添加红色背景
  var mineArr = $$('td>div.mine')
  for (var i = 0; i < mineArr.length; i++) {
    mineArr[i].style.opacity = 1
  }
  //遍历用户的插旗
  for (var i = 0; i < flagArray.length; i++) {
    if (flagArray[i].classList.contains('mine')) {
      //说明插旗插队了
      flagArray[i].classList.add('right')
    } else {
      flagArray[i].classList.add('error')
      isAllRight = false
    }
  }
  if (!isAllRight || flagArray.length !== curLevel.mineNum) {
    gameOver(false)
  }
  //取消事件
  mineArea.onmousedown = null
}
//找到对应DOM在tableData里面的js对象
function getTableItem(cell) {
  var index = cell.dataset.id
  // console.log(index)
  // console.log(tableData)
  var flatTableData = tableData.flat()
  return flatTableData.filter((item) => item.index == index)[0]
  // console.log(i)
}
//返回该对象对应四周的边界

function getBound(obj) {
  // console.log(obj)
  //确定上下边界
  var rowTop = obj.row - 1 < 0 ? 0 : obj.row - 1
  var rowBottom = obj.row + 1 === curLevel.row ? curLevel.row - 1 : obj.row + 1
  //确定左右边界
  var colLeft = obj.col - 1 < 0 ? 0 : obj.col - 1
  var colRight = obj.col + 1 === curLevel.col ? curLevel.col - 1 : obj.col + 1
  return {
    rowTop,
    rowBottom,
    colLeft,
    colRight,
  }
}
//返回周围一圈雷的数量
function findMineNum(obj) {
  var count = 0 //地雷计数器
  var { rowTop, rowBottom, colLeft, colRight } = getBound(obj)
  // console.log(getBound(obj))
  for (var i = rowTop; i <= rowBottom; i++) {
    for (var j = colLeft; j <= colRight; j++) {
      if (tableData[i][j].type === 'mine') {
        count++
      }
    }
  }
  return count
}
//根据tableData种的js对象返回对应的div
function getDOM(obj) {
  var divArray = $$('td>div')
  //返回对应下标的div
  return divArray[obj.index]
}
//搜索该单元格周围的九宫格区域
function getAround(cell) {
  if (!cell.classList.contains('flag')) {
    //当前的单元格没有被插旗,我们才进行以下的操作
    //搜索该单元格周围的九宫格区域
    cell.parentNode.style.border = 'none'

    if (cell.getAttribute('class') !== 'mineArea') {
      cell.parentNode.style.background = '#d9d9d9'
    }
    cell.classList.remove('canFlag')
    //1.获取到该DOM元素在tableData里面所对应的对象
    var tableItem = getTableItem(cell)
    if (!tableItem) {
      return
    }
    //代表当前单元格已经被核对过了
    tableItem.checked = true
    //得到了对应DOM对象所对应的js对象
    //那我们就可以查看周围一圈是否有雷
    var mineNum = findMineNum(tableItem)
    // console.log(mineNum)
    if (!mineNum) {
      //进入此if周围没有雷
      //需要继续搜素
      var { rowTop, rowBottom, colLeft, colRight } = getBound(tableItem)
      for (var i = rowTop; i <= rowBottom; i++) {
        for (var j = colLeft; j <= colRight; j++) {
          if (!tableData[i][j].checked) {
            getAround(getDOM(tableData[i][j]))
          }
        }
      }
    } else {
      //当前的格子要显示对应雷的数量
      var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']
      cell.classList.add(cl[mineNum])
      cell.innerHTML = mineNum
    }
  }
}
//鼠标左键点击
function searchArea(cell) {
  //1.当前单元格子是雷 游戏结束
  if (cell.classList.contains('mine')) {
    //游戏结束
    cell.classList.add('boom')
    showAnswer() //显示答案
    return
    // gameOver()
  }
  //2.当前单元格不是雷
  //2.1旁段周围一圈有没有雷 如果有雷,显示雷的数量
  //2.2旁段周围一圈没有雷,显示空白,然后继续搜索周围一圈
  getAround(cell)
}
//判断玩家插旗是否全部正确
function isWin() {
  for (var i = 0; i < flagArray.length; i++) {
    if (!flagArray[i].classList.contains('mine')) {
      return false
    }
  }
  return true
}
//判断是否获胜
function gameOver(isWin) {
  //分为两种情况 胜利和失败
  var mess = ''
  if (isWin) {
    mess = '游戏胜利,小呆找出了所有雷~'
  } else {
    mess = '粗心了哦小呆!'
  }
  window.alert(mess)
}
//插旗
function flag(cell) {
  if (cell.classList.contains('canFlag')) {
    //只有点击的dom元素包含canFlag这个类名才可以添加旗子
    if (!flagArray.includes(cell)) {
      //进行插旗操作
      flagArray.push(cell)
      cell.classList.add('flag')
      //还需要进行插旗数的判断
      if (flagArray.length === curLevel.mineNum) {
        //判断玩家是否胜利
        if (isWin()) {
          gameOver(true)
        }
        //无论游戏胜利还是失败我们都应该进入showAnswer 显示最终答案
        showAnswer()
      }
    } else {
      //进行取消插旗操作
      var index = flagArray.indexOf(cell)
      flagArray.splice(index, 1)
      cell.classList.remove('flag')
    }
    $('.flagNum').innerHTML = flagArray.length
  }
}
//绑定事件
function bindEvent() {
  //阻止默认的鼠标右键行为
  mineArea.oncontextmenu = function (e) {
    e.preventDefault()
  }
  //1.点击格子插旗子

  //游戏难度选择
  $('.level').onclick = function (e) {
    for (var i = 0; i < btns.length; i++) {
      btns[i].classList.remove('active')
    }
    e.target.classList.add('active')
    switch (e.target.innerHTML) {
      case '初级': {
        curLevel = config.easy
        break
      }
      case '中级': {
        curLevel = config.normal
        break
      }
      case '高级': {
        curLevel = config.hard
        break
      }
      case '自定义': {
      }
    }
    init()
  }
}

tool.js


// 工具函数

// 1. 获取元素
function $(selector) {
  return document.querySelector(selector)
}
//2.获取所有元素
function $$(selector) {
  return document.querySelectorAll(selector)
}

3.css

*{
  /* 初始化内外边距 */
  margin: 0;
  padding: 0;
  /* 改成边框盒 会把padding什么的算进去 */
  box-sizing: border-box;
}
/* .container{
  border: #f5b0d0 solid ;
} */
/* 标题 */
h1{
  text-align: center;
  font-size:46px;
  font-weight: 100;
  margin:30px auto 20px auto
}
/* 游戏难度选择 */
.level{
  text-align: center;
  margin-bottom: 10px;
}
.level button{
  padding: 5px 15px;
  background: #02a4ad;
  color: white;
  outline: none;
  border:none;
  border-radius: 3px;
  cursor:pointer
}
.level button.active{
  background-color: #00abff;
}
.info{
  text-align: center;
  margin:10px auto;
  font-weight: 200;
}

/* 表格相关样式 */
table{
  background:#929196;
  margin: 0 auto;
  border-spacing:1px;
}
table td{
  width: 24px;
  height: 24px;
  background:rgb(245, 213, 228);
  border: 2px solid;
  border-color: rgb(252, 215, 233) #f5b0d0 #f5b0d0 rgb(252, 215, 233);
  text-align:center ;
  line-height: 24px;
  font-weight: bold;
  cursor:pointer
}
td>div{
  height: 100%;
  width: 100%;
}
/* 显示地雷 */
td>div.mine{
  background: rgb(245, 213, 228) url("../img/炸弹.png") center/cover no-repeat;
  opacity: 0;
}
/* 显示小旗子 */
td>div.flag{
  background: rgb(245, 213, 228) url("../img/旗子.png") center/cover no-repeat;
  opacity: 1;
}
td>div.error{
  background-color:red
  /* background: rgb(245, 213, 228) url("../img/爆炸.png") center/cover no-repeat; */
}
td>div.boom{
  background:  url("../img/爆炸.png") center/cover no-repeat;
}
td>div.right{
  background-color: green;
}
td>div.zero{
  border-color:#d9d9d9;
  background-color:#d9d9d9;
}
td>div.one{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:rgb(136, 173, 236);
}
td>div.two{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:#9BCD9B;
}
td>div.three{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:#ee8797;
}
td>div.four{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:red;
}
td>div.five{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:orange;
}
td>div.six{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:yellow;
}
td>div.seven{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:gray;
}
td>div.eight{
  border-color:#d9d9d9;
  background:#d9d9d9;
  color:black;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/4052.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

区块链基本原理

区块链的起源 创始者介绍 姓名&#xff1a;中本聪&#xff08;英语&#xff1a;SatoshiNakamoto&#xff09;&#xff0c;自称日裔美国人&#xff0c;日本媒体常译为中本哲史&#xff0c;此名是比特币协议及其相关软件Bitcoin-Qt的创造者&#xff0c;但真实身份未知。 中本聪于…

Chapter9.1:线性系统状态空间基础(上)

该系列博客主要讲述Matlab软件在自动控制方面的应用&#xff0c;如无自动控制理论基础&#xff0c;请先学习自动控制系列博文&#xff0c;该系列博客不再详细讲解自动控制理论知识。 自动控制理论基础相关链接&#xff1a;https://blog.csdn.net/qq_39032096/category_10287468…

解决Visual Studio设置C++标准 但是_cplusplus始终为199711

目录场景复现Visual Studio官方说明C标准对应表解决方案方法一 恢复__cplusplus宏方法二 使用_MSVC_LANG宏场景复现 我在VS2022偶然的一次测试C标准开发环境&#xff0c;发现无论我怎么修改C语言标准&#xff0c;输出的__cplusplus宏总是199711。 Visual Studio官方说明 链…

【C++】vector模拟实现及其应用

文章目录vector的介绍vector的使用及其实现vector的定义vector iterator 的使用vector空间增长问题vector的增删查改vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素…

开源 Swallow 代码审计系统体验

最近在哔哩哔哩看 到Swallow 代码审计系统的宣传,发现功能比较适合我目前的工作需要,安装使用了一下,简单做了一个笔记,分享给有需要的朋友. 底层架构为蜻蜓编排系统,墨菲SCA,fortify,SemGrep,hema 项目地址:https://github.com/StarCrossPortal/swallow 安装与使用视频教程:ht…

hexo 搭建个人博客记录

看B站的程序羊的关于搭建hexo博客的方法自己搭了一个博客&#xff0c;链接是 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo 下面就视频所讲做做笔记&#xff0c;以后可以回来查看&#xff0c;推荐小伙伴想搭建hexo博客的可以去看看这个视频。 1. 安装Node.js…

react项目路由组件懒加载和路由传值方式

项目实战 使用useRoutes配置路由&#xff0c;结合插槽配置用户登录检测。 用户登录成功进入login 直接系统主界面 路由模块抽离 整体代码外移 { path: "/admin", element: ( <Author name"admin"> <Index /> </Author> ), }, { path:…

「SAP ABAP」OPEN SQL(七)【GROUP BY | HAVING | ORDER BY】

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言A…

基于matlab已知地球两点坐标求取距离和方位角函数distance

一、语法1.语法1[arclen,az] distance(lat1,lon1,lat2,lon2)&#xff1b;R6371.393; % 地球半径&#xff0c;单位&#xff1a;km地点1&#xff08;维度lat1&#xff0c;经度lon1&#xff09;&#xff0c;地点2&#xff08;维度lat2&#xff0c;经度lon2&#xff09;假设地点1和…

001 鸿蒙系统环境搭建及运行hello world

1 下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网&#xff0c;单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本…

PCIe基础

PCIe基础 PCI Express&#xff0c;简称PCI-E&#xff0c;官方简称PCIe&#xff0c;是计算机总线的一个重要分支&#xff0c;它沿用既有的PCI编程概念及信号标准&#xff0c;并且构建了更加高速的串行通信系统标准。目前这一标准由PCI-SIG组织制定和维护。 拓扑 配置空间 在 P…

【Python】plt.title()函数

plt.title() 是 matplotlib 库中用于设置图形标题的函数。 一、基本语法如下 plt.title(label, fontdictNone, locNone, padNone, **kwargs)其中&#xff1a; label 是要设置的标题文本&#xff0c;可以是字符串类型或者是数学表达式。fontdict 是一个可选的参数&#xff0c…

QT 基于AES加解密的使用,解析java端发来的密文

背景 java端往ukey中写授权信息&#xff0c;C端从ukey中读取授权信息。 java端写入的授权信息是加密的&#xff0c;并且要可逆。 因为java端采用的是AES加密的&#xff0c;所以我(C端)也只好采用对等形式搞定了。 使用的库 开发环境&#xff1a;Win10 Qt5.13 QT中AES加解密…

uniapp项目打包apk相关(androidStudio,Hbuildx,dCloud)

1、先注册和登陆dCloud平台&#xff0c;管理应用信息。 需要准备的参数(3个) APP_ID&#xff08;如&#xff1a;__UNI__123ABCD&#xff09; 包名&#xff08;如&#xff1a;com.hx.mhoa&#xff09; 应用签名&#xff08;应用sha1&#xff0c;应用md5&#xff0c;应用sha256&…

HLS协议格式

HLS协议格式 ES流&#xff08;Elementary Stream&#xff09;&#xff1a;基本码流&#xff0c;不分段的音频、视频或者其他信息的连续码流PES流&#xff0c;把基本码流ES分割成段&#xff0c;并加上相应头文件打包成形的打包基本码流PS流&#xff08;Program Stream&#xff…

一文解析RISC-V SiFive U54内核——中断和异常

中断 U54内核支持M模式和S模式中断。默认情况下&#xff0c;所有中断都在M模式下处理 。对于支持S模式的 hart&#xff0c;可以有选择地将中断委托给S模式。 U54中断架构如下&#xff1a; U54内核还支持两种类型的 RISC-V 中断&#xff1a;本地 和全局 。 本地中断 &#xf…

目标检测算法之Fast R-CNN和Faster R-CNN原理

一、Fast R-CNN原理 在SPPNet中&#xff0c;实际上特征提取和区域分类两个步骤还是分离的。只是使用ROI池化层提取了每个区域的特征&#xff0c;在对这些区域分类时&#xff0c;还是使用传统的SVM作为分类器。Fast R-CNN相比SPPNet更进一步&#xff0c;不再使用SVM作为分类器&a…

议程更新 | Occlum Meetup 北京站--一起来聊机密计算 TEE

首届 Occlum Meetup 还有 3 天就要和大家见面啦&#xff01;北京的小伙伴们&#xff0c;我们来喽&#xff01;为了能和大家有更充足的时间交流沟通&#xff0c;我们小小的调整了一下议程&#xff5e;最新议程请见下方。本次 Meetup 是 Occlum 开源社区首次在北京线下开展&#…

yolo车牌识别、车辆识别、行人识别、车距识别源码(包含单目双目)

视频效果 车牌识别视频车辆识别视频yolov5车辆识别视频yolov5 yoloR对比行人车辆识别视频yolo车距1完整源码http://www.hedaoapp.com/goods/goodsDetails?pid4132 系统设计 车牌自动识别是以计算机视觉处理、数字图像处理、模式识别等技术为基础&#xff0c;对摄像机所拍摄的…

从零开始,简单几步教会你shopify店铺设计

在弄完shopify的基础配置之后&#xff0c;我们就开始可以设计一下我们的店铺。人都是视觉动物&#xff0c;很难不被好看的东西吸引&#xff0c;所以把店面弄得漂漂亮亮的就是我们赢得顾客信赖的第一步。接下来龙哥会详细地解析一下&#xff0c;shopify的店铺设计与配置要怎么展…