纯JavaScript 实现flappy bird小游戏实例代码(2)

//游戏结束 function gameover() { //游戏结束背景音乐打开 gameover_bgm.play(); isGameOver = false; //结束音乐 bgm.pause(); clearTimer(); //小鸟换回原来的样式 bird.id = 'flybird' bird.className = 'birddown' bird.style.top = '392px'; //存储最高纪录 var historyscore = localStorage.getItem('maxScore'); //当历史记录不存在或者历史记录小于当前记录时，创建masScore. if(historyscore == null || historyscore < score) { localStorage.setItem('maxScore', score); //刷新记录 historyscore = score; } //历史最高纪录 historyScore.innerHTML = historyscore; //当前分数 thisScore.innerHTML = score; //显示游戏结束画面 document.querySelector('.gameover').style.display = 'block'; }

步骤7：游戏开始方法。

//游戏初始化 function init() { //为start_btn，即页面刚开始显示的start创建点击事件，即开始按钮 start_btn.onclick = function() { //点击之后，开始界面隐藏 gameStartDiv.style.display = 'none'; //小鸟显示出来 bird.style.display = 'block'; //使小鸟在中间显示 bird.style.top = '200px'; bgm.play(); //通过点击，来调用birdJump方法，来使小鸟上升 //开始创造管道 conduitTimer = setInterval(create_pipe, 2000) document.addEventListener('click', birdJump, false) crashTestTimer = setInterval(judge, 1000 / 60); } } init();

步骤7：游戏重新开始方法

//重新开始 var game_restart = document.querySelector(".game_restart") game_restart.onclick = restart; var conduit_group = document.querySelector(".conduit_group") //回到刚开始的界面 function restart() { bird.className = 'bird' clearTimer(); scoreDiv.innerHTML = null; isGameOver = true; speed = 0; score=0; speedMax = 8; document.querySelector('.gameover').style.display = 'none'; gameStartDiv.style.display = 'block'; bird.style.display = 'none'; conduit_group.innerHTML = ''; }

这儿用到的clearTimer方法为清除所有记时器，代码如下：

function clearTimer() { var timer = setInterval(function() {}, 30); for(i = 0; i < timer; i++) { clearInterval(i); } }

这样游戏大致已经做好啦。

效果图如下：

下面附上源码下载地址,请在谷歌浏览器上进行试验。

源码下载地址

以上所述是小编给大家介绍的纯JavaScript 实现flappy bird小游戏实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: