原本要繼續研究塔防遊戲，但發現尋路演算法搞不定，其實演算法壓根看不懂，看的頭暈，炮塔自動追蹤移動物體也搞不定，塔防專案得延遲了。所以，就搞了另外一個遊戲，鍵盤打字母遊戲，老樣子，因為初學javascript，程式碼比較亂，見諒。

遊戲難點：

1.字母初始化

2.一個字母消失後，自動補充一個

3.字母運動

想必大家也看出來了，遊戲比較簡單，直接開始js部分。

字母類

//字母類
				function Word(){
					this.x=[];
					this.y=[];
					this.aLive=[];
					this.spd=[];
					this.larr=[];//繪製所需陣列
					this.color=[];
					this.xColor;//選擇顏色
					this.letters=[];//字母集合陣列
				}
				Word.prototype.sum=5;//螢幕中最多有50個字母
				Word.prototype.init=function(){
					this.letters=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
					this.color=['yellow','red','blue','green'];
					for(var i=0;i<this.sum;i++){
						this.aLive[i]=true;
						this.x[i]=600;
						this.y[i]=Math.floor(Math.random()*400)+100;
						if(this.y[i]>600){
							this.y[i]=0;
						}
						if(i>=1){
							if(this.y[i]-this.y[i-1]<30){
								this.y[i]=this.y[i-1]+41;
							}
						}
						var arrL=this.letters[Math.floor(Math.random()*48)];//隨機排序
						this.larr.push(arrL);
						this.spd[i]=Math.random()*0.017+0.003;//速度區間在[0.01-0.015)
					}
				}
				Word.prototype.draw=function(){
					for(var i=0;i<this.sum;i++){
						if(this.aLive[i]){
							this.x[i]-=this.spd[i]*5*deltaTime;
							ctx.save();
							//設定字型樣式
						    ctx.font = "50px Courier New";
						    //設定字型填充顏色
						    ctx.fillStyle =''+this.color[this.xColor]+'';
						    //從座標點(50,50)開始繪製文字
						    ctx.fillText(this.larr[i], this.x[i], this.y[i]);
							ctx.restore();
							if(this.x[i]<=0){//邊界消失
								this.born(i);
							}
						}	
					}	
				}
				//自動生成一個字母
				Word.prototype.born=function(i){
					this.aLive[i]=false;//字母消失
					this.x[i]=600;
					this.y[i]=Math.floor(Math.random()*400)+100;
					if(this.y[i]>600){
						this.y[i]=0;
					}
					this.larr.splice(i,1,this.letters[Math.floor(Math.random()*48)]);//刪除陣列對應字母，並在原位置插入，確保順序
					this.aLive[i]=true;//字母重新生成
				}
 

上面類屬性基本上都是採用陣列方式，為什麼呢？因為字母有多個，多個物體運動必須有多個物體座標，速度等，字母觸碰邊界消失，按鍵觸發消失，以上程式碼有詳細註釋，不多說了。

接下來就是遊戲必不可少的滑鼠事件，按鍵事件

//按鍵事件
				keysDown={};//儲存按鍵事件
				window.addEventListener('keydown',function(e){
					keysDown[e.keyCode]=true;
					e=event||window.event;
					for(var i=0;i<sum;i++){
						if(String.fromCharCode(e.keyCode)==word.larr[i].toLocaleUpperCase()){//將字母全部轉換為大寫字母在比較
							word.born(i);//刪除陣列對應字母
						}	
					}
				},false);

				window.addEventListener('keyup',function(e){
					delete keysDown[e.keyCode];
				},false);
				//滑鼠事件
				window.addEventListener('mousemove',function(e){
					if(e.offSetX||e.layerX){//相容性寫法
						//三元運算子
						mx=e.offSetX==undefined?e.layerX:e.offSetX;
						my=e.offSetY==undefined?e.layerY:e.layerY;
					}
					ctx.save();
					ctx.font = "12px Courier New";
					ctx.fillStyle =''+fcolor+'';
					if(mx>708&&mx<730&&my>120&&my<130){
						canvas.style.cursor='pointer';
						ctx.fillText('黃色',708,130);
					}
					else if(mx>748&&mx<770&&my>120&&my<130){
						canvas.style.cursor='pointer';
						ctx.fillText('紅色',748,130);
					}
					else if(mx>708&&mx<730&&my>160&&my<170){
						canvas.style.cursor='pointer';
						ctx.fillText('藍色',708,170);
					}
					else if(mx>748&&mx<770&&my>160&&my<170){
						canvas.style.cursor='pointer';
						ctx.fillText('綠色',748,170);
					}
					else{
						canvas.style.cursor='default';
						ctx.beginPath();
						//設定字型樣式
					    ctx.font = "12px Courier New";
					    //設定字型填充顏色
					    ctx.fillStyle ='blue';
					    //從座標點(50,50)開始繪製文字
					    ctx.fillText('請選擇字母顏色',708,100);
					    ctx.fillText('黃色',708,130);
					    ctx.fillText('紅色',748,130);
					    ctx.fillText('藍色',708,170);
					    ctx.fillText('綠色',748,170);
						ctx.closePath();
					}
					ctx.restore();
				},false);
				//滑鼠點選
				window.addEventListener('click',function(e){
					if(e.offSetX||e.layerX){//相容性寫法
						//三元運算子
						mx=e.offSetX==undefined?e.layerX:e.offSetX;
						my=e.offSetY==undefined?e.layerY:e.layerY;
					}
					if(mx>708&&mx<730&&my>120&&my<130){
						xColor=0;
					}
					else if(mx>748&&mx<770&&my>120&&my<130){
						xColor=1;
					}
					else if(mx>708&&mx<730&&my>160&&my<170){
						xColor=2;
					}
					else if(mx>748&&mx<770&&my>160&&my<170){
						xColor=3;
					}
				},false);
 

採用addEventListener事件繫結，這樣做好處就是響應更加緊湊，而且可以實現（玩家）斜著運動，這裡用來繫結滑鼠移動，滑鼠點選，鍵盤事件。滑鼠移動事件主要是為了字母顏色選擇時候，字型變色（類似滑鼠經過效果），滑鼠點選事件就是增加響應顏色屬性，改變字母顏色。鍵盤事件主要用到String.fromCharCode(e.keyCode)返回按鍵字串，當然是大寫的，所以判斷時候，要將畫布上字母進行大寫轉換word.larr[i].toLocaleUpperCase()，否則小寫字母，不會消失。

字母繪製，文字繪製

//設定字型樣式
			    ctx.font = "12px Courier New";
			    //設定字型填充顏色
			    ctx.fillStyle ='blue';
			    //從座標點(50,50)開始繪製文字
			    ctx.fillText('請選擇字母顏色',708,100);
 

第一個是字型大小，字型填充顏色（也可以是描邊stroke），填充文字fillText。

接下來的不過就是不斷迴圈重新整理畫布，讓字母運動，這裡不再多說，感覺我也說不清楚。大家有興趣可以去 慕課網 找 愛心魚遊戲視訊教程看看，裡面有專門講解。

完整程式碼