当前位置：首页 > news >正文

爆款解压《打螺丝消除》微信小游戏（可直接上线）

news 2026/4/30 23:14:41

效果：打螺丝我贼行

一、前言

最近打螺丝消除小游戏爆火！极简操作、极致解压、零学习门槛，男女老少通吃，留存率超高。

本篇文章带你从零开发完整版打螺丝消除小游戏，使用官方小游戏引擎 + Canvas 渲染，不依赖第三方框架，代码轻量、运行流畅、可直接发布上线。包含：随机关卡生成、螺丝螺孔匹配、消除动画、计分、通关、下一关，全套功能一次到位！

二、游戏玩法（完全复刻爆款原版）

屏幕上方是螺孔区域，下方是待安装螺丝
点击螺丝 → 选中
点击对应颜色螺孔 → 安装成功并消除
颜色不匹配则提示错误
全部安装完成 → 通关解锁下一关
关卡越高，螺丝越多、颜色越杂，难度越高

三、技术栈

开发平台：WX官方引擎
渲染方式：Canvas 2D
开发语言：JavaScript
开发工具：微信开发者工具
特点：无框架、无依赖、体积小、运行快

四、项目结构

├── game.js # 游戏主逻辑 ├── js/ │ └── main.js # 核心渲染+交互 ├── images/ # 可选资源 ├── game.json # 小游戏配置 └── app.js # 入口文件

五、完整代码实现（可直接复制运行）

1. game.json 配置文件

{ "deviceOrientation": "portrait", "showStatusBar": false, "networkTimeout": { "request": 10000 } }

2. app.js 入口文件

App({ onLaunch() { console.log('打螺丝消除小游戏启动') } })

3. js/main.js 游戏核心代码（最重要）

const canvas = wx.createCanvas() const ctx = canvas.getContext('2d') // 颜色配置 const colors = [ { name: 'red', rgb: [255,60,60] }, { name: 'blue', rgb: [30,130,255] }, { name: 'yellow', rgb: [255,180,0] }, { name: 'green', rgb: [0,190,70] } ] // 游戏数据 let game = { level: 1, score: 0, screwList: [], holeList: [], selectScrew: null, tip: '' } // 初始化关卡 function initLevel() { let count = 6 + game.level * 2 let colorNum = Math.min(2 + Math.floor(game.level/2), 4) let useColors = colors.slice(0, colorNum) game.screwList = [] game.holeList = [] game.selectScrew = null // 生成螺丝 & 螺孔 for(let i=0; i<count; i++) { let c = useColors[Math.floor(Math.random()*useColors.length)] game.screwList.push({ color: c, x:0, y:0, active:false }) game.holeList.push({ color: c, x:0, y:0, fill:false, active:false }) } layoutItems() render() } // 布局位置 function layoutItems() { let count = game.screwList.length // 螺孔布局（上方） for(let i=0; i<count; i++) { game.holeList[i].x = 150 + (i%4)*120 game.holeList[i].y = 300 + Math.floor(i/4)*120 } // 螺丝布局（下方） for(let i=0; i<count; i++) { game.screwList[i].x = 150 + (i%4)*120 game.screwList[i].y = 800 + Math.floor(i/4)*120 } } // 渲染画面 function render() { ctx.clearRect(0,0,canvas.width,canvas.height) // 绘制标题 ctx.fillStyle = '#333' ctx.font = '40px Arial' ctx.fillText(`第${game.level}关`, 50, 80) ctx.fillText(`得分：${game.score}`, 450, 80) // 绘制螺孔 game.holeList.forEach((h, i)=>{ ctx.fillStyle = h.active ? '#0099ff' : '#ddd' ctx.fillRect(h.x-40, h.y-40, 80, 80) if(h.fill) { ctx.fillStyle = `rgb(${h.color.rgb})` ctx.fillRect(h.x-30, h.y-30, 60, 60) } }) // 绘制螺丝 game.screwList.forEach((s, i)=>{ if(s.used) return ctx.fillStyle = s.active ? '#fff' : '#eee' ctx.fillRect(s.x-45, s.y-45, 90, 90) ctx.fillStyle = `rgb(${s.color.rgb})` ctx.fillRect(s.x-30, s.y-30, 60, 60) }) // 提示文字 if(game.tip) { ctx.fillStyle = '#ff3030' ctx.font = '32px Arial' ctx.fillText(game.tip, 200, 130) } } // 点击事件 wx.onTouchEnd((e)=>{ let x = e.touches[0].clientX let y = e.touches[0].clientY game.tip = '' // 点击螺丝 for(let i=0; i<game.screwList.length; i++) { let s = game.screwList[i] if(s.used) continue if(Math.abs(x-s.x)<50 && Math.abs(y-s.y)<50) { game.screwList.forEach(t=>t.active=false) s.active = true game.selectScrew = {index:i, color:s.color} render() return } } // 点击螺孔 for(let i=0; i<game.holeList.length; i++) { let h = game.holeList[i] if(h.fill) continue if(Math.abs(x-h.x)<50 && Math.abs(y-h.y)<50) { if(!game.selectScrew) { game.tip = '请先选择螺丝' render() return } // 颜色匹配 if(game.selectScrew.color.name === h.color.name) { h.fill = true game.screwList[game.selectScrew.index].used = true game.score += 10 game.selectScrew = null checkWin() } else { game.tip = '颜色不匹配' } render() return } } }) // 通关判断 function checkWin() { let allFill = game.holeList.every(h=>h.fill) if(allFill) { wx.showModal({ title: '恭喜通关', content: `第${game.level}关完成！`, success(res) { if(res.confirm) { game.level++ initLevel() } } }) } } // 启动游戏 initLevel()

4. game.js 启动文件