微信小程序俄罗斯方块游戏开发教程

// pages/index/index.js const { TetrisGame } = require('../../utils/tetris.js'); Page({ /** * 页面的初始数据 */ data: { score: 0, gameOver: false, isPaused: false, highScore: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 获取历史最高分 const highScore = wx.getStorageSync('tetris_high_score') || 0; this.setData({ highScore }); // 初始化画布 const context = wx.createCanvasContext('tetris'); this.context = context; this.blockSize = 30; // 每个方块的大小 // 初始化游戏 this.game = new TetrisGame(); this.startGame(); }, startGame() { if (this.gameInterval) clearInterval(this.gameInterval); // 设置游戏循环 this.gameInterval = setInterval(() => { if (!this.data.isPaused) { this.gameTick(); } }, 800); // 每800ms下落一次 this.draw(); }, gameTick() { if (this.data.isPaused || this.data.gameOver) return; if (!this.game.moveDown() || this.game.gameOver) { if (this.game.gameOver) { // 立即触发游戏结束 this.handleGameOver(); } } this.setData({ score: this.game.score }); this.draw(); }, // 新增游戏结束处理方法 handleGameOver() { // 停止游戏循环 clearInterval(this.gameInterval); // 更新状态 this.setData({ gameOver: true }); // 震动反馈 wx.vibrateShort({ type: 'medium' }); // 更新最高分 const currentScore = this.game.score; if (currentScore > this.data.highScore) { const newHighScore = currentScore; this.setData({ highScore: newHighScore }); wx.setStorageSync('tetris_high_score', newHighScore); } // 绘制游戏结束画面 this.drawGameOverScreen(); // 显示游戏结束对话框 wx.showModal({ title: '游戏结束', content: `方块已触顶！\n最终得分：${currentScore}\n最高记录：${this.data.highScore}`, confirmText: '重新开始', cancelText: '退出', success: (res) => { if (res.confirm) { this.restartGame(); } } }); }, // 绘制游戏画面 draw() { const ctx = this.context; const blockSize = this.blockSize; // 清空画布 ctx.clearRect(0, 0, this.blockSize * this.game.width, this.blockSize * this.game.height); // 绘制固定的方块 this.game.board.forEach((row, y) => { row.forEach((value, x) => { if (value) { this.drawBlock(ctx, x, y); } }); }); // 绘制当前下落的方块 const { shape, x, y } = this.game.currentPiece; shape.forEach((row, rowIndex) => { row.forEach((value, colIndex) => { if (value) { this.drawBlock(ctx, x + colIndex, y + rowIndex); } }); }); ctx.draw(); }, // 绘制单个方块 drawBlock(ctx, x, y) { const blockSize = this.blockSize; ctx.fillStyle = '#007AFF'; ctx.fillRect(x * blockSize, y * blockSize, blockSize - 1, blockSize - 1); }, // 控制按钮事件 moveLeft() { if (!this.data.isPaused && !this.data.gameOver) { this.game.moveLeft(); this.draw(); } }, moveRight() { if (!this.data.isPaused && !this.data.gameOver) { this.game.moveRight(); this.draw(); } }, rotate() { if (!this.data.isPaused && !this.data.gameOver) { this.game.rotate(); this.draw(); } }, dropFast() { if (this.data.isPaused || this.data.gameOver) return; // 添加安全检查，确保当前方块完全进入游戏区域 if (this.game.currentPiece.y < 0) { // 如果方块还在顶部上方，先让它下落到可见区域 while (this.game.currentPiece.y < 0) { this.game.moveDown(); } } // 继续快速下落 let moveCount = 0; const maxMoves = this.game.height; // 防止无限循环 while (moveCount < maxMoves) { if (!this.game.moveDown() || this.game.gameOver) { break; } moveCount++; } this.setData({ score: this.game.score }); this.draw(); // 检查游戏是否结束 if (this.game.gameOver) { this.handleGameOver(); } }, restartGame() { this.game.reset(); this.setData({ score: 0, gameOver: false, isPaused: false }); if (this.gameInterval) { clearInterval(this.gameInterval); } this.startGame(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { if (this.gameInterval) { clearInterval(this.gameInterval); } }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { }, // 添加暂停/继续功能 togglePause() { if (this.data.gameOver) return; const newPausedState = !this.data.isPaused; this.setData({ isPaused: newPausedState }); if (newPausedState) { // 绘制暂停状态 this.drawPauseScreen(); } else { // 继续游戏，重新绘制 this.draw(); } }, // 绘制暂停屏幕 drawPauseScreen() { const ctx = this.context; // 保存当前游戏画面 this.draw(); // 添加半透明遮罩 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, this.blockSize * this.game.width, this.blockSize * this.game.height); // 添加暂停文字 ctx.fillStyle = '#ffffff'; ctx.font = '20px Arial'; ctx.textAlign = 'center'; const centerX = (this.blockSize * this.game.width) / 2; const centerY = (this.blockSize * this.game.height) / 2; ctx.fillText('游戏暂停', centerX, centerY); ctx.draw(); }, // 修改绘制游戏结束画面方法 drawGameOverScreen() { const ctx = this.context; // 保存当前游戏状态 this.draw(); // 绘制半透明遮罩 ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(0, 0, this.blockSize * this.game.width, this.blockSize * this.game.height); // 绘制游戏结束文字 ctx.fillStyle = '#FF0000'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; const centerX = (this.blockSize * this.game.width) / 2; const centerY = (this.blockSize * this.game.height) / 2; ctx.fillText('游戏结束', centerX, centerY - 40); ctx.fillText('方块已触顶！', centerX, centerY); ctx.font = '20px Arial'; ctx.fillStyle = '#FFFFFF'; ctx.fillText(`最终得分: ${this.game.score}`, centerX, centerY + 40); ctx.draw(); } })