网站首页代码怎么写,怎么申请专线访问国际网络,网站内部seo,免费做调查的网站有哪些有做过俄罗斯方块游戏小程序的经验#xff0c;这次有做了一个消灭方块的游戏#xff0c;实现过程很顺利#xff0c;游戏看着和之前做的俄罗斯方块游戏很像#xff0c;这里调整了玩法#xff0c;试玩感觉还可以#xff0c;接下来给大家讲一讲消灭方块游戏开发过程。 俄罗斯…有做过俄罗斯方块游戏小程序的经验这次有做了一个消灭方块的游戏实现过程很顺利游戏看着和之前做的俄罗斯方块游戏很像这里调整了玩法试玩感觉还可以接下来给大家讲一讲消灭方块游戏开发过程。 俄罗斯方块游戏文章 【俄罗斯方块】单机游戏-微信小程序项目开发入门 文章目录 小程序初始页面游戏页面游戏逻辑游戏背景游戏方块开始游戏选择方块拖动方块消灭方块 游戏测试 这里的消灭方块游戏也叫方块消消乐游戏
小程序
用微信开发工具打开新建一个小程序项目例如项目名miniprogram-BoxDesalination
如下图依次选择即可
AppID 选自己申请的测试号不使用云服务不免费JavaScript - 基础模板 这里选创建小程序项目因为这开发比小游戏项目开发难度低了不少很适合新手学习 初始页面
初始页面文件位置在/pages/index/index
在页面index.wxml布局文件中添加按钮添加内容如下点击按钮进入游戏
viewbutton typedefault bindtaponClickKey data-keyenter进入游戏/button
/view然后在页面index.js逻辑文件中添加进入游戏的点击事件
Component({methods: {// 事件处理函数onClickKey(e) {wx.navigateTo({url: /pages/game/game,})}}
}现在这个时间点微信开发工具自动创建的小程序项目的初始页面跟旧版的不同了 初始页面以前是用页面Pages对象 现在发现是用的自定义组件Component展示添加的方法是在methods里面的 游戏页面
创建一个游戏页面文件位置在/pages/game/game
打开页面game.wxml布局文件布局内容如下
!--pages/game/game.wxml--
view classpagecanvas classcanvas type2d idzs1028_csdn bindtouchstartonTouchStart bindtouchmoveonTouchMove bindtouchendonTouchEnd disable-scroll{{true}}/canvas
/view只需要放一个组件canvas就好 游戏逻辑
接下来准备写游戏逻辑首先思考如何初始化页面
打开页面game.js逻辑文件在里面的onReady()方法里写初始化代码得到一个canvas
// pages/game/game.js
import ZS1028_CSDN from ../../utils/zs1028_CSDN.js
import BLOCK from ../../utils/block.jsconst app getApp()Page({/*** 生命周期函数--监听页面初次渲染完成*/async onReady() {const { node:canvas, width, height } await ZS1028_CSDN.query(#zs1028_csdn)Object.assign(canvas, { width, height })//创建小游戏引擎框架对象传入canvasconst game ZS1028_CSDN.createMiniGameEngine({canvas,// isTest: true //性能测试用途})this.game game// 初始化游戏数据...// 背景和网格数据const bgGridsData {...}// 所有的方块数据const blocksData {...}// 游戏状态数据const stateData {...}// 初始化游戏数据都放到gameData中方便下次获取this.gameData {bgGridsData,blocksData,stateData}// 调用这个会在画布中划分一块区域在顶部显示游戏状态game.initTopBar({data:stateData,reset(){...},redraw(data){...}})// 将上面的方法都加入到游戏引擎对象中...game.addBgObject({data:bgGridsData,reset(){...},redraw(data){...},methods:{...}})game.addBgObject({data:blocksData,reset(){...},redraw(data){...},methods:{...}})// 调用开始游戏方法this.restart()},/*** 以下都是触摸产生事件调用的方法*/onTouchStart(e) {...},onTouchMove(e) {...},onTouchEnd(e) {...},
)}看上面用了两个模块省了很多代码这样实现和读代码很容易 模块ZS1028_CSDN是小游戏引擎框架对象154行代码模块BLOCK是封装了方块的一些处理方法186行代码 游戏背景
初始化的游戏背景对象是bgGridsData如下代码看看有哪些数据
const bgGridsData {grids1:[],//上面的网格grids2:[],//下面的网格cols: 20,//网格列数isShowGrids: false //是否展示网格调试用途默认不展示
}将背景对象添加到game对象的属性data中
如下代码在方法redraw()实现绘制背景
game.addBgObject({data:bgGridsData,reset(){...}, //这里是可实现重置背景数据的方法redraw(data){const { topBar, canvas, context:ctx } data// 如果没有背景图片就需要绘制出来也是背景初始化的逻辑if (!this.cacheImg) {//省略更多...在这里实现绘制背景和网格//绘制好了就导出为图像对象let img canvas.createImage()img.onload () this.cacheImg imgimg.src canvas.toDataURL()//最后要处理保存背景数据...return}// 有背景图像了这里就把图像绘制出来ctx.drawImage(this.cacheImg,0,0,canvas.width,canvas.height)// 这里判断初始化的网格大小if (bgGridsData.gridSize0) {// 设定方块的颜色ctx.strokeStyle #000000ctx.fillStyle #000000// 上面的网格有数据以后this.data.grids1.forEach((grid){if (!grid.isBlock) return//有方块的话就调用方块模块的绘制方法绘制出来方块BLOCK.drawBlockAtGrid(ctx,bgGridsData.gridSize,grid.x,grid.y)})}},methods:{//类似组件的方法...都在这里添加实现在内部调用}
})网格背景图像是静态的可以当作缓存来绘制 未变化的图形是不建议重新初始化处理的这会消耗CPU计算资源 游戏方块
初始化游戏方块的是在blocksData对象里
如下代码看看有哪些数据
const blocksData {blocks:[],// 所有方块列表数据// 选择方块的select:{index:-1, // 执行方块列表数据的索引// 点击开始点startPoint:{x:-1,y:-1},// 拖动位置点movePoint:{x:-1,y:-1},// 位置变化差offsetX:0,offsetY:0}
}能看懂上面的一些定义吗看到后面就会知道有什么用了吧 将方块对象添加到game对象的属性data中
如下代码在方法redraw()实现绘制所有方块
const that this
game.addBgObject({data:blocksData,//重置方法reset(){const { blocks } this.datablocks.length 0//调用下面的方法分别设置三个随机方块在下面的网格中传入的是索引that.setRandomBlock()that.setRandomBlock(1)that.setRandomBlock(2)},redraw(data){const {canvas,context:ctx} dataconst {blocks,select}this.data// 遍历所有方块blocks.forEach((block,index){let offsetX0let offsetY0//如果选择了下面网格的一个方块if (indexselect.index){//调用模块的方法查找此方块的索引let gIndex BLOCK.findIndexFormGrid(bgGridsData.cols,block,0)//计算方块的开始点和结束点let startPoint ...let endX ...let endY ...//此处省略了...//再绘制选中的方块背景...ctx.strokeStyle #000000ctx.fillStyle #777777ctx.beginPath()ctx.rect(startPoint.x,startPoint.y,endX,endY)ctx.fill()ctx.stroke()//调用模块的更新选择方法就是改变select.offsetX和select.offsetYBLOCK.updateSelectBlockLocation(this.data.select)//拖动改变了位置offsetX this.data.select.offsetXoffsetY this.data.select.offsetY//获取下面方块在网格的数据let grid bgGridsData.grids2[block.index]if (grid) {//调用模块的方法获取拖动的方块在上面投影出来网格的方块let mapBlock BLOCK.findMappingBlock(bgGridsData.cols,bgGridsData.gridSize,bgGridsData.grids1,block,grid.xoffsetX,grid.yoffsetY)//如果有的话就绘制出来if (mapBlock) {ctx.strokeStyle #000000ctx.fillStyle #999999//调用此方法绘制方块mapBlock方法是在下面的methods定义的this.drawBlock(ctx,bgGridsData.grids1,mapBlock)}//最后将投影出来的方块存到起this.data.mapBlock mapBlock}}ctx.strokeStyle #000000ctx.fillStyle #000000//调用此方法绘制方块block方法是在下面的methods定义的this.drawBlock(ctx,bgGridsData.grids2,block,offsetX,offsetY)})},methods:{drawBlock(ctx,grids,block,offsetX0,offsetY0){//方块有个属性list这里记录方块的每一块相对坐标位置block.list.forEach((g,i){//此处省略了...绘制方块的每一块})}}
})开始游戏
在开始的游戏方法里调用game的方法run()即可
在调用游戏开始前需要调用reset()就可以重置游戏数据代码如下
restart() {const {game}thisconst {stateData}this.gameData//关闭定时器this.closeTimer()//重置游戏game.reset()//运行游戏game.run()//定时更新this.timer setInterval((){stateData.timerNum--if (stateData.timerNum0){stateData.isGameEnd truethis.closeTimer()app.setMaxScope(stateData.scope)wx.showModal({title: 系统提示,content: 游戏结束当前得分stateData.scope,showCancel: true,cancelText: 返回游戏,confirmText: 重新开始,complete: (res) {if (res.confirm) {this.restart()}}})return}},1100)
},写到这里游戏基本就可以运行了界面如下图
还没完呢需要实现游戏交互在触摸事件里实现
选择方块
开始触摸时会调用方法onTouchStart(e)
代码如下这里实现选择底部的方块
onTouchStart(e) {const touch e.touches[0]const { bgGridsData, blocksData, stateData } this.gameData//先判断游戏是否结束if (stateData.isGameEnd) return//获取触摸到方块的索引let blockIndex blocksData.blocks.findIndex(block{return block.list.find((g,i){//...调用模块的方法查找触摸到的方块索引let index BLOCK.findIndexFormGrid(bgGridsData.cols,block,i)let grid bgGridsData.grids2[index block.index]//判断指定网格位置return grid.xtouch.x grid.xbgGridsData.gridSizetouch.x grid.ytouch.y grid.ybgGridsData.gridSize touch.y})})//如果没有触摸到重置选择返回if (blockIndex0) {blocksData.select.index -1return}//执行到这里就是触摸到了设置以下选择数据blocksData.select.index blockIndexObject.assign(blocksData.select.startPoint,{x: touch.x,y: touch.y})},看上面的代码游戏交互的实现只需要自己实现修改游戏数据就可以了 具体的绘制逻辑之前就有讲过当数据变化绘制的状态也会跟着变化 拖动方块
触摸移动时也就是拖动操作会调用方法onTouchMove(e)
代码如下这里实现拖动方块
onTouchMove(e) {const touch e.touches[0]const { bgGridsData, blocksData } this.gameDataif (blocksData.select.index0) return//选择到方块然后移动就是拖动方块的操作了边移动边更新它的位置Object.assign(blocksData.select.movePoint,{x: touch.x,y: touch.y})
},消灭方块
不再触摸时也就是拖动取消了会调用方法onTouchEnd(e)
代码如下这里实现放置方块 onTouchEnd(e) {const { bgGridsData, blocksData, stateData } this.gameDataif (blocksData.select.index0) returnconst { select, mapBlock } blocksData//如果有投影出来的方块if (mapBlock) {//这里就处理把投影的方块设置到上面的网格中就真的放置上去了mapBlock.list.forEach((value,index){if (value1) returnlet gIndex BLOCK.findIndexFormGrid(bgGridsData.cols,mapBlock,index)let grid bgGridsData.grids1[gIndex mapBlock.index]grid.isBlock true})//放置好了接下来再出一个随机方块this.setRandomBlock(select.index)//调用模块的方法算出消灭方块的数量同时会修改网格的方块数据清空操作let count BLOCK.decreaseBlocksFormGrids(bgGridsData.grids1,bgGridsData.cols)if (count0) {//更新游戏状态加分加时间stateData.scope countstateData.timerNum 60//弹出提示wx.showToast({title: 消灭方块加60秒,icon: none})}}//以下是重置选择数据select.index -1Object.assign(select.startPoint, {x: -1,y: -1})Object.assign(select.movePoint, {x: -1,y: -1})
},还有对象game有个方法game.initTopBar()是初始化顶部显示的游戏状态看看游戏效果里有
其它方法以及模块的一些方法这里不多讲了不是重点
建议看源代码吧代码不多值得研究学习
游戏测试
写到这里方块消消乐游戏就算完成了可以运行编译测试
运行效果图如下点鼠标拖动底部的方块任选一个拖放到上面的框中
当某行或某列没有留空的话就会被消灭了会奖励时间底部出现的方块是随机的玩家根据自己的想法去拖放方块看谁消灭的多得分就越高哦同时会记录下来
想看项目源码的前往下载请点这里查找若不方便查找请在右侧输入关键词方块消消乐搜索即可本博客站内请放心下载感谢支持 可能手机上看不到下载点请改用电脑浏览器查看
