【整理】HTML5游戏开发学习笔记（5）- 猜谜游戏

距上次学习笔记已有一个多月过去了，期间由于新项目赶进度，以致该学习计划给打断，十分惭愧。
书本中的第六章的例子相对比较简单。所以很快就完成。

1.预备知识
html5中video标签的熟悉

2.实现思路
对20组G20成员进行国家名和其首都的匹配的游戏。通过2组div来显示，监听其点击事件click,通过元素的id保存国家和首都的索引，通过前后2次的点击来判断其2次点击的索引是否相等，相等则匹配成功，不相等则继续。
全部匹配成功后则自动播放视频。

3.主要代码

			var membersForG20 = [{id:1,countryName:'China',capitalName:'Beijing',used:false},
													 {id:2,countryName:'India',capitalName:'New Delhi',used:false},
													 {id:3,countryName:'European Union',capitalName:'Brussels',used:false},
													 {id:4,countryName:'United States',capitalName:'Washington, DC',used:false},
													 {id:5,countryName:'Indonesia',capitalName:'Jakarta',used:false},
													 {id:6,countryName:'Brazil',capitalName:'Brasilia',used:false}]

			var countryDiv = document.getElementById('countryDiv')
			var capitalDiv = document.getElementById('capitalDiv')
			var video1 = document.getElementById('video1')

			/*
				http://www.w3school.com.cn/tags/av_met_canplaytype.asp
				canPlayType() 方法浏览器是否能播放指定的音频/视频类型。
				canPlayType() 方法可返回下列值之一：
			    "probably" - 浏览器最可能支持该音频/视频类型
			    "maybe" - 浏览器也许支持该音频/视频类型
			    "" - （空字符串）浏览器不支持该音频/视频类型
				
				实际情况是在Chrome下sfire3.mp4视频无法播放，火狐下提升文件已损坏。
			*/
			console.log(video1.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2'))//返回probably

			var randomLength = 4
			var matches = 0
			var countrySelected = false
			var selectedCountryIndex
			var selectedCanpitalIndex

			function onSelected(element){
				var id = element.id
				var index 
				var type

				id.replace(/(country|canpital)(d+)/g,function ($0,$1,$2){
					type = $1
					index = $2
				})

				console.log(type+','+index)
				
				if(type == 'country'  && countrySelected==false){
					countrySelected = true
					selectedCountryIndex = index					
				}
				else if(type == 'canpital' && countrySelected==true){
					selectedCanpitalIndex =  index
					
					if(selectedCountryIndex == selectedCanpitalIndex){
						countrySelected = false
						selectedCountryIndex = -1
						selectedCanpitalIndex = -1

						//matched success
						document.getElementById('country'+index).style.backgroundColor = 'green'
						document.getElementById('canpital'+index).style.backgroundColor = 'green'	

						matches++

						if(matches==randomLength){
							video1.play()
						}
					}
					else{
						//matched error
						document.getElementById('country'+index).style.backgroundColor = 'red'
						document.getElementById('canpital'+index).style.backgroundColor = 'red'	

						countrySelected = false
						selectedCountryIndex = -1
						selectedCanpitalIndex = -1
					}
				}
				else{
				 	//reset Selected 
					countrySelected = false
					selectedCountryIndex = -1
					selectedCanpitalIndex = -1	
				}				
			}


			window.onload = function(){				
				var i
				var index
				var member				
				var memberLength = membersForG20.length				
				var countryElements = []
				var canpitalElements = []

				for(i=0;i<randomLength;i++){
					do{
						index = Math.floor(Math.random()*memberLength)
						member = membersForG20[index]
					}
					while(member.used == true)

					member.used = true

					countryElements.splice(Math.floor(Math.random()*i),0,'<div id='+'"country'+index+'" class="country" onclick="onSelected(this)">'+member.countryName+'</div>')
					canpitalElements.splice(Math.floor(Math.random()*i),0,'<div id='+'"canpital'+index+'" class="canpital" onclick="onSelected(this)">'+member.capitalName+'</div>')
				}

				countryDiv.innerHTML = countryElements.join('')
				capitalDiv.innerHTML = canpitalElements.join('')
			}

4.和书中实现的效果有些差别