84行纯JavaScript代码的俄罗斯方块掉落堆叠游戏
<html> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); context.font = 'bold 30px sans-serif'; let scrollCounter, cameraY, current, mode, xSpeed; let ySpeed = 5; let height = 50; let boxes = []; boxes[0] = { x: 300, y: 300, width: 200 }; let debris = { x: 0, width: 0 }; function newBox() { boxes[current] = { x: 0, y: (current + 10) * height, width: boxes[current - 1].width }; } function gameOver() { mode = 'gameOver'; context.fillText('Game over. Click to play again!', 50, 50); } function animate() { if (mode != 'gameOver') { context.clearRect(0, 0, canvas.width, canvas.height); context.fillText('Score: ' + (current - 1).toString(), 100, 200); for (let n = 0; n < boxes.length; n++) { let box = boxes[n]; context.fillStyle = 'rgb(' + n * 16 + ',' + n * 16 + ',' + n * 16 + ')'; context.fillRect(box.x, 600 - box.y + cameraY, box.width, height); } context.fillStyle = 'red'; context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height); if (mode == 'bounce') { boxes[current].x = boxes[current].x + xSpeed; if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width) xSpeed = -xSpeed; if (xSpeed < 0 && boxes[current].x < 0) xSpeed = -xSpeed; } if (mode == 'fall') { boxes[current].y = boxes[current].y - ySpeed; if (boxes[current].y == boxes[current - 1].y + height) { mode = 'bounce'; let difference = boxes[current].x - boxes[current - 1].x; if (Math.abs(difference) >= boxes[current].width) { gameOver(); } debris = { y: boxes[current].y, width: difference }; if (boxes[current].x > boxes[current - 1].x) { boxes[current].width = boxes[current].width - difference; debris.x = boxes[current].x + boxes[current].width; } else { debris.x = boxes[current].x - difference; boxes[current].width = boxes[current].width + difference; boxes[current].x = boxes[current - 1].x; } if (xSpeed > 0) xSpeed++; else xSpeed--; current++; scrollCounter = height; newBox(); } } debris.y = debris.y - ySpeed; if (scrollCounter) { cameraY++; scrollCounter--; } } window.requestAnimationFrame(animate); } function restart() { boxes.splice(1, boxes.length - 1); mode = 'bounce'; cameraY = 0; scrollCounter = 0; xSpeed = 2; current = 1; newBox(); debris.y = 0; } canvas.onpointerdown = function() { if (mode == 'gameOver') restart(); else { if (mode == 'bounce') mode = 'fall'; } }; restart(); animate(); </script> </body> </html>
[第1-7行]初始化HTML5 Canvas。
[8-20]声明变量和对象。
[22-28]在前一个框之后创建新框的功能。
[30-33]“游戏结束”功能。
[35-89]主游戏循环。让我们看一下细节,因为这是所有操作所在。
[36]如果游戏处于活动状态:
[37-38]清除上一帧并显示得分。
[39-43]画出所有方框。
[41]选择框的颜色。
[44-45]画出碎片。
[46]如果游戏处于“弹跳”模式(当前框从墙壁水平弹起):
[47-52]在x轴上移动当前框。如果碰到墙壁,请反转方向。
[53]如果游戏处于“掉落”模式(当前框已释放):
[54]在y轴上移动当前框。
[55]如果它落在上一个框的顶部:
[56]将模式更改回“反弹”
[57]计算不重叠部分的长度。
[58-60]如果差异大于框,则表示玩家完全错失了:游戏结束!
[61-64]更新碎片对象。
[65-72]确定碎片应位于盒子的左侧还是右侧。
[73-76]提高弹跳速度。
[77-79]创建新框。
[82]对碎片进行动画处理-碎片不断下落,直到在[61-64]中再次更新。
[83-85] scrollCounter确定相机应向上移动几帧。如果为正,则相机位置会更新。
[88]等待下一个动画帧
[91]在新游戏开始时将初始值重新分配给变量的功能。
[102-109]单击(鼠标或触摸)处理程序:
[103-4]如果我们处于“游戏结束”模式,则只需重新启动游戏即可。
[106-7]如果我们处于“弹跳”模式,请切换至“下降”(放开包装盒)。
[111]初始化第一场比赛。
[112]开始播放动画。
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 84行纯JavaScript代码的俄罗斯方块掉落堆叠游戏
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 84行纯JavaScript代码的俄罗斯方块掉落堆叠游戏
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。