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

最新推荐文章于 2022-08-31 10:26:47 发布

o流云oO

最新推荐文章于 2022-08-31 10:26:47 发布

阅读量2.4k

点赞数 6

分类专栏： html5 文章标签： html5 游戏 js

本文链接：https://blog.csdn.net/ooliuyunoo/article/details/11794517

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇是对上一篇《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.οnlοad=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.οnkeydοwn=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>