html5画布写的一个键盘游戏（二） _HTML/CSS

html5画布写的一个键盘游戏（2）

这篇是对上一篇《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>