本文主要是介绍flappy bird js 源码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
素材
注入灵魂
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#canvas{background-image: url(res/sky.png);}</style>
</head>
<body><canvas id="canvas" width="800" height="400"></canvas><div id="res"></div>
</body><script>var canvas = document.getElementById('canvas')var context = canvas.getContext('2d')// 创建一个图片var img = new Image();img.src = 'res/birds.png'var birdX = 200;var birdY = 100;var birdTime = null;var stop = 0img.onload = function () {if(birdTime === null && stop === 0) {birdTime = setInterval(function(){if (birdY <= 350) {birdY++}context.clearRect(0,0,800,400)drawColumn ()context.drawImage(img,0,0,52,45,birdX,birdY,52,45);},10)}}var click = nulldocument.onmouseup = function () {if (stop === 0) {context.drawImage(img,0,0,52,45,birdX,birdY,52,45);clearInterval(click)}}document.onmousedown = function () {if (stop === 0) {click = setInterval(function() { context.drawImage(img,104,0,52,45,birdX,birdY,52,45);birdY = birdY-2},10)}}// 柱子 var columnArr = []var columnTiner = nullfunction createColumn () {columnTiner = setInterval(function() {var column = {}column.postionX = 800column.postionY = -Math.round(Math.random()*100 + 150);column.imgA = new Image()column.imgB = new Image()column.imgA.src = 'res/pipe2.png'column.imgB.src = 'res/pipe1.png'column.id = new Date().getTime()columnArr.push(column)},1500)}createColumn()var same = null;var mark = 0function drawColumn () {for(var i = 0 ; i < columnArr.length; i++) {columnArr[i].postionX--context.drawImage(columnArr[i].imgA,columnArr[i].postionX,columnArr[i].postionY - 100);context.drawImage(columnArr[i].imgB,columnArr[i].postionX,columnArr[i].postionY + 450);if (birdX + 40 >= columnArr[i].postionX && birdX - 70 <= columnArr[i].postionX) {if (columnArr[i].id != same) {mark++same = columnArr[i].id document.getElementById('res').innerHTML = "得分" + mark}// 判定碰撞if(birdY < columnArr[i].postionY + 300 || birdY + 35 > columnArr[i].postionY + 450) {clearInterval(columnTiner)clearInterval(birdTime)stop = 1document.getElementById('res').innerHTML = "最后得分" + mark + "刷新页面重新开始"}}}}</script>
</html>
这篇关于flappy bird js 源码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
