html5画布写的一个键盘游戏(1)

     今天简单用html5画布写了一个简单的键盘字母游戏。遇到的难点如下:

 

        1.键盘事件如果对了画布如何消失,解决方法:filltext()方法填充的字母为空,然后填充的坐标归0。

 

        2.如何再产生一个字母,发现在js的方法用这html5画布是行不通的。解决方法splice()方法移除字母并替换一个新的字母。

 

       3.清除画布的坐标捉的不够准确,效果能看的出来。

 

           

 

            下面贴出画布的代码,不足之处谢谢指出:

 

                   

<html>
	<head>
			<title>canvas画布</title>
	</head>
	<script>
			//字母类
		function CharA(){
			//alert("charA()");
			//声明一个下落坐标为0的变量
			var speet=0;
			//外面声明一个上下文
			var context="";
			//声明一个数组装住随机数
			var arrays=new Array("A","B","C","D","E","F","G");
			//声明一个空的变量装住字母
			var zimu="";
			//声明一个left变量装住随机产生的left值
			var left=0;
			//初始化一个画布方法
			function init(){
				//初始值为50的下落坐标
				speet=50;
				//声明一个left变量装住随机产生的left值
				 left=parseInt(Math.random()*1000);
				//获取画布
				var canvas=document.getElementById("mycanvas");
				//给画布上下文赋值
				context=canvas.getContext("2d");
				//给字母赋值
				zimu=arrays[parseInt(Math.random()*arrays.length)];
				//设置画布字体大小
				context.font="20pt serif";
				//填充一个zimu的值
				context.fillText(zimu, left, speet);
			}
			init();
			//移动方法
			this.move=function(){
				//清除画布
				context.clearRect(left,speet-20,20,20);
				//下落坐标加10
				speet+=10;
				//填充一个zimu的值
				context.fillText(zimu,left,speet);
			}
			//返回字母值的方法
			this.Text=function(){
				return zimu;
			}
			//隐藏zimu方法
			this.hide=function(){
				//让字母为空
				zimu="";
				context.clearRect(left,speet-20,20,20);
				//填充为0.即不显示
				context.fillText(zimu,0,0);
			}
			//增加一个字母方法
			this.add=function(){
				init();
			}
			
		}
		//窗体加载执行
		window.onload=function(){
			//实例化类
			var game=new Game();
			//调用方法
			game.start();
		}
		//游戏类
		function Game(){
			//声明一个数组用来装实例化的对象
			var Arrays=new Array();
			
			for(var i=0;i<10;i++){
				//实例化字母类
				var charA=new CharA();
				//数组装实例化的字母类
				Arrays.push(charA);
			}
			//开始方法
			this.start=function(){
				//调用定时器
				time=setInterval(function(){
					for(var i=0;i<Arrays.length;i++){
						//调用charA类的移动方法
						Arrays[i].move();
					}
				},1000);
			}
			//调用键盘的方法
			document.onkeydown=function(e){
				//alert(String.fromCharCode(e.which));
				for(var i=0;i<Arrays.length;i++){
					//如果键盘输入的值等于随机返回的字母值
					if(String.fromCharCode(e.which)==Arrays[i].Text()){
					//调用隐藏方法
					Arrays[i].hide();
					//去掉数组元素即替换一个新元素调用add()方法
					Arrays.splice(i,Arrays[i].add());
				}
				}
				
			}
			
		}
	</script>
	<body>
		<canvas id="mycanvas" width="1000" height="1000" style="border:1px solid blue"></cancas>
	</body>
</html>


 

 

 

 

展开阅读全文

没有更多推荐了,返回首页