這篇是對上一篇《html5畫布寫的一個鍵盤遊戲（1）》博文進行總結，解決了上一次遺留下來的問題（不支持ie）：
上一次做的是爲了寫出效果，是根據步驟一步步進行的。沒有考慮那麼詳細，就鍵盤遊戲而言，字母消失和替換字母可以歸納在同一個問題上，就是用到splice()的替換方法：
array.splice(i,array[i].add());
然後清除畫布我們可以在定時器執行循環代碼之前清空一次就不存在捕捉座標的問題了:
time=setInterval(function(){
context.clearRect(0,0,600,600);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].show();
}
},1000);
效果上不存在字母與字母之間的清除掉或者清除一半的狀況。效果如圖：
下面貼出改進後的所有代碼：
<html>
<head>
<title>HTML5Game</title>
<script>
//窗體加載
window.onload=function(){
//alert("start()");
var game=new Game();
game.start();
}
//遊戲類
function Game(){
//alert("Game()");
var array=new Array();
var canvas=document.getElementById("myCanvas");
//alert("canvas-----------"+canvas);
var context=canvas.getContext("2d");
for(var i=0;i<10;i++){
//var charA=new CharA();
var charA=new CharA(context);
//charA.getChar();
array.push(charA);
//alert("array.length-----------"+array.length);
}
//var charA=new CharA();
//開始遊戲
this.start=function(){
time=setInterval(function(){
context.clearRect(0,0,600,600);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].show();
}
},1000);
}
//鍵盤方法
document.onkeydown=function(e){
//alert("鍵盤-------"+String.fromCharCode(e.which));
for(var i=0;i<array.length;i++){
if(String.fromCharCode(e.which)==array[i].getChar()){
//alert("array[i].getChar()----------------"+array[i].getChar()+"String.fromCharCod
(e.which)------"+String.fromCharCode(e.which));
//array[i].hidden();
array.splice(i,array[i].add());
}
}
}
}
//字母類
//function CharA(){
function CharA(context){
//alert("CharA()");
//var context;
var x;
var y;
var charArray=new Array("A","B","C","D","E","F","G","H","I","J","K","L");
var chara;
init();
//初始化
function init(){
y=100;
x=parseInt(Math.random()*600);
chara=charArray[parseInt(Math.random()*charArray.length)];
//alert("chara-----------------"+chara);
//alert("x-------------"+x);
//var canvas=document.getElementById("myCanvas");
//alert("canvas-----------"+canvas);
//context=canvas.getContext("2d");
//alert("context--------------"+context);
//context.fillText("A",x,y);
}
//增加字母
this.add=function(){
init()
}
//移動方法
this.move=function(){
y+=10;
//alert("y--------------"+y);
}
//返回字母的方法
this.getChar=function(){
//alert("返回------------"+chara);
return chara;
}
//顯示方法
this.show=function(){
//context.clearRect(0,0,600,600);
context.fillText(chara,x,y);
}
//字母消失
//this.hidden=function(){
//chara="";
//context.fillText("",0,0);
//}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid blue"></canvas>
</body>
</html>