2. 程式人生 > >學著做的第一個小遊戲 flappyBrid 飛翔的小鳥 有圖片資源

學著做的第一個小遊戲 flappyBrid 飛翔的小鳥 有圖片資源

阿新 • • 發佈：2019-01-21 
<!DOCTYPE html>
<html>
<head>
	<title>飛鳥</title>
	<style type="text/css">
	/* 不同核心*/
		@-webkit-keyframes fly{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(0,30px,0); 
				-o-transform: translate3d(0,30px,0); 
				-ms-transform: translate3d(0,30px,0); 
				-moz-transform: translate3d(0,30px,0);
				-webkit-transform: translate3d(0,30px,0); 
			}
		}

		@keyframes fly{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0); 
				-moz-transform: translate3d(0,0,0); 
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(0,30px,0); 
				-o-transform: translate3d(0,30px,0); 
				-ms-transform: translate3d(0,30px,0);
				-moz-transform: translate3d(0,30px,0); 
				-webkit-transform: translate3d(0,30px,0); 
			}
		}

		@keyframes birdMove{
			0%{
				background: url("./img/bird2_2.png");
			}
			50%{
				background: url("./img/bird2_1.png");
			}
			100%{
				background: url("./img/bird2_0.png");
			}
		}
		@keyframes banner{
			0%{
				transform: translate3d(0,0,0); 
				-o-transform: translate3d(0,0,0); 
				-ms-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0); 
				-webkit-transform: translate3d(0,0,0); 
			}
			100%{
				transform: translate3d(-288px,0,0); 
				-o-transform: translate3d(-288px,0,0); 
				-ms-transform: translate3d(-288px,0,0); 
				-moz-transform: translate3d(-288px,0,0); 
				-webkit-transform: translate3d(-288px,0,0); 
			}
		}

		#wrap{
			width: 288px;
			height: 512px;
			background: url("./img/bg_day.png");
			margin:0 auto;
			overflow: hidden;
			position: relative;
		}
		#beginScore{
			width: 24px;
			height: 44px;
			background: url("./img/0.png");
			margin: 35px auto;
		}
		#title {
			width: 178px;
			height: 48px;
			margin: 0 auto;
			position: relative;

			
			-o-animation: fly 1s infinite alternate; 
			-ms-animation: fly 1s infinite alternate;
			-moz-animation: fly 1s infinite alternate;
			-webkit-animation: fly 1s infinite alternate;
			
		}
		#beginBird{
			width: 34px;
			height: 25px;
			background: url("./img/bird2_2.png");
			position: absolute;
			left: 50%;
			transform: translate3d(-50%,0,0);

			animation: birdMove 1s infinite alternate;
			-o-animation: birdMove 1s infinite alternate;		
			-ms-animation: birdMove 1s infinite alternate;
			-moz-animation: birdMove 1s infinite alternate;		
			-webkit-animation: birdMove 1s infinite alternate;
			 
		}
		#beginBtn{
			width: 116px;
			height: 70px;
			background: url("./img/button_play.png");
			position: absolute;
			left: 50%;
			transform: translate3d(-50%,0,0);
			top: 320px;
		}
		#banner{
			background: url("./img/land.png");
			width: 576px;
			height: 90px;
			position: absolute;
			bottom: 0px;

			animation: banner 3s linear infinite ;
			-webkit-animation: banner 3s linear  infinite ;
		}
		#bird{
			width: 33px;
			height: 25px;
			/*background: url("./img/bird2_0.png");*/
			position: absolute;
			left: 30px;
			top: 200px;
			display: none;
		}
		.birdup{
			background: url("./img/bird2_1.png");
		}
		.birddown{
			background: url("./img/bird2_2.png");
		}

		.duct {
			width: 52px;
			height: 422px;
			overflow: hidden;
			/*border: 1px solid black;*/
			position: absolute;
			left: 288px;	
			
		}
		.upduct{
			width: 62px;
			height: 320px;
			background: url("./img/pipe_up.png") no-repeat;
			position: absolute;
			bottom: -100px;
		}
		.downduct{
			width: 62px;
			height: 320px;
			background: url("./img/pipe_down.png") no-repeat;
			position: absolute;
			/*圖片有320高  320 - top 就是露出來的高度*/
			top: -200px;

		}
		#gameover{
			width: 204px;
			height: 54px;
			background: url("./img/text_game_over.png");
			position: absolute;
			top: 100px;
			left: 50%;
			transform: translate3d(-50%,0,0);
			display: none;
			z-index: 5;
		}
		#again{
			width: 80px;
			height: 28px;
			background: url("./img/button_ok.png");
			position: absolute;
			top: 180px;
			left: 50%;
			transform: translate3d(-50%,0,0);
			display: none;
			z-index: 5;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="beginScore"></div>
		<div id="title">
			<img src="./img/title.png"><div id="beginBird"></div>
		</div>
		<div id="beginBtn"></div>
		<div id="banner"></div>

		<div id="bird"></div>
		<div id="gameover"></div>
		<div id="again"></div>

	</div>


	<script type="text/javascript">
		var wrap = document.getElementById('wrap');
		var beginBtn = document.getElementById('beginBtn');
		var beginScore = document.getElementById('beginScore');
		var title = document.getElementById('title');
		var bird = document.getElementById('bird');
		var gameoverimg = document.getElementById('gameover');
		var okbutton = document.getElementById('again');
		
		var y = 2;

		gameBegin();
		tapWrap();
		
		function gameBegin() {
			beginBtn.onclick = function () {
				beginScore.style.display = "none";
				title.style.display = "none";
				this.style.display = "none";
				bird.style.display = "block";

				birdMove(bird);
				creatDuct();
				
			}		
		}
		
		function birdMove(bird) {
			var offTop = bird.offsetTop;
			var timer = setInterval(function () {
				offTop += y;
				y+=0.5;
				if (y > 6) {
					y = 6;
				}
				if (y < 0) {
					bird.className = "birdup";
				}
				else{
					bird.className = "birddown";
				}

				// 判斷 小鳥是否落地
				if (offTop >= 512-25-90 ) {
					offTop = 512-25-90;
					clearInterval(timer);
					gameover();
				}
				bird.style.top = offTop +'px';
			},30)
		}

		function tapWrap() {
			wrap.onclick = function () {
				y =-7;
			}
		}
		//獲得隨機的 值
		function random(min,max) {
			return parseInt(Math.random() * (max - min)+ (min + 1));
		}

		function creatDuct() {
			//每隔   建立一組管道
			var timer = setInterval(function () {
				// 
				var duct = document.createElement("div");
				duct.className = "duct";
				wrap.appendChild(duct);

				var upduct =  document.createElement("div");//新增向上開口的水管
				upduct.className = "upduct";
				upduct.style.bottom = random(-260,-60) + "px";//設定bottom 設定隨機範圍是-260 到 -60
				duct.appendChild(upduct);

				var downduct =  document.createElement("div");//新增向下開口的水管
				downduct.className = "downduct";

				var upductBot = getComputedStyle(upduct).bottom; //獲取bottom的值
				upductBot = Number(upductBot.replace('px','')); // 轉換為數字
				downduct.style.top = -318 - upductBot   + "px"; // 根據bottom設定top
				duct.appendChild(downduct);

				ductMove(duct,upduct,downduct,timer);
				


			},2000); 
		}
		function ductMove(duct,upduct,downduct,timer) {
			var birdLeft = bird.offsetLeft;  //30
			var birdRight = bird.offsetLeft + bird.offsetWidth; //30+48
			
		        var offLeft = duct.offsetLeft;
		        var timer2 = setInterval(function () {
				offLeft -= 1;
				duct.style.left = offLeft + "px";
				//移除 水管
				if (duct.offsetLeft + duct.offsetWidth <=0) {
					
					duct.remove();
					
				}
				
				if (duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft)  {			
					 if ( bird.offsetTop < (downduct.offsetTop + downduct.offsetHeight) || bird.offsetTop + bird.offsetHeight > upduct.offsetTop) {
					 	gameover(timer,timer2);
					 	alert("你掛了");
					 }
				}
				duct.move =timer2;
				//(duct.offsetLeft < birdRight && (duct.offsetLeft + duct.offsetWidth) > birdLeft && bird.offsetTop > (downduct.offsetTop + downduct.offsetHeight) && bird.offsetTop + bird.offsetHeight < upduct.offsetTop)
			},13);
		}
		function gameover(timer,timer2) {
			
				gameoverimg.style.display = "block";
				okbutton.style.display = "block";
				again();
				clearInterval(timer2);
				clearInterval(timer);

		}
		function again() {
			okbutton.onclick = function () {
				window.location.reload();
				
			}
		}
		
	</script>
</body>
</html>

相關推薦

學著做的第一個小遊戲 flappyBrid 飛翔的小鳥 有圖片資源

<!DOCTYPE html> <html> <head> <title>飛鳥</title> <style type="text/css"> /* 不同核心*/ @-webkit-keyfra

皇家利華註冊156+8793+1777學著做個情調女人

社會 -- 制造 世紀 生命 名著 做的 電視 社會地位 學著做個情調女人情調女人與年齡無關，是一種平和而熱烈的心境，是一種面對現實的修養，是一種生活方式，是一種成熟的幸福女人的生存方式和為人處世的態度，情調女人的生成，是先天的，也是後天的，情調女人是物質的，更多是精神的。

用Python做個小遊戲：環境篇

一、安裝Python和pygame 1、在Windows環境下，安裝Python 略 2、安裝pygame，網址： http://pygame.org 使用Python自帶pip工具即可快速安裝pygame： python3 -m pip install -U py

動手用JAVA做個小遊戲--貪吃蛇

轉眼在大學蹲了快三個春秋，在這幾年裡我可謂是經歷過了大學的“風風雨雨”，逃課、泡女、通宵打機......種種的種種！還有一年就畢業了，回首過去，說實在的還真有點後悔，畢竟看到別人被大公司提前錄用而自己還在碌碌無為在此我想給那些剛進大學的朋友一個忠告：大學真的真的不是給你來玩

JAVA 第一個小專案 桌球遊戲 （桌球小程式練習）

今天裝了Eclipse  學習第一個小程式‘’ 　　#載入視窗 　　#畫視窗 import java.awt.*;import javax.swing.*; public class BallGame extends JFrame{ Image ball = Toolkit.ge

JAVA 第一個小專案 桌球遊戲 （桌球小程式練習2）最終版本

import java.awt.*;import javax.swing.*; public class BallGame2 extends JFrame{ Image ball = Toolkit.getDefaultToolkit().getImage("images/ball.png"); Ima

Android做的第一個小程式

前天和昨天兩天折騰了兩個晚上，終於把Android的環境配置好了，寫了一個可以臭美的Demo。對Android的大概做了下了解。先把程式的簡單介面上傳上來看看。 通過做這個小東東，主要了解了幾個東西： 1、在Android中每個螢幕或者說每個頁面，是有一個叫做Activ

小程序初體驗：手把手教你寫出第一個小程序（一）

輸入框 個人 創建 公測 快速 nsh 成功 too 調用 本文筆者將根據quick start中的範例代碼，帶大家簡單地剖析一下小程序的運行方式，並介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。 適用對象：前端初學者，對小程序開發感興趣者 tip

《Eclipse的設置和第一個小程序的編寫》

不能 點擊 reference 版本 servers 進行 ext .cn nco 前言：本次Eclipse操作必須是完成JDK環境變量的配置、Toccat的下載和配置後，才能夠順利進行的。如果在本次操作中遇到困難可以留言。 一、編碼前對Eclipse的設置 　　1.點擊W

java第一個小程序

rgs pub print 小程序 static java world sta 程序 package test; public class test { public static void main(String[] args) {

偶寫的第一個小頁面

一個 doctype 頁面 -1 鏈接 itl 提示 改變世界 .html <!doctype html><html><head><meta charset="utf-8"><!--聲明用utf8寫代碼，如果不加這句話運

微信小程序-----安裝，編寫第一個小程序和運行到手機端

alt ima 下載 weixin nload 公眾平臺 軟件 分享 微信公眾平臺 第一步： 微信公眾平臺註冊賬號，並選擇小程序，網址：mp.weixin.qq.com 填寫相關信息，如:主體類型（個人或者企業） 　　 AppID 在開發中都是用的到的，

51點亮第一個小燈

小寫 停止 clu 一個 多說 ddr3 ddr add 程序 #include <reg52.h> sbit LED=P0^0;//sbit 小寫 ,P必須大寫 void main() { LED=0; while(1);//程序停止在這裏 //

用UNITY5開發第一個手機遊戲(1)各種插件的準備

插件 amp nvt ef6 手機遊戲 開發 fan dnv arc GPUGEMS%E2%80%94%E2%80%94%E7%AC%AC23%E7%AB%A0%E5%A4%B4%E5%8F%91%E5%8A%A8%E7%94%BB%E5%92%8C%E6%B8%B2%E6

M03 利用Accord 進行機器學習的第一個小例子

statistic decide blog cat studio mac eap strong cte 01 安裝 Visual studio 2017. 不具備安裝這個的話，也可安裝，Microsoft Visual Studio Express (or equiva

動手搭建第一個小程序音視頻Demo

post 其中 聯系我們 開發環境 會同 ng2 gets 打開 才會 歡迎大家前往雲+社區，獲取更多騰訊海量技術實踐幹貨哦~ 作者：小程序音視頻產品經理 騰訊雲提供了全套技術文檔和源碼來幫助您快速構建一個音視頻小程序，但是再好的源碼和文檔也有學習成本，為了盡快的能調試

我的第一個小程式呼叫scanf語句

define _CRT_SECURE_NO_WARNINGS include<stdio.h> #include<stdlib.h> int main(){ int a = 1; scanf("%d", &a); if (a < 2){ prin

微信小程式之：雲開發初體驗--致我的第一個小程式

背景：一直關注微信小程式的發展，看著小程式一步步完善，一步步壯大，心裡癢癢，也想做一個自己的微信小程式，但是苦於只會前端，不會服務端，所以想法一直被卡著。現在小程式有了雲開發，很輕鬆實現後端功能，寫後端跟寫前端沒啥區別，真的是前端小夥伴們的福音啊。 經過幾個晚上的熬夜奮戰，我的第一個微信小程式正式

2.我的第一個小程式（獲取使用者資訊--包括敏感資訊）

小友初學微信小程式開發，如果有些問題不對，請指出，謝謝   我還是來說一下我的學習之路吧！！！   原始碼地址： 密碼：luh0   1.在開發小程式的時候，我們需要吧開發工具中的不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書這個給

ＪａｖａＳｃｒｉｐｔ做貪吃蛇小遊戲

<body>         <h1 >貪吃蛇</h1>         <h2 id="score">0</h2>