• 如何用H5实现好玩的2048小游戏

    Hello，我是岚尹~一个热爱技术的项目经理。不定期更新项目管理、前端以及运维相关方面的经验分享~ 如果你对我的文章感兴趣，就请动动你的小手帮赞一下哦。欢迎关注长期交流~

    一、游戏介绍

    相信大多数读者都玩过一款小游戏 2048，这款数字小游戏在几年前很是流行。2048是2014年由Gabriele Cirulli利用周末的时间写出的，果然大佬就是大佬，一个周末就写出了这么经典的游戏。游戏的玩法非常简单，利用上、下、左、右移动的方式拼出2048即算赢得游戏，因为游戏上手简单同时赢得游戏又存在一定难度，所以游戏的可玩性很高，本人当时也是十分喜爱这款游戏，下面讲解下如何用H5去实现这款游戏。

    二、游戏界面

    游戏界面十分简单，我截图了进行中的几个场景，基本由一块矩形游戏区，一个按钮及一个分数展示区域组成。

    三、代码设计

    H5代码：

    H5代码十分简单，主要用16个div代表16个数字方块，再加上另外restart按钮区，还有一个分值展示区域。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    6.     <title>2048</title>
    7.      <link type="text/css" rel="stylesheet" href="css/style.css">
    8.     <script type="text/javascript" language="javascript" src="js/jquery-3.6.0.min.js">
    9.     	
    10.    		document.addEventListener('plusready', function(){
    11.    			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"	
    12.    		});
    13.    		
    14.     </script>
    15.     
    16.     <script type="text/javascript" language="javascript" src="js/gamerun.js"></script>
    17. </head>
    18. 	<body onload="init()">
    19. 	<div class="authorized" >
    20. 	<p>2048</p></div>
    21. 	<div class="restart" ontouchstart="restart()">Restart </div>
    22. 	<div class="score">
    23. 	<p class="maxnum" id="num_p">最高值</p>
    24. 	<p class="maxnum" id="num_v">0</p>
    25. 	</div>
    26.    <article class="game"> 
    27.      <div class="square"  id="f1"> </div>
    28.      <div class="square"  id="f2"> </div>
    29.      <div class="square"  id="f3"> </div>
    30.      <div class="square"  id="f4"> </div>
    31.      <div class="square"  id="f5"> </div>
    32.      <div class="square"  id="f6"> </div>
    33.      <div class="square"  id="f7"> </div>
    34.      <div class="square"  id="f8"> </div>
    35.      <div class="square"  id="f9"> </div>
    36.      <div class="square"  id="f10"></div>
    37.      <div class="square"  id="f11"> </div>
    38.      <div class="square"  id="f12"></div>
    39.      <div class="square"  id="f13"> </div>
    40.      <div class="square"  id="f14"></div>
    41.      <div class="square"  id="f15"> </div>
    42.      <div class="square"  id="f16"> </div>  
    43.   </article>
    44.    <audio id="yin" src="media/anniu.mp3"autoplay="autoplay"> </audio>
    45.   <footer></footer>
    46. </body>
    47. </html>

    js代码：

    js代码相对复杂一些，游戏处理逻辑主要可以分成以下两块：

    （1）移动处理逻辑，游戏玩法是通过上下左右移动进行数字的相加变换。那么首先就会有上滑、下滑、左滑、右滑四个处理函数。上下滑动的时候，将相邻两行相同的数值进行相加；左右滑动的时候，将相邻两列相同的数值进行相加。

    （2）移动判断逻辑。

            首先第一类判断逻辑是判断是否可以移动。整个游戏区是 4X4的格局分布，那么在上下左右移动的时候我们会通过相邻的两行或者两列是否存在相同的数值去判断，如果有则可以继续移动，如果没有，则不可以继续移动。

           其次，我们需要判断游戏是否可以继续，如果整个游戏区的数值方块已经被占满，上下左右都没有移动空间了，那么游戏就是结束了，game over。

    （3）其余逻辑

    其余的还剩一些比较简单的逻辑，颜色分配函数、重新开始函数、最大分值记录函数等。

    1. // JavaScript Document
    2. var flag=[false,false,false,false,false,false,false,false,
    3.      false,false,false,false,false,false,false,false];
    4. var ds=document.getElementsByClassName("square");
    5. var color=["#FF9966","#FFCCCC","#CC9966","#99CCCC","#99CC99","#99CCFF","#CCCCFF","#FFCC00","#333399","#CC9999","#009999","#996666","#CCCCCC","#CCCCFF","#99CC99"];
    6. var max_num=parseInt("2");
    7. var lose_view=false;
    8.  
    9.   function init()  //初始化界面，生成2个数字方块
    10.  {
    11. 	 var i=Math.round(Math.random()*16);
    12. 	 var j=Math.round(Math.random()*16);
    13.    while(i==j)
    14. 	 { j=Math.round(Math.random()*16);
    15. 	 }
    16.    ds[i].style.backgroundColor="#FF7578";
    17.    ds[j].style.backgroundColor="#FF7578"; 
    18.    ds[i].innerHTML="2";
    19.    ds[j].innerHTML="2";
    20.   flag[i]=true;
    21.   flag[j]=true;
    22.   document.body.addEventListener('load',load(event),false);
    23.   //var msg=parseInt(document.getElementsByClassName("authorized")[0].innerText);
    24.   //alert(msg);
    25.   }
    26.   
    27. function max_score()   //记录取得的最大分数
    28. {
    29. 	for (var i=0;i<ds.length;i++){
    30. 		var c_num = parseInt(ds[i].innerText);
    31. 		if( c_num > max_num ) 
    32. 		{
    33. 			max_num=c_num;
    34. 		}	
    35. 	}
    36.    document.getElementById("num_v").innerHTML= max_num;
    37. }
    38.  function restart()  //重新开始游戏，重新回到初始化页面
    39.  {
    40. 	 if(lose_view==true)
    41. 	 {  
    42. 		 var $h2=document.getElementById("reset1");
    43. 		// var $bu2=document.getElementById("reset2");
    44. 		 var $par2=$("body");	
    45. 		  $par2[0].removeChild($h2);
    46. 		 // $par2[0].removeChild($bu2);
    47. 		lose_view=false; 
    48. 		
    49. 	 }
    50.  	 for (var i=0;i<ds.length;i++)
    51.  	 {
    52.  		 ds[i].innerHTML="";
    53.  		 flag[i]=false;
    54.  		ds[i].removeAttribute("style");
    55.  	 }
    56.  	 init();
    57.  } 
    58.  
    59.  
    60.  
    61.  function voice()   //设置移动时产生的音效
    62. {
    63. var vs=document.getElementById("yin");
    64. vs.play();
    65. }
    66.  
    67.  
    68.  
    69. function load(event)   // 捕捉屏幕滑动事件
    70. {
    71. $("body").on("touchstart", function(e) {
    72.     e.preventDefault();
    73.     startX = e.originalEvent.changedTouches[0].pageX,
    74.     startY = e.originalEvent.changedTouches[0].pageY;
    75. });
    76. $("body").on("touchend", function(e) 
    77. {
    78.     e.preventDefault();
    79.     moveEndX = e.originalEvent.changedTouches[0].pageX,
    80.     moveEndY = e.originalEvent.changedTouches[0].pageY,
    81.     X = Math.floor(moveEndX - startX),
    82.     Y = Math.floor(moveEndY - startY);
    83.  
    84.     if ( Math.abs(X)> Math.abs(Y)) 
    85.     {
    86.     	if (Math.abs(X)>20)
    87.     	{
    88.     		if( X > 0)
    89.     		{
    90.     		rightgo();
    91.     		voice();
    92.     		}
    93.     		else
    94.     		{
    95.     		leftgo();
    96.     		voice();
    97.     		}
    98.     	}
    99. 	 }
    100.     else if(Math.abs(X)< Math.abs(Y))
    101.     {
    102.     	if (Math.abs(Y)>20)
    103.     	{
    104.     		if(Y > 0)
    105.     		{
    106.     		 bottomgo();
    107.     		 voice();
    108.     		}
    109.     		
    110.     		else
    111.     		{
    112.     		topgo();
    113.     		voice();
    114.     		}
    115.     	}
    116.     }
    117. }
    118. );
    119. }
    120.  
    121.  
    122.  
    123. function addcolor()            //设置方块颜色
    124.  { for(var i=0;i<ds.length;i++)
    125.  {
    126. 	 var ss=parseInt(ds[i].innerHTML);
    127. 	 
    128. 	 switch(ss)
    129. 	{
    130. 	case 2:
    131. 	ds[i].style.backgroundColor=color[0];
    132. 	break;
    133. 	case 4:
    134. 	ds[i].style.backgroundColor=color[1];
    135. 	break;
    136. 	case 8:
    137. 	ds[i].style.backgroundColor=color[2];
    138. 	break;
    139. 	case 16:
    140. 	ds[i].style.backgroundColor=color[3];
    141. 	break;
    142. 	case 32:
    143. 	ds[i].style.backgroundColor=color[4];
    144. 	break;
    145. 	case 64:
    146. 	ds[i].style.backgroundColor=color[5];
    147. 	break;
    148. 	case 128:
    149. 	ds[i].style.backgroundColor=color[6];
    150. 	break;
    151. 	case 256:
    152. 	ds[i].style.backgroundColor=color[7];
    153. 	break;	
    154. 	case 512:
    155. 	ds[i].style.backgroundColor=color[8];
    156. 	break; 
    157. 	case 1024:
    158. 	ds[i].style.backgroundColor=color[9];
    159. 	break;
    160. 	case 2048:
    161. 	ds[i].style.backgroundColor=color[10];
    162. 	break;
    163. 	case 4096:
    164. 	ds[i].style.backgroundColor=color[11];
    165. 	break;
    166. 	case 8192:
    167. 	ds[i].style.backgroundColor=color[12];
    168. 	break;
    169. 	case 16384:
    170. 	ds[i].style.backgroundColor=color[13];
    171. 	break;
    172. 	default:
    173. 	break;
    174. 		 }
    175.  }
    176. 	 }
    177.  
    178. function istop()
    179. {  					//判断是否可以继续上移，true则表示可以
    180. 	var istop=false;
    181.  
    182. 	for(var i1=4;i1<16;i1++) 
    183. 	{
    184. 		
    185.      if(flag[i1]==true)
    186. 	 {  
    187. 	
    188. 		 if(flag[i1-4]==true)
    189.      	 {
    190. 		  if( ds[i1].innerHTML==ds[i1-4].innerHTML )
    191. 		 	{
    192. 			  istop=true;
    193. 		 	}
    194. 		    
    195.       		}
    196. 	    else
    197. 		  {
    198. 			istop=true;
    199. 		 }
    200. 		 } 	 
    201. 		}
    202.  
    203. 	return istop;
    204. }
    205.  
    206. function isbottom()  //判断是否可以继续下移，true则表示可以
    207. {
    208. 	var isbottom=false;
    209. 	
    210. 	for(var i2=11;i2>=0;i2--)
    211. 	
    212. 	{
    213.      if(flag[i2]==true)
    214. 	 {
    215. 		 if(flag[i2+4]==true)
    216.       {
    217. 		  if( ds[i2].innerHTML==ds[i2+4].innerHTML )
    218. 		  
    219. 		 {
    220. 			  isbottom=true;
    221. 		 }
    222. 		  }
    223. 		  
    224. 		  else
    225. 		  
    226. 		  {
    227. 			isbottom=true;
    228. 		 }
    229. 		 } 	 
    230. 		}
    231. 	
    232. 	return isbottom;
    233. }
    234.  
    235. function isleft(){  //判断是否可以继续左移，true则表示可以
    236. 	var isleft=false;
    237.  
    238. 	for(var i3=0;i3<4;i3++)
    239. 	{
    240. 		for(var j3=0;j3<3;j3++)
    241. 	{
    242. 		 if(flag[j3+4*i3+1]==true)
    243. 	 {
    244. 		 if(flag[j3+4*i3]==true)
    245.          {
    246. 	 if( ds[j3+4*i3].innerHTML==ds[j3+4*i3+1].innerHTML )
    247. 		 {
    248. 		  isleft=true;
    249. 		 }
    250. 		  }
    251. 		  else
    252. 		  {
    253. 			isleft=true;
    254. 			
    255. 		 }
    256. 		    }	 
    257. 	}
    258.   }
    259.  
    260.  return isleft;
    261. }
    262.  
    263. function isright(){     //判断是否可以继续右移，true则表示可以
    264. 	var isright=false;
    265. 	
    266. 	for(var i4=3;i4>=0;i4--)
    267. 	{
    268. 		for(var j4=2;j4>=0;j4--)
    269. 	{
    270. 		 if(flag[j4+4*i4]==true)
    271. 	 {
    272. 		 if(flag[j4+4*i4+1]==true)
    273.       {
    274. 		   if( ds[j4+4*i4].innerHTML==ds[j4+4*i4+1].innerHTML )
    275. 		   {
    276. 		  isright=true;
    277. 		   }
    278. 		  }
    279. 		  else
    280. 		  {
    281. 			isright=true;
    282. 			  }
    283. 		 }	 
    284. 			}
    285. 	}
    286. 	
    287. 	return isright;
    288. }
    289.  
    290. function islose()
    291. {                //判断是否输掉游戏
    292.    if (lose_view==false) {
    293. 	 var los=0;
    294. 	 for(var i5=0;i5<16;i5++)
    295. 	 { if(flag[i5]==true)
    296. 	   {
    297. 		   los++;
    298. 		   }
    299. 		 }
    300. 		 if(los==16)
    301. 		 {
    302. 			 var left=isleft();
    303.              var right=isright();
    304. 			 var top=istop();
    305. 			 var bottom=isbottom();
    306. 			 
    307. 			 if((left||right||top||bottom)==false)
    308. 			 {	
    309. 				max_score();	
    310. 				var $h1=$('<div>');
    311. 				//var $bu1=$('<button>');
    312. 				var $par=$("body");
    313. 				$h1.attr("id","reset1");
    314. 				$h1.text('Game Over !');
    315. 				//$bu1.text('重新开始');
    316. 				//$bu1.attr("id","reset2");		
    317. 				$par.append($h1);
    318. 				//$par.append($bu1);
    319. 				
    320. 			var sleep = function(time) {
    321. 			    var startTime = new Date().getTime() + parseInt(time, 10);
    322. 			    while(new Date().getTime() < startTime) {}
    323. 			};
    324. 			lose_view=true;
    325. 		
    326. 			 //跳出失败提醒界面				
    327. 			//$bu1.click(restart());
    328. 			
    329. 			//$("body").on("touchend",restart());			
    330. 			//$("body").on("touchstart",function (){
    331. 			//	  $par[0].removeChild($h1[0]);
    332. 			// $par[0].removeChild($bu1[0]);
    333. 			// restart();
    334. 			//  });
    335. 			
    336. 			 }
    337.   		}
    338. 	}
    339. }
    340.  
    341.  
    342. function topgo(){   
    343.              //上移
    344. 	var top1=istop(); 
    345.  
    346. 	for(var ss6=0;ss6<3;ss6++)
    347. 	{
    348. 	for(var i6=4;i6<16;i6++)
    349. 	{
    350.      if(flag[i6]==true)
    351. 	 {
    352. 		 if(flag[i6-4]==true)
    353.       {
    354. 		  if( ds[i6].innerHTML==ds[i6-4].innerHTML )
    355. 		{  var sum=parseInt(ds[i6].innerHTML)*2;
    356. 		  ds[i6-4].innerHTML=sum;
    357. 		  flag[i6]=false;
    358. 		  ds[i6].removeAttribute("style");
    359. 		  ds[i6].innerHTML="";
    360. 		}
    361. 		  }
    362. 		  else
    363. 		  {
    364. 			ds[i6-4].innerHTML=ds[i6].innerHTML;
    365. 			 ds[i6-4].style.backgroundColor="#FF9E3E";
    366. 			flag[i6-4]=true;
    367. 			 
    368. 			ds[i6].innerHTML="";
    369. 			ds[i6].removeAttribute("style");
    370. 			flag[i6]=false;		
    371. 		 }
    372. 		 } 	 
    373. 		}
    374. 		}
    375.        
    376. 		if(top1==true) 
    377. 		{
    378. 		var kk1=Math.round(Math.random()*15);
    379. 		while(flag[kk1]==true)
    380. 		{
    381. 			var kk1=Math.round(Math.random()*15);
    382. 			}
    383.          ds[kk1].innerHTML="2";
    384. 		 flag[kk1]=true;
    385. 	    addcolor();
    386. 	  
    387. 		}
    388. 		else
    389. 		{
    390. 			islose();
    391. 			}
    392. 	}
    393.  
    394. function leftgo(){                      //左移
    395. 	var left1=isleft();
    396. 	for(var ss7=0;ss7<3;ss7++)
    397. 	{
    398. 	for(var i7=0;i7<4;i7++)
    399. 	{
    400. 		for(var j7=0;j7<3;j7++)
    401. 	{
    402. 		 if(flag[j7+4*i7+1]==true)
    403. 	 {
    404. 		 if(flag[j7+4*i7]==true)
    405.       {
    406. 		  if( ds[j7+4*i7].innerHTML==ds[j7+4*i7+1].innerHTML )
    407. 		{  var sum=parseInt(ds[j7+4*i7+1].innerHTML)*2;
    408. 		  ds[j7+4*i7].innerHTML=sum;
    409. 		  flag[j7+4*i7+1]=false;
    410. 		  ds[j7+4*i7+1].removeAttribute("style");
    411. 		  ds[j7+4*i7+1].innerHTML="";
    412. 		}
    413. 		  }
    414. 		  else
    415. 		  {
    416. 			ds[j7+4*i7].innerHTML=ds[j7+4*i7+1].innerHTML;
    417. 			 ds[j7+4*i7].style.backgroundColor="#FF9E3E";
    418. 			flag[j7+4*i7]=true;
    419. 			 
    420. 			ds[j7+4*i7+1].innerHTML="";
    421. 			ds[j7+4*i7+1].removeAttribute("style");
    422. 			flag[j7+4*i7+1]=false;
    423. 			
    424. 			  }
    425. 		 }	 
    426. 			}
    427. 	}
    428. 	}
    429. 	
    430. 	if(left1==true){
    431. 	var kk2=Math.round(Math.random()*15);
    432. 		while(flag[kk2]==true)
    433. 		{
    434. 			var kk2=Math.round(Math.random()*15);
    435. 			}
    436. 		 ds[kk2].style.backgroundColor="#FF9E3E";
    437.          ds[kk2].innerHTML="2";
    438. 		 flag[kk2]=true;
    439. 	addcolor();
    440. }
    441.    else
    442.    {
    443. 	   islose();
    444. 	   }
    445. }
    446.  
    447. function rightgo(){                //右移
    448. 	var right1=isright();
    449. 	for(var ss8=0;ss8<3;ss8++)
    450. 	{
    451. 	for(var i8=3;i8>=0;i8--)
    452. 	{
    453. 		for(var j8=2;j8>=0;j8--)
    454. 	{
    455. 		 if(flag[j8+4*i8]==true)
    456. 	 {
    457. 		 if(flag[j8+4*i8+1]==true)
    458.       {
    459. 		  if( ds[j8+4*i8].innerHTML==ds[j8+4*i8+1].innerHTML )
    460. 		{  var sum=parseInt(ds[j8+4*i8+1].innerHTML)*2;
    461. 		  ds[j8+4*i8+1].innerHTML=sum;
    462. 		  flag[j8+4*i8]=false;
    463. 		  ds[j8+4*i8].removeAttribute("style");
    464. 		  ds[j8+4*i8].innerHTML="";
    465. 		}
    466. 		  }
    467. 		  else
    468. 		  {
    469. 			ds[j8+4*i8+1].innerHTML=ds[j8+4*i8].innerHTML;
    470. 			 ds[j8+4*i8+1].style.backgroundColor="#FF9E3E";
    471. 			flag[j8+4*i8+1]=true;
    472. 			 
    473. 			ds[j8+4*i8].innerHTML="";
    474. 			ds[j8+4*i8].removeAttribute("style");
    475. 			flag[j8+4*i8]=false;
    476. 			
    477. 			  }
    478. 		 }	 
    479. 			}
    480. 	}}
    481. 	
    482. 	if(right1==true){
    483. 	var kk3=Math.round(Math.random()*15);
    484. 		while(flag[kk3]==true)
    485. 		{
    486. 			var kk3=Math.round(Math.random()*15);
    487. 			}
    488. 		 ds[kk3].style.backgroundColor="#FF9E3E";
    489.          ds[kk3].innerHTML="2";
    490. 		 flag[kk3]=true;
    491. 	addcolor();
    492. 	}
    493. 	else
    494. 	{
    495. 		islose();
    496. 		}
    497. 		
    498. 	//	var ss=max_score();
    499. 		//alert(ss);
    500. }
    501.  
    502. function bottomgo(){                 		//下移
    503. 	var bottom1=isbottom();
    504. 	for(var ss9=0;ss9<3;ss9++)
    505. 	{
    506. 	for(var i9=11;i9>=0;i9--)
    507. 	{
    508.      if(flag[i9]==true)
    509. 	 {
    510. 		 if(flag[i9+4]==true)
    511.       {
    512. 		  if( ds[i9].innerHTML==ds[i9+4].innerHTML )
    513. 		{  var sum=parseInt(ds[i9].innerHTML)*2;
    514. 		  ds[i9+4].innerHTML=sum;
    515. 		  flag[i9]=false;
    516. 		  ds[i9].removeAttribute("style");
    517. 		  ds[i9].innerHTML="";
    518. 		}
    519. 		  }
    520. 		  else
    521. 		  {
    522. 			ds[i9+4].innerHTML=ds[i9].innerHTML;
    523. 			 ds[i9+4].style.backgroundColor="#FF9E3E";
    524. 			flag[i9+4]=true;
    525. 			 
    526. 			ds[i9].innerHTML="";
    527. 			ds[i9].removeAttribute("style");
    528. 			flag[i9]=false;
    529. 			
    530. 		 }
    531. 		 } 	 
    532. 		}
    533. 	}
    534. 	    
    535. 		if(bottom1==true){
    536. 		var kk4=Math.round(Math.random()*15);
    537. 		while(flag[kk4]==true)
    538. 		{
    539. 			var kk4=Math.round(Math.random()*15);
    540. 			}
    541. 		 ds[kk4].style.backgroundColor="#FF9E3E";
    542.          ds[kk4].innerHTML="2";
    543. 		 flag[kk4]=true;
    544. 		 addcolor()
    545. 		 }
    546. 		 else
    547. 		 {
    548. 			islose();
    549. 			 }
    550. }

    css代码：

    1. @charset "utf-8";
    2. /* CSS Document */
    3. body,html{
    4. 	height:100vw;
    5. 	width: 100vw;
    6. 	padding: 0;
    7. 	margin: 0;
    8. 	background:fixed;
    9. 	background-color: papayawhip;
    10. 	}
    11. 	
    12. .authorized {
    13. 	color: grey;
    14. 	margin-left: 2%;
    15. 	text-align:center;
    16. 	font-style: normal;
    17. 	font-size:210%;
    18. 	margin-top:10%;
    19. 	width: 30%;
    20.    }
    21.    
    22. .restart {
    23. 	position: absolute;
    24. 	margin-left: 5%;
    25. 	width: 25vw;
    26. 	height: 10vw;
    27. 	padding-top:5%;
    28. 	text-align:center;
    29. 	font-size: 22px;
    30. 	background-color:#99CCCC;
    31. 	color: white;
    32. 	border-radius: 5% 5% 5% 5%;
    33. }
    34.    
    35. .score {
    36. 	position: absolute;
    37. 	margin-left: 50%;
    38. 	padding-top: 2%;
    39. 	width:45vw ;
    40. 	background-color:#99CCCC;
    41. 	color: white;
    42. 	border-radius:5% 5% 5% 5%;
    43. }
    44.  
    45. .maxnum {	
    46. 	position: relative;
    47. 	float:left;
    48. 	margin-left: 3%;
    49. 	font-size: 120%;
    50. 	text-align: center;
    51. 	color: white;
    52. 	width: 40%;
    53. 	height: 4vw;
    54. }
    55. #num_p {
    56. 	margin-top: 5%;
    57. 	margin-left: 5%;
    58. }
    59. #num_v {
    60. 	margin-top: 5%;
    61. 	color:#ffd700;
    62. 	font-size: 25px;}
    63.   
    64. .game{
    65. 	position:absolute;
    66.    	top:30% ;
    67. 	left:2.5%;
    68. 	width:95vw;
    69.     height:95vw;
    70. 	background-color:#AAAA; 
    71. 	border-radius:5% 5% 5% 5%;
    72. 	     }
    73. 		 
    74.  #reset1{
    75. 	position:absolute;
    76. 	top:30% ;
    77. 	left:2.5%;
    78. 	width:95vw;
    79. 	height:60vw;
    80. 	font-size: 40px;
    81. 	background: rgba(250,250,250,0.5);
    82. 	text-align: center;
    83. 	padding-top: 35%;
    84. 	color: grey;
    85. 	border-radius:5% 5% 5% 5%;} 
    86.  
    87. #reset2 {
    88. position:absolute;
    89. width: 30vw;
    90. height: 13vw;
    91. margin:70% 20% 30% 35%;
    92. font-size: 20px;
    93. padding-left: 0.125rem;
    94. background-color: lightsalmon;
    95. font-weight: bold;
    96. color: white;
    97. border-radius:5% 5% 5% 5%;
    98. }
    99.  
    100. .square{
    101. 	position:relative;
    102. 	width:23%;
    103. 	height:23%;
    104.     line-height: 180%; /*行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度 */
    105. 	float:left;
    106. 	background-color:#DDDDDD;
    107. 	border-radius:15% 15% 15% 15%;
    108. 	margin:1% 1% 1% 1%;
    109. 	color:white;
    110. 	text-align:center;
    111. 	font-size:12vw;
    112. 	}
    113. 	
    114. 	
    115.

    四、源码及APK

    可以利用Hbuilder将H5代码打包成移动端应用，这样我们就可以在手机端安装APP愉快的玩耍了。下面是我打包的安卓包，点击自取：

    链接: https://pan.baidu.com/s/1ooirqPYvZpDx4CfVq2jJ5Q?pwd=c3wy 提取码: c3wy 复制这段内容后打开百度网盘手机App，操作更方便哦

  • 相关阅读:
    给echart.js折线图设置滚动条
    多御安全浏览器更新隐私锁，个人隐私有救了
    Golang中的GC原理（介于三个不同版本）
    ROS -话题通信示例
    ES6语法新特性(上)
    六、OpenAI之嵌入式(Embedding)
    服务发现原理分析与源码解读
    C/C++ 基础知识总结
    c++多线程（一）线程管理
    素数算法（Prime Num Algorithm）
  • 原文地址：https://blog.csdn.net/Nicolege678/article/details/125501448