JavaScript实现2048小游戏

最新推荐文章于 2023-06-27 16:54:27 发布
最新推荐文章于 2023-06-27 16:54:27 发布
阅读量326 收藏
点赞数 1
文章标签： 游戏 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51401486/article/details/114764087
版权 
闲着没事干敲的，属实是有点闲。（听君一席话，如听一席话。

<!-- Author: LQQ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
margin:0;
padding:0;
}
table{
width:500px;
height:500px;
margin:60px auto;
position:relative;
background-color:pink;
border:0px solid purple;
color:	#778899;
}
td{
width:125px;
height:125px;
text-align:center;
border-radius: 10px;
}

</style>
</head>
<body>
<table class="table">
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
<div><div>
<script >

//初始化阶段
let a = new Array(4);//初始化4行的二维数组
let tds = new Array(4);
let b = new Array(4);//来一个备用数组，比较移动前后，数组是否有变换
let tr_tds = document.querySelectorAll("td");
for(let i = 0;i < 4;i++){
	a[i] = new Array(4);//初始化每行有4列
	tds[i] = new Array(4);
	b[i] = new Array(4);
}
for(let i = 0,cnt = 0;i < 4;i++){//初始化每个放个里面的数字为0
	for(let j = 0;j < 4;j++){
		a[i][j] = 0;
		tds[i][j] = tr_tds[cnt];
		cnt++;
	}
}
rand_create();
num_to_HTML();
changestyle();


//开始运行阶段
document.onkeydown = function(e){
	let flag = true;
	copy_a();
	if(e.key === "ArrowUp" || e.key === "w" || e.key === "W"){
		changeup();
		mergeup();
	}else if(e.key === "ArrowDown" || e.key === "s" || e.key === "S"){
		changedown();
		mergedown();
	}else if(e.key === "ArrowLeft" || e.key === "a" || e.key === "A"){
		changeleft();
		mergeleft();
	}else if(e.key === "ArrowRight" || e.key === "d" || e.key === "D"){
		changeright();
		mergeright();
	}
	if(compare()){
		flag = rand_create();
		num_to_HTML();
		changestyle();
	}
	if(rand_create() === false && isfail() === false){
		setTimeout(function(){
			alert("寄，你是真的菜.");
		},1000);
	}
}



//函数化阶段
function rand_create_num(Size){//生成一个（0 ~ Size - 1）的随机数字
	let n = Size * Math.random();
	let m = Math.floor(n);
	return m;
}
function rand_create_tow_or_four(){//随机返回数字4或者2，这里可以调节数字生成的概率，进而改变游戏的难度
	let n = rand_create_num(4);
	if(n < 1) return 2;
	else return 4;
}
function rand_create(){//寻找一个值为零的地方作为随机生成数的地方。//操作成功返回true，否则返回false  
	let arr_r = new Array();//储存值为0的二维数组的行
	let arr_c = new Array();//储存值为0的二维数组的列
	let cnt = 0;//下标从0开始
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			if(a[i][j] === 0){
				arr_r[cnt] = i;
				arr_c[cnt] = j;
				cnt++;//下标加一
			}
		}
	}
	if(cnt === 0){
		return false;
	}
	let n = rand_create_num(cnt);
	a[arr_r[n]][arr_c[n]] = rand_create_tow_or_four();
	return true;
}
function num_to_HTML(){
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			if(a[i][j] === 0){
				tds[i][j].innerHTML = "";
			}else{
				tds[i][j].innerHTML = a[i][j];
			}
		}
	}
}
function copy_a(){
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			b[i][j] = a[i][j];
		}
	}
}
function compare(){
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			if(a[i][j] !== b[i][j]) return true;
		}
	}return false;
}
function changestyle(){
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			Selecte_font_and_color(i,j);
		}
	}
}
function isfail(){
	for(let i = 0;i < 4;i++){
		for(let j = 0;j < 4;j++){
			let r = i + 1;
			let c = j + 1;
			if(r < 4 && a[i][j] === a[r][j]) return true;
			if(c < 4 && a[i][j] === a[i][c]) return true;
		}
	}return false;
}
function Selecte_font_and_color(r,c){//根据数字值的大小选择字体颜色，字体大小，背景颜色；随便在HTML中修改完成
	if(a[r][c] === 2){
		tds[r][c].style.fontSize = "60px";
		tds[r][c].style.backgroundColor = "#FFFAF0";
	}else if(a[r][c] === 4){
		tds[r][c].style.fontSize = "60px";
		tds[r][c].style.backgroundColor = "#FFF5EE";
	}else if(a[r][c] === 8){
		tds[r][c].style.fontSize = "60px";
		tds[r][c].style.backgroundColor = "#FFE4C4";
	}else if(a[r][c] === 16){
		tds[r][c].style.fontSize = "55px";
		tds[r][c].style.backgroundColor = "#F5DEB3";
	}else if(a[r][c] === 32){
		tds[r][c].style.fontSize = "55px";
		tds[r][c].style.backgroundColor = "#D2B48C";
	}else if(a[r][c] === 64){
		tds[r][c].style.fontSize = "55px";
		tds[r][c].style.backgroundColor = "#F4A460";
	}else if(a[r][c] === 128){
		tds[r][c].style.fontSize = "50px";
		tds[r][c].style.backgroundColor = "#FF7F50";
	}else if(a[r][c] === 256){
		tds[r][c].style.fontSize = "50px";
		tds[r][c].style.backgroundColor = "#FA8072";
	}else if(a[r][c] === 512){
		tds[r][c].style.fontSize = "50px";
		tds[r][c].style.backgroundColor = "#FF4500";
	}else if(a[r][c] === 1024){
		tds[r][c].style.fontSize = "45px";
		tds[r][c].style.backgroundColor = "#D2691E";
	}else if(a[r][c] === 2048){
		tds[r][c].style.fontSize = "45px";
		tds[r][c].style.backgroundColor = "#8B4513";
	}else if(a[r][c] === 4096){
		tds[r][c].style.fontSize = "45px";
		tds[r][c].style.backgroundColor = "#FF1493";
	}else if(a[r][c] === 8192){
		tds[r][c].style.fontSize = "45px";
		tds[r][c].style.backgroundColor = "#DC143C";
	}else{
		tds[r][c].style.backgroundColor = "skyblue";
	}
}
function changeup(){//移动函数
	for(let i = 0;i < 4;i++){//把数字集中到一起，方便后面的枚举。
		let arr = new Array();
		let cnt = -1;
		for(let j = 0;j < 4;j++){
			if(a[j][i] !== 0){
				arr[++cnt] = a[j][i];
			}
		}
		for(let j = 0;j < 4;j++){
			if(j <= cnt){
				a[j][i] = arr[j];
			}else{
				a[j][i] = 0;
			}
		}
	}
}
function changedown(){
	for(let i = 0;i < 4;i++){
		let arr = new Array();
		let cnt = -1;
		for(let j = 3;j >= 0;j--){
			if(a[j][i] !== 0){
				arr[++cnt] = a[j][i];
			}
		}
		for(let j = 3,l = 0;j >= 0;l++,j--){
			if(l <= cnt){
				a[j][i] = arr[l];
			}else{
				a[j][i] = 0;
			}
		}
	}
}
function changeleft(){
	for(let i = 0;i < 4;i++){
		let arr = new Array();
		let cnt = -1;
		for(let j = 0;j < 4;j++){
			if(a[i][j] !== 0){
				arr[++cnt] = a[i][j];
			}
		}
		for(let j = 0;j < 4;j++){
			if(j <= cnt){
				a[i][j] = arr[j];
			}else{
				a[i][j] = 0;
			}
		}
	}
}
function changeright(){
	for(let i = 0;i < 4;i++){
		let arr = new Array();
		let cnt = -1;
		for(let j = 3;j >= 0;j--){
			if(a[i][j] !== 0){
				arr[++cnt] = a[i][j];
			}
		}
		for(let j = 3,l = 0;j >= 0;l++,j--){
			if(l <= cnt){
				a[i][j] = arr[l];
			}else{
				a[i][j] = 0;
			}
		}
	}
}

function mergeup(){//合并移动方向上相同且相邻的数字//别忘了合并顺序上面的优先级
	for(let i = 0;i < 4;i++){
		if(a[0][i] === a[1][i] && a[2][i] === a[3][i]){
			a[0][i] = a[0][i] * 2;
			a[1][i] = a[2][i] * 2;
			a[2][i] = 0;
			a[3][i] = 0;
		}else if(a[0][i] === a[1][i]){
			a[0][i] = a[0][i] * 2;
			a[1][i] = a[2][i];
			a[2][i] = a[3][i];
			a[3][i] = 0;
		}else if(a[1][i] === a[2][i]){
			a[1][i] = a[1][i] * 2;
			a[2][i] = a[3][i];
			a[3][i] = 0;
		}else if(a[2][i] === a[3][i]){
			a[2][i] = a[2][i] * 2;
			a[3][i] = 0;
		}//移动方向上没有相同且相邻数字的就不移动，也就是不操作
	}
}
function mergedown(){
	for(let i = 0;i < 4;i++){
		if(a[3][i] === a[2][i] && a[1][i] === a[0][i]){
			a[3][i] = a[3][i] * 2;
			a[2][i] = a[1][i] * 2;
			a[1][i] = 0;
			a[0][i] = 0;
		}else if(a[3][i] === a[2][i]){
			a[3][i] = a[3][i] * 2;
			a[2][i] = a[1][i];
			a[1][i] = a[0][i];
			a[0][i] = 0;
		}else if(a[2][i] === a[1][i]){
			a[2][i] = a[2][i] * 2;
			a[1][i] = a[0][i];
			a[0][i] = 0;
		}else if(a[1][i] === a[0][i]){
			a[1][i] = a[1][i] * 2;
			a[0][i] = 0;
		}
	}
}
function mergeleft(){
	for(let i = 0;i < 4;i++){
		if(a[i][0] === a[i][1] && a[i][2] === a[i][3]){
			a[i][0] = a[i][0] * 2;
			a[i][1] = a[i][2] * 2;
			a[i][2] = 0;
			a[i][3] = 0;
		}else if(a[i][0] === a[i][1]){
			a[i][0] = a[i][0] * 2;
			a[i][1] = a[i][2];
			a[i][2] = a[i][3];
			a[i][3] = 0;
		}else if(a[i][1] === a[i][2]){
			a[i][1] = a[i][1] * 2;
			a[i][2] = a[i][3];
			a[i][3] = 0;
		}else if(a[i][2] === a[i][3]){
			a[i][2] = a[i][2] * 2;
			a[i][3] = 0;
		}
	}
}
function mergeright(){
	for(let i = 0;i < 4;i++){
		if(a[i][3] === a[i][2] && a[i][1] === a[i][0]){
			a[i][3] = a[i][3] * 2;
			a[i][2] = a[i][1] * 2;
			a[i][1] = 0;
			a[i][0] = 0;
		}else if(a[i][3] === a[i][2]){
			a[i][3] = a[i][3] * 2;
			a[i][2] = a[i][1];
			a[i][1] = a[i][0];
			a[i][0] = 0;
		}else if(a[i][2] === a[i][1]){
			a[i][2] = a[i][2] * 2;
			a[i][1] = a[i][0];
			a[i][0] = 0;
		}else if(a[i][1] === a[i][0]){
			a[i][1] = a[i][1] * 2;
			a[i][0] = 0;
		}
	}
}
</script>
</body>
</html>
西大内鬼
关注
使用JS实现2048小游戏
qq_36190858的博客
05-02 390
使用JS实现2048小游戏  JS实现2048小游戏源码 效果图：  代码如下，复制即可使用： （适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-T...
用javascript实现一个2048游戏
weixin_34418883的博客
05-01 140
早就想自己写一个2048游戏了，昨晚闲着没事，终于写了一个 如下图，按方向键开始玩吧。 如果觉得操作不方便，请直接打开链接玩吧： http://gujianbo.1kapp.com/2048/2048.html 附上源代码链接：https://github.com/gujianbo/js2048 个人博客地址：http://gujianbo.1kapp.com/ 新浪微...
【javascript】2048小游戏
最新发布
qq_63806300的博客
06-27 2218
2048是一款风靡全球的小游戏，具体的玩法就不多说了，最早于2014年Gabriele Cirulli在github发表的版本。不过此项目依赖于GULP。本文就用javascript写出一个较为完整的2048游戏。以下是本文实现的游戏界面：2048的实现可以分为3个部分：游戏界面绘制、分数逻辑和方向控制逻辑。
移动端 - 用JS实现2048小游戏
CodingmanNAN的博客
12-02 718
《2048》一款益智小游戏，游戏的规则十分简单，是时下一款简单易上手的数字小游戏，但又十分虐心。《2048》是一款单人在线和移动端游戏，由19岁的意大利人Gabriele Cirulli于2014年3月开发。
js之2048小游戏
qq_45117533的博客
07-15 246
这里写自定义目录标题 我们首先来了解一下2048这个游戏的规则： 它由一个4x4的小方格组成，在游戏一开始的时候会在随机位置随机生成一个2或者4； 每点击一次开始就刷新一次游戏界面； 通过键盘的上下左右四个方向键来控制数字的移动； 当移动的时候判断相应的方向有无相同的数字或者0；若为相同的数字则叠加，将叠加的和作为分数计算进总分；若为0，则与其换位； 当页面被铺满时，且每个数字都无法叠加，那么叛定为游戏结束，显示一个结束界面，界面内容有当前分数以及重新开始。 　　以上是游戏的基本流程，其中还要考虑到每个数
JQuery初体验-JavaScript实现2048小游戏PC端源码
12-19
《JQuery初体验：通过JavaScript实现2048小游戏》 2048是一款深受玩家喜爱的数字拼图游戏，其简洁的界面和富有挑战性的玩法吸引了大量的编程爱好者尝试用各种编程语言进行实现。本教程将带你走进JavaScript与jQuery...
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
Javascript编写2048小游戏
10-23
### Javascript编写2048小游戏知识点详解 #### 1. 游戏2048简介 2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...
javascript版2048小游戏
10-24
本文给大家分享的是使用javascript制作的2048小游戏的代码，仅仅是想锻炼下自己的编程代码风格，尽量做的规范些，小伙伴们多多给些建议。
2048小游戏js.zip
06-09
这是我跟着别人学习写的2048小游戏,仅供学习和参考里面还有一些bug,希望大家能有所收获.如果没有积分可以私信我
js实现2048小游戏
hcute的博客
08-25 503
2048小游戏 2048小游戏（带动画效果） 所用语言html、css、JavaScript 通过上下左右进行控制，实现了移动、合并等功能 github地址 线上测试地址 效果图 实现功能 1.新建游戏 先清空方格和分数，再随机两个位置，生成2或者4数字 2.移动数字 移动包括：上、下、左、右 监控键盘事件keyCode 例如：用户向上时，从每一行开始遍历，当遍历到某个小方格有数字时，就判断它上方有没有其他数字，如果也有，就让他们合并，然后标记一下，因为一个方格只能合并一次。 其他方向类比。 3.新出现的
JS实现2048小游戏
FeoniX
02-07 1946
JS实现2048小游戏简介效果展示代码实现 简介 2048是一款休闲益智类的数字叠加小游戏。 游戏存在4种模式，分别是 3 X 3宫格、4 X 4宫格(默认)、5 X 5宫格、6 X 6宫格，每种模式的目标数字分别是 1024、2048、4096、8192，达到目标数字即可赢得胜利。 您可以通过键盘的上、下、左、右四个方向键进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一个数字。 效果展示 代码实现 游戏UI部分index.html <!DOCT
JavaScript--2048游戏（一）
带翅膀的猫的博客
05-24 4352
2048游戏项目第一天实现效果： 第一天完成项目内容和样式的制作 项目界面结构分析： 对应html和css样式如下<!--HTML内容--> <p>Score:<span id="score"></span></p> <div id="back"> <!--背景--> <!--第一行-->
js-基础-简易版2048小游戏
sjyssn的博客
09-08 561
**html+css** &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;
2048小游戏 （留赞拿走）js
weixin_55176296的博客
05-12 167
2048小游戏 （留赞拿走）
js2048小游戏（直接复制即可运行）
wedFrontEnd的博客
01-10 335
小游戏
HTML/CSS/JavaScript实现2048小游戏教程
通过以上各方面的分析，可以看出JavaScript小游戏2048虽然看起来简单，但其开发涉及到前端技术的多个重要领域，包括HTML结构设计、CSS样式布局和动画实现，以及JavaScript的DOM操作、事件处理和算法应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值