做者 | 李雪敬
javascript
出品 | 程序人生(coder_life)
php
塔式堆叠小游戏游戏玩法html
想必你们对这个小游戏都挺熟悉的。这个游戏的重点是把尽量多的盒子叠在一块儿。当你点击屏幕时,位于上方正在移动的盒子会往下掉,若是想要上面移动的盒子正好落在下面盒子上,就须要在合适的时机点击屏幕。若是你没在两个盒子完美对齐的时候点击,盒子突出的部分就会被切割掉下来(“碎片”),下一个盒子的落地空间就更小了,比前一个更难弹跳。java
游戏代码canvas
<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>
参考连接:https://slicker.me/javascript/tower.htmrest
#欢迎来留言#code
留言点赞数量最多的前两名htm
程序人生携手【北京大学出版社】送出游戏
《从零开始读懂量子力学》一本ip
截至9月18日14:00点