flappy-flappy bird原版下载

flappy bird 可能是近几年热度最火爆的小游戏之一，如果你忘记了，或者还没有玩过，那么你可以先看看这个视频回顾一下。 ## 演示 live demo(./flappybird.html) 建议使用 PC 浏览器打开上述链接，手机浏览器可能会卡顿。 ## 玩法（Gameplay） 点击游戏界面，小鸟就会向上飞，但是时间一长就会下坠，如果撞到管子就游戏结束了。 ## 代码概要 ### HTML 简单创建页面的结构，包括一个 `canvas` 元素来作为游戏画布。 ```html ``` ### CSS 对 `canvas` 做固定定位并添加背景色。 ```css .canvas { background: #0d5eb3; position: fixed; z-index: 1; } ``` ### JavaScript #### 定义变量 定义一些游戏中需要用的变量。 ```js // 煤气罐变量 var spaceSize = 250 // 两个煤气罐之间的空隙大小 var totalSpace = 5 // 显示在页面里的煤气罐的个数 var topSpace // 储存多个煤气罐的高度的数组 var speed = 2.4 // 移动速度 var birdY = 250 // 鸟的初始位置 var birdDY // 鸟的垂直速度，随时间变化 var birdDH = 20 // 鸟的高度 var birdDX = 50 // 鸟的水平位置 var score = 0 // 记分 var intervalId // 定时器，用于每隔固定时间绘制画布 var context // canvas上下文 ``` #### 创建图形 准备画图的基本工具、画笔。 ```js // 获取页面中的 canvas 元素 var canvas = document.querySelector('#game') context = canvas.getContext('2d') ``` 画鸟。 ```js function drawBird () { context.fillStyle = "yellow" context.beginPath() context.arc(birdDX, birdY, birdDH, 0, Math.PI * 2) context.fill() } ``` 引入煤气罐图片。 ```js .pipe = new Image() .pipe.src = './images/pipe.png' ``` 画煤气罐，使用 `pipe.src` 这个图片库。高度是随机生成的，宽度就是图片的宽度。 ```js function drawPipe (pipeX) { for (var i = 0; i < totalSpace; i++) { context.drawImage(pipeImg, pipeX + spaceSize * i, 0, 57, topSpacei) context.drawImage(pipeImg, pipeX + spaceSize * i, topSpacei + spaceSize, 57, 800) } } ``` 总结一下，这里的思路就是画两张图片叠加起来模拟管道。一张是顶部，一张是底部。 ```js // 定义下一个待会需要的X坐标 var nextNumber = spaces0 // 因为煤气罐移动速度比小鸟快，所以需要多移动几次 var nextNumber1 = spaces1 function movePipes () { // 将水管蠕动的数组里的变量每一个都减去水管移动的速度 for (var j = 0; j < spaces.length; j++) { spacesj = spacesj - speed } // 当水管剩下不到一个屏幕宽时，再补充一个 if (nextNumber < 10) { spaces.push(300) var n1 = Math.random() * 250 + 200 spaces.push(n1) nextNumber = spaces0 = spaces2 nextNumber1 = spaces1 = spaces3 } // 画出每个水管 // for (var j = 0; j < spaces.length; j++) { // drawPipes(spacesj) // } // 上面的method有一个问题，那就是一个变量只能画一次，所以不能让画纪录i一直循环会导致重复绘画很多个也是不合理的 // 所以我们想一个数一有9个就可以了啊 // 9个画1靠近屏幕边缘对齐的（96作为间隔，加上下刚才那个56正好是1011） for (var j = 0; j < 9; j++) { drawPipe(j * 96) } console.log(nextNumber1) // 将水管的第一个X坐标和水管之间的距离和第二个X坐标和水管之间的距离都减去水管移动的速度 nextNumber -= speed nextNumber1 -= speed } ``` #### 主程序控制 每隔一段时间就绘制画面。 ```js intervalId = setInterval(aGame, 20) ``` 定义要执行的方法主游戏逻辑。 ```js function aGame () { context.clearRect(0, 0, canvas.width, canvas.height) movePipes() // drawGround() drawBird() if (birdY > 700 - 50) { gameOver() } // checkTouch() writeScore() birdDown() } ``` 每隔一段时间执行一次主游戏逻辑。 ```js intervalId = setInterval(aGame, 20) ``` #### 点击事件 给页面绑定点击事件。 ```js document.body.onclick = function () { birdDY = -8 } ``` 点击屏幕之后，鸟的 Y 速度变为 -8，也就是向上飞。 ```js function birdDown () { birdY = birdY + birdDY if (birdDY < 10) { birdDY = birdDY + 0.3 } } ``` 每执行一次主程序，鸟的垂直位置发生变化。 ```js document.body.onclick = function () { birdDY = -8 } ``` #### 排行榜 根据当前分数绘制排行榜。 ```js function writeScore () { context.font = "20px Georgia" context.fillText("score" + score, 10, 50); } function gameOver () { clearInterval(intervalId) document.querySelector('.div2').style.display = "block" document.querySelector('#pointer').innerHTML = "本次得分" + score } ``` 游戏结束后，清除定时器，显示“本次得分”，和game over。 ```js var middleX = canvas.width / 2 - scoreImg.width / 2 var middleY = canvas.height / 2 - scoreImg.height / 2 // 点击返回上一页 document.body.onclick = function () { window.history.back(-1) } function gameOver () { // 先清除计时器 clearInterval(intervalId) // 然后显示game over context.drawImage(scoreImg, middleX, middleY + 18, 364, 96) context.shadowBlur = 25 context.shadowColor = "black" context.fillText("-score:" + score + "-", middleX + 55, middleY + 70) // 显示排行榜 document.querySelector('#pointer').innerHTML = "本次得分" + score // 以下是重新开始 document.querySelector('.div2').style.display = "block" document.querySelector('.preBtn').style.display = "none" document.querySelector('#pre').onclick = function () { window.location.reload() gameOver() } scoreData.push(score) } var scoreData = // 每次游戏过后绘制排行榜 document.querySelector('#record').onclick = function () { addScore() showRecord() } ``` 创建一个提交分数的方法。 ```js function addScore () { var inputName = document.querySelector('#name') var name = inputName.value