原生面向对象的简单金山打字游戏

傷城~ 2024-04-18 20:45 55阅读 0赞

### 金山打字小游戏 ###

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw_pic_center]

#### 1.介绍及效果图 ####

这是一个练习打字的游戏，当游戏开始后，界面从顶部不断落下内容为随机字母的方块，当按下相对应的按键时，就会清除对应方块

> ![在这里插入图片描述][20190911163223519.gif_text_aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw_pic_center]

#### 2.思路 ####

> 1、如何确定难度？  
> 2、方块如何生成？生成位置？如何移动？  
> 3、如何键盘检测？对应后如何移除？  
> 4、移除之后分数的累加？  
> 5、游戏失败？弹窗，结算分数？

#### 3.代码 ####

###### 1、body部分： ######

###### 2、css部分： ######

###### **3、js部分详解：** ######

****1. 初始标题框元素获取、选项卡索引获取以及实例的创建:****
    这里要获取选项卡的li以及其所在的盒子
    var ul = document.querySelectorAll('li'); //获取所有li，存放在ul这个集合中
    var changBox = document.getElementById('changeBox');

****2. 用for循环遍历li，并取得对应li的下标****
            for(var i=0;i<ul.length;i++){
    			ul[i].x = i;  //给每一个li定义一个自定义属性x，属性值为i；此时，属性x的值与其索引值是相等的
    			ul[i].onclick=function(){ //当点击li的时候
    				var index = this.x;   //新建一个变量，让他等于当前点击的li的属性x的值；
    				changeBox.style.display = 'none';  //选择之后，隐藏标题框
    				new game({ind:index});   //新建一个实例game，并且将当前li的索引值以对象方式进行传参
    			}			
    		}
    		！！！核心：给li定义属性，通过this指向当前被点击的li，并取到索引值

****3.实例game初始的设置****
            function game(p){  //用p来接受传进来的实参，也就是被点击的li的索引值
    			this.box = document.getElementById('box');
    			this.plane = document.querySelector('.plane');
    			this.block = document.querySelector('.block');
    			this.t; //定时器，后面在方块生成中会用到
    			this.text=0;  //记录分数
    			this.blockArr = [];//存放生成的方块
    			this.number=p.ind;// 拿到索引，确定难度
    			switch(this.number){
    				case 0:this.number = 500;break;
    				case 1:this.number = 300;break;
    				case 2:this.number = 100;break;
    			}  //这里的更新的this.number的值代表了后面定时器的事件，毫秒级
    			this.blockCreat() //调用生成方块的函数
    		}
    		这里没有用var来声明变量，而是用了this，是为了后面作用域会用到

****4.方块的生成，这里用到了定时器，每隔多少秒就会有一个方块生成，从上方落下****
            game.prototype.blockCreat = function(){	
    			that = this;  新建变量that=this，因为this跟着函数走，在定时器里有写了一个函数，防止拿不到外面的this
    			clearInterval(this.t)  //每次执行都要先清除定时器，不然会越来越快，速度会叠加
    			this.t = setInterval(function(){ //开启定时器
    				var count = random(0,that.box.offsetWidth-30);//方块初始水平位置，random为封装好的函数，根据传的参数，
    				                                              会取到 0 ~（盒子宽度-方块宽度），【封装的函数在后面】
    				var val;   //val是用来存随机生成的数字转换后的字母
    				that.oblock = document.createElement('div');   //创建方块(div)
    				that.oblock.className = 'block';  //设置方块的class名
    				that.oblock.style.left = count + 'px'; //方块左偏移量
    				that.box.appendChild(that.oblock);  //将生成的方块(div)追加到界面中
    				val = String.fromCharCode(random(65,90)); //ASCII码转换，这里由于不区分大小写，所以之选一种【65~90】
    				that.oblock.innerHTML = val;  //将随机生成的字母设置为方块的内容
    				that.blockArr.push(that.oblock);  //将生成的元素存入数组blockArr中去
    				that.keyDown() //按键检测函数
    				that.blockMove();//方块移动函数
    			},this.number);  //上面提到的，根据索引确定难度后设置的时间
    		}
    		这里关键的其实就是随机字母的生成以及转换，以及要想到讲方块元素存入数组，因为后面移除的时候要找到指定的这个元素

****5.键盘检测，根据按下的键，取到对应的值，判断和方块的内容是否一致，一致就移除****
            game.prototype.keyDown = function(){
    			that = this;   //同理
    			document.onkeydown=function(e){  //键盘函数
    				e = e || window.which   //这里是兼容处理
    				for(var i=0;i<that.blockArr.length;i++){ // 遍历数组，取到每一个创建的方块元素
    					if(String.fromCharCode(e.keyCode) == that.blockArr[i].innerHTML){  //判断,按下的值与数组中的某一位值相等，
    					                                                                   若相等，则：
    						that.blockArr[i].remove();   //移除对应元素
    						that.blockArr.splice(i,1);   //删除数组的对应位置,防止出现空值，不删除的话，下次按到同样的按键是，
    						                               就会找到空值，没有效果
    						that.text += 1;  //分数+1
    						break;   //找到后就结束循环,避免同时删除多个,只删除最下面的一个
    					}
    				}
    			}
    		}
    		这里主要的就是数组遍历来进行方块元素和数组的操作，还有就是循环的结束，不能让循环正常结束，除非是没有找到
    		对应的，不然就会删掉数组中所有满足条件的值，这样的话就感觉不太好玩了。所以要在找到第一个满足条件的时候，
    		删除对应元素，然后就要结束循环。
    		还有一个要注意的就是当删除了数组索引对应元素时，一定要删除数组中这个位置的值，不然会一直占据这个位置，而且
    		还是一个空值。
    		【可以自行尝试不写‘that.blockArr.splice(i,1)’写上后的区别，以及不加‘break’的区别】

6.方块的移动
            game.prototype.blockMove = function(){
    			var otop = this.box.offsetHeight-this.oblock.offsetHeight; //方块距离顶部的距离
    			move1(this.oblock,{top:otop},()=>{ //方块到底了,游戏结束,计算总分
    			                                    这里调用了封装好的move函数，有三个参数：
    			                                    第一个是元素
    			                                    第二个参数是要进行的动作(可以以对象形式传参)
    			                                    第三个参数是一个函数，是动作完成之后要做的事
    				alert('总分'+this.text+'分'); //弹出弹窗，显示分数
    				window.history.go(0) //结束后刷新界面
    			});
    		}

###### 4、封装的函数 ######

****move函数，控制元素的移动以及一些属性变化****
    //获取非行内样式
        function getStyle(obj,attr){    //获取非行内样式，obj为对象，attr是值
    		if(obj.currentStyle){          //针对IE浏览器获取非行内样式，因为有兼容
    			return obj.currentStyle[attr];   
    		}else{
    			return getComputedStyle(obj,false)[attr];    //针对非IE浏览器的非行内样式获取
    		};
    	};
    
    
    ****//move函数(多元素多属性的链式缓冲)，会接受三个参数****
    	function move1(ele,json,callback){
    	       clearInterval(ele.t);
    	       ele.t = setInterval(() => {  //在计时器每次开启后，for-in每次遍历前，创建状态，用来记录是否有属性没到终点
    	           var onoff = true;
    	           for(var i in json){
    	               var iNow = parseInt(getStyle(ele,i));
    	               var speed = 2;
    	               speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
    	               //如果有一个属性到目标，不一定清除计时器
    	               //如果有一个属性没有到目标，一定不清楚计时器
    	               //如果没有属性没到目标，一定要清楚定时器
    	               //状态，记录，所有属性有没有到目标
    	               //只要有属性没到终点，改变状态
    	               if(iNow != json[i]){
    	                   onoff = false;
    	               }
    	               ele.style[i] = iNow + speed + "px";
    	           }
    				//for-in结束后(每个属性都遍历一次后)，如果状态没有被改变，意味着没有属性到终点，可以结束了
    	           if(onoff){
    	               clearInterval(ele.t);
    	               callback && callback();
    	           }
    	       }, 30);
    	   }
    
    
    ****随机数****
           function random(max,min){  //就收参数，两个数值
    	   	   return Math.round(Math.random()*(max-min)+min)  //利用了Math.random()函数，然后取整
    	   }

**【这里封装好的move、获取非行内样式以及随机数的函数，有需要的朋友可以拿去使用，本次案例到此结束，欢迎交流。网页文件会上传到资源，有需要的可以自行下载！】**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/675b0585b71b4bdc944d3ebdf87ce9f5.png
[20190911163223519.gif_text_aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9e4a57ca6a5a418a98eb1a87e20f147a.gif