🌟前言
哈喽小伙伴们，从这篇文章开始，我会开始新的专栏JavaScript【趣味JS七十二变】；这个专栏里边会收录一些JavaScript的趣味玩法和一些小游戏，目的是为了大家在娱乐的过程中也可以去学习到很多知识点，喜欢的话希望大家可以订阅并持续关注；今天我们开始这个专栏的第一篇文章，使用Jquery 来做一个网页版的 2048 ；让我们一起来看看吧🤘
🌟先看效果（粉丝特权哈哈）
JS实现一个网页版2048小游戏
🌟代码实现
🌟页面布局 【index.html】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2048</title> <link rel="stylesheet" href="css/2048.css"> <script src="js/jquery.min.js"></script> <script src="js/util.js"></script> <script src="js/2048.js"></script> </head> <body> <header> <h3>2048</h3> <div class="score hscore" style="line-height: 40px;">最高分数：<span>0</span></div> <div class="score" style="line-height: 10px;">分数：<span>0</span></div> </header> <div class="btn-group"> <div class="newgame" onclick="newGame()" onmousedown="return false">新游戏</div> </div> <!-- 棋盘区域 --> <div class="grid"> </div> </body> </html>
🌟样式文件【2048.css】
body,ul,li,h3{ margin: 0; padding: 0; list-style: none; } body{ background: #fcfad3; } a{ text-decoration: none; } header{ width: 500px; margin: 0 auto; text-align: center; font-family: arial; height: 60px; } header .score{ float: right; width: 50%; height: 30px; line-height: 30px; font-size: 14px; text-align: right; color:#666; } header .score span{ display: inline-block; width: 40px; padding:0 10px; color:#ff6529; } header h3{ width: 40%; height: 60px; font-size: 44px; line-height: 60px; text-align: left; font-family:"arial"; color:#ff6529; float: left; } .grid{ width: 500px; height: 500px; background: #c4b6ab; margin: 10px auto 0px; border-radius: 20px; position: relative; } .grid-cell{ width: 100px; height: 100px; border-radius: 10px; position: absolute; background: #d2c8be; } .number-cell{ font-family: arial; font-size: 60px; font-weight: bold; text-align: center; line-height: 100px; position: absolute; border-radius: 10px; } .btn-group{ margin:0 2%; text-align: center; } .newgame{ display: inline-block; padding: 4px 12px; background: #ff6529; color: #fff; font-size: 18px; margin-top: 10px; border-radius: 0.5rem; } .newgame:active{ opacity: 0.6; }
🌟index.html 里用到的JS文件
🌟jquery.min.js
这个文件就不给大家输出了，如果小伙伴没有的话，我这里给大家推介一个CDN网站，大家可以自行去下载
稳定、快速、免费的前端开源项目 CDN 加速服务;共收录了 4381 个前端开源项目
🌟util.js
这个是封装了一个工具类，里边包含了一些相关的函数，封装起来也是为了方便复用
//工具类 var util ={ pos:function(n){//获取x y位置 return n*120+20; }, //检测界面中是否有空间 space:function(d){ for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ if(d[i][j]==0){ return false; } } } return true; }, //动画显示一个numbercell + 数字 showNumber:function(x,y,num){ var numberCell = $('#n'+x+y); numberCell.css({ backgroundColor:bgColor[num], color:fontColor(num) }).text(num).animate({width:100,height:100,left:util.pos(y),top:util.pos(x)},50); }, //消除动画 moveAnimate:function (fi,fj,ti,tj){ $('#n'+fi+fj).animate({ left:util.pos(tj), top:util.pos(ti) },100) }, //更新分数 updateScore:function(){ $('.score span').text(score); this.hightScore() }, //最高分数 hightScore:function(){ if(!localStorage.getItem('hscore')){ localStorage.setItem('hscore',0); } var oldH = localStorage.getItem('hscore'); if(oldH<score){ localStorage.setItem('hscore',score); $('.hscore span').text(score); }else{ $('.hscore span').text(oldH); } } }
🌟2048.js
核心JS文件，处理游戏的大部分逻辑
/* 2048游戏逻辑 # 变量组 data 存放数据 score 存放分数 1. 绘制界面 4*4 双层 for 计算left top */ var data = [];//数据 var score = 0; //分数 var flag = true; var bgColor = {//不同数字单元格背景颜色 2:'#eee4da', 4:'#ede0c8', 8:'#f2b179', 16:'#f59563', 32:'#f67c5f', 64:'#f65e3b', 128:'#edcf72', 256:'#edcc61', 512:'#9c0', 1024:'#33b5e5', 2048:'#09c', 4096:'#a6c', 8192:'#93c' } var fontColor=function(num){//数字颜色 if(num<=4){ return "#776e65"; } return "#fff"; } $(function(){ newGame() }) // 新游戏 function newGame(){ //绘制界面 drawSence(); score =0; util.updateScore(); util.hightScore(); //随机生成2个数字 getNumber(); getNumber(); flag=true; } //绘制界面函数 function drawSence(){ var grid=$('.grid'); grid.empty(); for (var i = 0; i < 4; i++) { for(var j = 0; j < 4; j++){ $('<div>').attr({ class:'grid-cell', id:'g'+i+j }).css({ top:util.pos(i), left:util.pos(j) }).appendTo(grid) } } //初始化数据 for(var i=0;i<4;i++){ data[i]=[]; for(var j=0;j<4;j++){ data[i][j]=0; } } //创建number-cell showdata() console.log(data) } function showdata(){ var grid=$('.grid'); $('.number-cell').remove(); //清除所有number-cell元素 for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ var numberCell = $('<div>'); numberCell.attr({ class:'number-cell', id:'n'+i+j }).appendTo(grid); if(data[i][j]==0){ numberCell.css({ width:0, height:0, left:util.pos(j)+50, top:util.pos(i)+50 }) }else{ numberCell.css({ width:100, height:100, left:util.pos(j), top:util.pos(i) }) numberCell.css({ backgroundColor:bgColor[data[i][j]], color:fontColor(data[i][j]), }).text(data[i][j]); } } } } function getNumber(){ if(util.space(data)){ return true; } //随机单元格 位置 var x = Math.floor(Math.random()*4); var y = Math.floor(Math.random()*4); while(data[x][y]!=0){ x = Math.floor(Math.random()*4); y = Math.floor(Math.random()*4); } //随机数字 var num = Math.random()<0.5?2:4; data[x][y] = num; util.showNumber(x,y,num); console.log(data) return false; } // 监听键盘按键 $(document).keydown(function(e){ if(!flag){return;} switch(e.keyCode){ case 37: moveLeft(); break; case 38: moveTop(); break; case 39: moveRight(); break; case 40: moveBottom(); break; default: break; } }) // 键盘左键 function moveLeft(){ isGameOver(); if(!canMoveLeft()){ return false; } for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(data[i][j]!=0){ for(var k=0;k<j;k++){ if(data[i][k]==0&&noBlockH(i,k,j,data)){ //move() util.moveAnimate(i,j,i,k); data[i][k]=data[i][j]; data[i][j]=0; continue; }else if(data[i][k]==data[i][j]&&noBlockH(i,k,j,data)){ //move() util.moveAnimate(i,j,i,k); //add data[i][k]+=data[i][j]; data[i][j]=0; score+=data[i][k];//增加分数 util.updateScore();//更新分数 continue; } } } } } setTimeout(getNumber,100); setTimeout(showdata,100); } // 键盘上键 function moveTop(){ isGameOver(); if(!canMoveTop()){ return false; } for(var i=1;i<4;i++){ for(var j=0;j<4;j++){ if(data[i][j]!=0){ for(var k=0;k<i;k++){ if(data[k][j]==0&&noBlockV(j,k,i,data)){ //move() util.moveAnimate(i,j,k,j); data[k][j]=data[i][j]; data[i][j]=0; continue; }else if(data[k][j]==data[i][j]&&noBlockV(j,k,i,data)){ //move() util.moveAnimate(i,j,k,j); //add data[k][j]+=data[i][j]; data[i][j]=0; score+=data[k][j];//增加分数 util.updateScore();//更新分数 continue; } } } } } setTimeout(getNumber,100); setTimeout(showdata,100); } // 键盘下键 function moveBottom(){ isGameOver(); if(!canMoveBottom()){ return false; } for(var i=2;i>=0;i--){ for(var j=0;j<4;j++){ if(data[i][j]!=0){ for(var k=3;k>i;k--){ if(data[k][j]==0&&noBlockV(j,i,k,data)){ //move() util.moveAnimate(i,j,k,j); data[k][j]=data[i][j]; data[i][j]=0; continue; }else if(data[k][j]==data[i][j]&&noBlockV(j,i,k,data)){ //move() util.moveAnimate(i,j,k,j); //add data[k][j]+=data[i][j]; data[i][j]=0; score+=data[k][j];//增加分数 util.updateScore();//更新分数 continue; } } } } } setTimeout(getNumber,100); setTimeout(showdata,100); } // 键盘右键 function moveRight(){ isGameOver(); if(!canMoveRight()){ return false; } for(var i=0;i<4;i++){ for(var j=2;j>=0;j--){ if(data[i][j]!=0){ for(var k=3;k>j;k--){ if(data[i][k]==0&&noBlockH(i,j,k,data)){ //move() util.moveAnimate(i,j,i,k); data[i][k]=data[i][j]; data[i][j]=0; continue; }else if(data[i][k]==data[i][j]&&noBlockH(i,j,k,data)){ //move() util.moveAnimate(i,j,i,k); //add data[i][k]+=data[i][j]; data[i][j]=0; score+=data[i][k];//增加分数 util.updateScore();//更新分数 continue; } } } } } setTimeout(getNumber,100); setTimeout(showdata,100); } function canMoveLeft(){ for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(data[i][j]!=0){ if(data[i][j-1]==0||data[i][j-1]==data[i][j]){ return true; } } } } return false; } function canMoveTop(){ for(var i=1;i<4;i++){ for(var j=0;j<4;j++){ if(data[i][j]!=0){ if(data[i-1][j]==0||data[i-1][j]==data[i][j]){ return true; } } } } return false; } function canMoveRight(){ for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ if(data[i][j]!=0){ if(data[i][j+1]==0||data[i][j+1]==data[i][j]){ return true; } } } } return false; } function canMoveBottom(){ for(var i=0;i<3;i++){ for(var j=0;j<4;j++){ if(data[i][j]!=0){ if(data[i+1][j]==0||data[i+1][j]==data[i][j]){ return true; } } } } return false; } function noBlockH(row,col1,col2,data){ for(var i=col1+1;i<col2;i++){ if(data[row][i]!=0){ return false; } } return true; } function noBlockV(col,row1,row2,data){ for(var i=row1+1;i<row2;i++){ if(data[i][col]!=0){ return false; } } return true; } // 游戏结束 function isGameOver(){ if(!canMoveTop()&&!canMoveBottom()&&!canMoveLeft()&&!canMoveRight()){ alert('GameOver'); flag=false; } }
🌟结语
喜欢的话大家一定要关注这篇专栏，后续也会不定期持续输出JS相关的趣味玩法。各位小伙伴让我们 let’s be prepared at all times！
