网站导航
> 文章列表 > JavaScript【趣味】做一个网页版2048

JavaScript【趣味】做一个网页版2048

网友: 文章列表 2024-03-21 21:00:49

JavaScript【趣味】做一个网页版2048

文章目录

  • 🌟前言
  • 🌟先看效果（粉丝特权哈哈）
  • 🌟代码实现
    • 🌟页面布局 【index.html】
    • 🌟样式文件【2048.css】
    • 🌟index.html 里用到的JS文件
      • 🌟jquery.min.js
      • 🌟util.js
      • 🌟2048.js
  • 🌟结语


在这里插入图片描述

🌟前言

哈喽小伙伴们，从这篇文章开始，我会开始新的专栏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网站，大家可以自行去下载

BootCDN
稳定、快速、免费的前端开源项目 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-cellshowdata()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);//adddata[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);//adddata[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);//adddata[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);//adddata[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！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！

网络标签：

相关问题