最新公告
  • 欢迎您光临优源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 原生JS编写的2048小游戏代码

    原生JS编写的2048小游戏代码 最后编辑:2021-02-13
    增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复

    这是一款原生JS编写的2048小游戏代码,简单的2048网页小游戏,码农们可以学习开发方法也可以在线玩。

    js代码

    <script type="text/javascript">
    // 模块化开发思路
    var json={
    	// 创建初始化函数
    	init:function(){
    	var otab= document.querySelector('.tab'),
    		str='',
    		id=1;//返回文档指定的css元素,并保存
    		for(var i=0;i<4;i++){
    		   str+='<tr>';
    		   for(var j=0;j<4;j++){
    			str +='<td id="' + id++ +'"></td>';
    		   }
    		   str +='</tr>';
    		}
    		 otab.innerHTML=str;                       
    		 this.randomNum();
    		 this.randomNum();
    		 this.result();
    	},
    	
    	//创建一个任意区间的随机函数
    	myRandom:function(min , max){
    		return Math.round(Math.random() * (max-min) + min);
    	},
    	//随机在格子上生成一个数字
    	randomNum : function(){
    	  var num = this.myRandom(1,16);
    		ogrid=document.getElementById(num);
    		if(ogrid.innerHTML ==''){
    			ogrid.innerHTML= this.myRandom(1,2)*2;
    		}else{
    			this.randomNum();
    		}
    	},
    	
    	//上键
    	top:function(){
    		for(var i=1;i<=4;i++){
    			for(var j=i;j<=i+12;j+=4){
    				for(k=j;k>4;k-=4){
    				   this.change(document.getElementById(k -4),
    						  document.getElementById(k));
    				}
    			}
    		}
    	},
    	
    	//下键
    	 bottom:function(){
    		 for(var i=1;i<=4;i++){
    			for(var j = i+12;j>=i;j -=4){
    				for(var k = j;k < 13;k +=4){
    					 this.change(document.getElementById(k +4),
    						  document.getElementById(k));
    				}
    			}
    		 }
    	 },
    	 //左键
    	 left:function(){
    		for(var i=1;i<=13;i+=4){
    			for(var j=i; j<= i+3; j++){
    				for(var k=j; k>i;k--){
    					 this.change(document.getElementById(k -1),
    						  document.getElementById(k));
    				}
    			}
    		}
    	 },
    	 //右键
    	 right:function(){
    		for(var i=1;i<=13;i +=4){
    			for(var j = i+4; j>=i;j--){
    				for(var k=j;k<i+3;k++){
    					 this.change(document.getElementById(k +1),
    						  document.getElementById(k));
    				}
    			}
    		}
    	 },
    	//移动合并检测函数
    	change :function(before,after){
    		//移动
    		if(before.innerHTML == '' && after.innerHTML != ''){
    			before.innerHTML= after.innerHTML;
    			after.innerHTML='';
    		}
    		//合并
    		if(before.innerHTML != '' && before.innerHTML == 
    		after.innerHTML){
    			 before.innerHTML *=2;
    			 after.innerHTML='';
    		}
    		
    	},       
    	//改变颜色计算结果函数
    	result:function(){
    		var color={'':'#fff','2':'#0f0','4':'#00ccff','8':'#ff9900',
    		'16':'#00cc66','32':'#ffcccc','64':'#ff33ff','128':'#0066cc',
    		'256':'#6633cc','512':'#ff0099','1024':'#990033','2048':'#6600ff',
    		'4096':'#cc0066'},
    		score=0;
    		for(var i =  1 ; i <= 16 ;i++){
    			var ogrid=document.getElementById(i);
    			ogrid.style.backgroundColor=color[ogrid.innerHTML];
    			score += ogrid.innerHTML * 10;
    		}
    		 document.querySelector('.score').innerHTML=score;
    	}
    }
    window.onload=json.init();//加载完成后调用init
    document.onkeydown=function(e){
      if(/38/.test(e.keyCode) ) json.top();
      if(/40/.test(e.keyCode) ) json.bottom();
      if(/37/.test(e.keyCode) ) json.left();
      if(/39/.test(e.keyCode) ) json.right();
      if(/13/.test(e.keyCode) ) json.init();
      json.randomNum();
      json.result();
    }
    
    </script>
    

    猜你在找

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!lyebiz@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

    优源网 » 原生JS编写的2048小游戏代码

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    资源不能下载?
    如果遇到链接失效不能下载,请立即联系客服发货!
    • 2021-02-13Hi,初次和大家见面了,请多关照!

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 80027422@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者
    • 409会员总数(位)
    • 5162资源总数(个)
    • 68本周发布(个)
    • 0 今日发布(个)
    • 114稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情