微信公众平台开发技术-游戏功能
原创拍蚊子游戏主要包括游戏启动、蚊子飞出、蚊子计数、游戏结束这几个功能块，游戏功能主要使用 JS 来控制实现。
游戏启动时要准备相应的场景，如图片加载、音乐加载、页面加载、字体根据屏幕适配等，确保用户开始时可以快速地进入游戏状态。启动过程中也需要获取用户的信息，以便后面显示结果时使用。在启动过程中主要使用 JS 来初始化页面以及控制样式，使用 CreateJS 框架来实现音频文件的加载，同时使用微信的 JS-SDK 获取用户信息。
蚊子飞出功能主要是，用户开始游戏时为保证游戏的连续性，从上方不断地生成 4 个格子的新行，格子中随机出现一个蚊子。蚊子计数功能相对要简单一些，用户的每一次拍打，只要拍打到蚊子，拍打的蚊子数加一，游戏结束时给出最后的拍死蚊子的数量。游戏结束则有两种情况，一种是时间到，另一种是没打到蚊子，触发任意一种就结束游戏。
功能实现 游戏启动玩家点击微信公众平台上的菜单找到拍蚊子游戏，点击进入游戏，游戏开始启动。启动过程主要是通过运行页面的初始化 JS 脚本进行页面渲染，主要使用 init 方法，具体如下。
1. function init（argument） { 2. showWelcomeLayer()； 3. body = document.getElementById（'gameBody'） || document.body； 4. body.style.height = window.innerHeight + 『px』； 5. transform = typeof （body.style.webkitTransform） ！= 『undefined』 ？ 『webkitTransform』 : （typeof (body.style.msTransform) != 'undefined' ? 'msTransform' : 'transform'）； 6. transitionDuration = transform.replace（/ransform/g, 'ransition Duration'）； 7. 8. GameTimeLayer = document.getElementById（'GameTimeLayer'）； 9. GameLayer.push（document.getElementById('GameLayer1')）； 10. GameLayer[0].children = GameLayer[0].querySelectorAll（'div'）； 11. GameLayer.push（document.getElementById('GameLayer2')）； 12. GameLayer[1].children = GameLayer[1].querySelectorAll（'div'）； 13. GameLayerBG = document.getElementById（'GameLayerBG'）； 14. if （GameLayerBG.ontouchstart === null） { 15. GameLayerBG.ontouchstart = gameTapEvent； 16. } else { 17. GameLayerBG.onmousedown = gameTapEvent； 18. document.getElementById（'landscape-text'）.innerHTML = 『点我开始 pia 蚊虫』； 19. document.getElementById（'landscape'）.onclick = winOpen； 20. } 21. gameInit()； 22. window.addEventListener（'resize', refreshSize, false）； 23. 24. var rtnMsg = 「true」； 25. 26. setTimeout(function(){ 27. if（rtnMsg == 『false』）{ 28. var btn = document.getElementById（『ready-btn』）； 29. btn.className = 『btn』； 30. btn.innerHTML = 『蚊子已经快被你 pia 成稀有物种了，手下留情啊！』 31. }else{ 32. var btn = document.getElementById（『ready-btn』）； 33. btn.className = 『btn』； 34. btn.innerHTML = 『 预备，上！』 35. btn.style.backgroundColor = 『#F00』； 36. btn.onclick = function(){ 37. closeWelcomeLayer()； 38. } 39. } 40. }， 500)； 41. }
开始界面效果如图 10-1 所示。
图 10-1 开始界面效果
单击「预备，上！」按钮后的界面如图 10-2 所示。
图 10-2 游戏界面
游戏开始时，玩家不断地拍蚊子，新的蚊子就需要不断地产生，使用 gameLayerMoveNextRow 方法来不断地移动行，此方法调用 refreshGameLayer 方法。
1. function refreshGameLayer(box, loop, offset) { 2. var i = Math.floor(Math.random() * 1000) % 4 + (loop ? 0 : 4); 3. for (var j = 0; j < box.children.length; j++) { 4. var r = box.children[j], 5. rstyle = r.style; 6. rstyle.left = (j % 4) * blockSize + 'px'; 7. rstyle.bottom = Math.floor(j / 4) * blockSize + 'px'; 8. rstyle.width = blockSize + 'px'; 9. rstyle.height = blockSize + 'px'; 10. r.className = r.className.replace(_clearttClsReg, ''); 11. if (i == j) { 12. _gameBBList.push({ cell: i % 4, id: r.id }); 13. r.className += ' t' + (Math.floor(Math.random()* 1000) % 5 + 1); 14. r.notEmpty = true; 15. i = (Math.floor(j / 4) + 1) * 4 + Math.floor(Math.random() * 1000) % 4; 16. } else { 17. r.notEmpty = false; 18. } 19. } 20. if (loop) { 21. box.style.webkitTransitionDuration = '0ms'; 22. box.style.display = 'none'; 23. box.y = -blockSize * (Math.floor(box.children.length / 4) + (offset || 0)) * loop; 24. setTimeout(function () { 25. box.style[transform] = 'translate3D(0,' + box.y + 'px,0)'; 26. setTimeout(function () { 27. box.style.display = 'block'; 28. }, 100); 29. }, 200); 30. } else { 31. box.y = 0; 32. box.style[transform] = 'translate3D(0,' + box.y + 'px,0)'; 33. } 34. box.style[transitionDuration] = '150ms'; 35. } 36. function gameLayerMoveNextRow() { 37. for (var i = 0; i < GameLayer.length; i++) { 38. var g = GameLayer[i]; 39. g.y += blockSize; 40. if (g.y > blockSize * (Math.floor(g.children.length / 4))) { 41. refreshGameLayer(g, 1, -1); 42. } else { 43. g.style[transform] = 'translate3D(0,' + g.y + 'px,0)'; 44. } 45. } 46. }
拍蚊子界面如图 10-3 所示。
图 10-3 拍蚊子界面
蚊子计数是在拍蚊子过程中进行的，这个过程会调用 gameTapEvent 事件方法，计数是先判断游戏是否结束，然后使用_gameScore 进行计数。
1. function gameTapEvent(e) { 2. if (_gameOver) { 3. return false; 4. } 5. var tar = e.target; 6. var y = e.clientY || e.targetTouches[0].clientY, 7. x = (e.clientX || e.targetTouches[0].clientX) - body.offsetLeft, 8. p = _gameBBList[_gameBBListIndex]; 9. if (y > touchArea[0] || y < touchArea[1]) { 10. return false; 11. } 12. if ((p.id == tar.id && tar.notEmpty) || (p.cell == 0 && x < blockSize) || (p.cell == 1 && x > blockSize && x < 2 * blockSize) || (p.cell == 2 && x > 2 * blockSize && x < 3 * blockSize) || (p.cell == 3 && x > 3 * blockSize)) { 13. if (!_gameStart) { 14. gameStart(); 15. } 16. createjs.Sound.play("tap"); 17. tar = document.getElementById(p.id); 18. tar.className = tar.className.replace(_ttreg, ' tt$1'); 19. _gameBBListIndex++; 20. _gameScore++; 21. gameLayerMoveNextRow(); 22. } else if (_gameStart && !tar.notEmpty) { 23. createjs.Sound.play("err"); 24. gameOver(); 25. tar.className += ' bad'; 26. } 27. return false; 28. }
版权保护: 本文由 李斯特 原创，转载请保留链接: https://www.wechatadd.com/artdet/9568
- 上一篇：微信公众平台开发技术-核心流程
- 下一篇：微信公众平台开发技术-项目介绍
