纯js+css 2048 小游戏

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量150 收藏
点赞数
文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XWxiaowei21/article/details/105524425
版权

页面代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>1024 -- 小游戏</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

	<div class="main">

		<div class="center">
			<h1 class="title">2048</h1>
		</div>

		<div class="center">
			<button class="button" type="button" onclick="GameRollback()">上一步</button>
			<button class="button" type="button" onclick="BtnGameStart()">开始游戏</button>

		</div>

		<div class="game game-background">

			<div class="game-group">
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
				<div class="game-group-block"></div>
			</div>
			
		</div>


		<div class="game game-game">
			
			<div class="game-group">
				<div id="0-0" class="game-group-block"></div>
				<div id="0-1" class="game-group-block"></div>
				<div id="0-2" class="game-group-block"></div>
				<div id="0-3" class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div id="1-0" class="game-group-block"></div>
				<div id="1-1" class="game-group-block"></div>
				<div id="1-2" class="game-group-block"></div>
				<div id="1-3" class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div id="2-0" class="game-group-block"></div>
				<div id="2-1" class="game-group-block"></div>
				<div id="2-2" class="game-group-block"></div>
				<div id="2-3" class="game-group-block"></div>
			</div>

			<div class="game-group">
				<div id="3-0" class="game-group-block"></div>
				<div id="3-1" class="game-group-block"></div>
				<div id="3-2" class="game-group-block"></div>
				<div id="3-3" class="game-group-block"></div>
			</div>

		</div>

		<div class="game-over">
			<p class="game-over-p">Game Over</p>
			
			<div><button class="button" type="button" onclick="BtnGameStarts()">再来一局</button></div>
		</div>

	</div>

	<script type="text/javascript" src="index.js"></script>
</body>
</html>

js 代码

var gameData = [['','','',''],['','','',''],['','','',''],['','','','']];
var gameDatas = [];		// 运行执行顺序
var className = [];		// 游戏类名
var key = null;			// 当前键盘码
var gameXY = 1;			// 游戏方向		1-上下 | 0-左右
var gameStatus = false;	// 游戏状态
var gameOver = 2048		// 游戏结束值
var gameAnnal = [];		// 游戏执行记录

var blockClass = ' game-group-block game_';			// 游戏方块样式
var block = ' game-group-block';					// 方块样式

// 准备
function Ready(){
	let style = document.createElement('style');
	style.type = 'text/css';

	let gameStyle = {
		game_2:{'color':'#776e65;','font-size':'55px;','background-color':'#eee4da;'},
		game_4:{'color':'#776e65;','font-size':'55px;','background-color':'#ede0c8;'},
		game_8:{'color':'#f9f6f2;','font-size':'55px;','background-color':'#f2b179;'},
		game_16:{'color':'#f9f6f2;','font-size':'55px;','background-color':'#f59563;'},
		game_32:{'color':'#f9f6f2;','font-size':'55px;','background-color':'#f67c5f;'},
		game_64:{'color':'#f9f6f2;','font-size':'55px;','background-color':'#f65e3b;'},
		game_128:{'color':'#f9f6f2;','font-size':'45px;','background-color':'#edcf72;'},
		game_256:{'color':'#f9f6f2;','font-size':'45px;','background-color':'#edcc61;'},
		game_512:{'color':'#f9f6f2;','font-size':'45px;','background-color':'#eee4da;'},
		game_1024:{'color':'#f9f6f2;','font-size':'35px;','background-color':'#edc53f;'},
		game_2048:{'color':'#f9f6f2;','font-size':'35px;','background-color':'##edc22e;'}
		
	};

	for (let i in gameStyle) {

		style.innerHTML += '.' + i + '{';
		for (x in gameStyle[i]){
			style.innerHTML += x + ':' + gameStyle[i][x];
		}
		style.innerHTML += '}';

	}

	document.getElementsByTagName('head')[0].appendChild(style);
}

// 游戏
/*
 * n 	x - y 轴		1 | 0
 * m 	加 - 减  	1 | -1
*/
function GameInit(n,m){
	// 初始 执行顺序
	gameDatas = [];
	// 添加 记录块
	gameAnnal.push([]);
	gameXY = n;
	Game(n,m);
}

// 游戏规则
function Game(n,m){
	let x,y,s,p2,i = j = 4;
	n ? (y = 3,s = x = m == 1 ? 0 : 3) : (x = 3,s = y = m == 1 ? 0 : 3);
	let p = [x,y];
	let game = Games();

	while(i > 0){
		while(j > 1){
			let p3 = n ? (x += m,p2 = p[0] - x ,0) : (y += m,p2 = p[1] - y ,1);

			(function(x,y){
				if(gameData[x][y]){
					if(!gameData[p[0]][p[1]]){
						game([ x,y,gameData[x][y],p[0],p[1],gameData[p[0]][p[1]], p2 ]);
					}else if(gameData[p[0]][p[1]] == gameData[x][y]){
						game([ x,y,gameData[x][y],p[0],p[1],gameData[p[0]][p[1]], p2 ],2);
						GameClearance(gameData[p[0]][p[1]]);
						p[p3] += m;
					}else if(Math.abs(p2) > 1){
						p[p3] += m;
						game([ x,y,gameData[x][y],p[0],p[1],gameData[p[0]][p[1]], p2 ]);
					}else{
						p[p3] += m;
					}
				}
			})(x,y);

			j--;
		}
		n ? (y--,x = s) : (x--,y = s);
		p = [x,y];
		i--;
		j = 4;
	}
 	GameStarts()();
}

// 游戏数据 -- 修改
// 游戏记录保存
function Games(){
	return function(arr,code = 1){
		let displyAnimation = DisplyAnimation();
		gameDatas.push(arr);
		gameAnnal[gameAnnal.length - 1].push(arr);
		gameData[arr[3]][arr[4]] = arr[2] * code;
		gameData[arr[0]][arr[1]] = '';
		displyAnimation(arr[0],arr[1]);
		displyAnimation(arr[3],arr[4],arr[2] * code);
	}
}

// 添加-清除  类名
/*
 * x 	x坐标
 * y 	y坐标
 * n 	x-y坐标
*/
var DisplyAnimation = function (){
	return function(x,y,n = null){
		let obj = findDiv()(x,y);
		obj.className = n ? blockClass + n : block;
		obj.innerHTML = n;
	}
}

// 游戏数据执行记录 -- 用于后退
/*
 * x 		原x坐标
 * y 		原y坐标
 * n 		原 x-y 坐标的值
 * x1 		执行后的x的坐标
 * y1 		执行后的y的坐标
 * n2		执行后的 x1-y1 坐标的值		
*/
function GameAnnal(arr){
	gameStatus = false;
	gameAnnal[gameAnnal.length - 1].push(arr);
}

// 游戏回退
function GameRollback(){
	if(gameAnnal.length){
		let arr = gameAnnal.pop();
		let displyAnimation = DisplyAnimation();

		for(let i = arr.length - 1; i >= 0; i--){
			if(arr[i].length > 3){
				displyAnimation(arr[i][0],arr[i][1], arr[i][2]);
				gameData[arr[i][0]][arr[i][1]] = arr[i][2];
				displyAnimation(arr[i][3],arr[i][4],arr[i][5]);
				gameData[arr[i][3]][arr[i][4]] = arr[i][5];
			}else{
				displyAnimation(arr[i][0],arr[i][1]);
				gameData[arr[i][0]][arr[i][1]] = '';
			}
		}
	}
}

// 游戏通过判断
/*
 * e 	当前最高数值
*/
function GameClearance(e){
	if(e == gameOver){
		// 游戏通关
		gameStatus = true;
		//console.log('游戏通关');
		document.getElementsByClassName("game-over")[0].style.display = "block";
		document.getElementsByClassName("game-over-p")[0].innerHTML = "过关成功！";
	}
}

// 游戏运行判断 -- 
/*
 * k 	当前键盘码 	上-下-左-右 | w-s-a-d
*/
function GameKeyTest(k){
	if( gameStatus ){
		document.getElementsByClassName("game-over")[0].style.display = "block";
		return false;
	}
	key = k;
	return true;
}

// 测试是否游戏 已经不能进行下去，结束了
/*
 * x 	x坐标
 * y 	y坐标
 */
function GameTest(x = 0,y = 0){

	let status = true;
	function test(x,y){
		let list = [];
		if(x != 0){
			list.push([x-1,y]);
		}
		if(x != 3){
			list.push([x+1,y]);
		}
		if(y != 0){
			list.push([x,y-1]);
		}
		if(y != 3){
			list.push([x,y+1]);
		}
		for(let i = 0; i < list.length; i++){
			if(gameData[list[i][0]][list[i][1]] == gameData[x][y]){
				return false;
			}
		}
		return true;
	}
	//先执行一次 当前坐标周围值是否一样
	if(status = test(x,y)){
		for(let i = 0; i < gameData.length; i++){
			for(let j = 0; j < gameData[i].length; j++){
				if(!test(i,j)){
					return false;
				}
			}	
		}

		if(status){
			gameStatus = true;
			document.getElementsByClassName("game-over")[0].style.display = "block";
			console.log('game over');
		}
	}
}

// 随机
/*
 * m 	最小值
 * n 	最大值
*/
function Random(m,n){
	return Math.floor(Math.random()*(m - n) + n);
}

// 定位
/*
 * return dom对象
*/
var findDiv = function (){
	return function(x,y){
		try{
			let obj = document.getElementById(x + '-' + y);
			// //console.log(obj);
			return obj;
		}
		catch(err){
			//console.log(err);
			//console.log(x,y);
		}
	}
	
}

// 方块随机出现 -- 
var GameStarts = function (){
	return function(){
		let random,data = [];
		for(let i = 0; i < gameData.length; i++){
			for(let j = 0; j < gameData[i].length; j++){
				if(!gameData[i][j]){
					data.push([i,j]);
				}
			}	
		}

		if(data.length != 0){
			random = Random(0,data.length);
			DisplyAnimation()(data[random][0],data[random][1],2);
			gameData[data[random][0]][data[random][1]] = 2;
			renewCode = true;

			GameAnnal([data[random][0],data[random][1],2]);
		}
		//console.log('x--y -- '+data[random][0],data[random][1]);

		// 判断游戏是否 game over
		if(data.length == 1){

			GameTest(data[random][0],data[random][1]);

		}else if(data.length == 0){
			GameTest();
		}
	}
}

// 游戏开始
function GameStart(){
	let n = 2; //初始个数;
	let i = 0;
	let displyAnimation = DisplyAnimation();
	while(i < n){
		let gameX = Random(0,4);
		let gameY = Random(0,4);

		displyAnimation(gameX ,gameY,2);

		gameData[gameX][gameY] = 2;
		i++;
	}
}

// 按钮 -- 游戏重新开始
function BtnGameStart(){
	gameData = [['','','',''],['','','',''],['','','',''],['','','','']];
	gameAnnal = [];
	let arr = document.getElementsByClassName("game-game")[0].getElementsByClassName("game-group-block");
	for(v in arr){
		arr[v].innerHTML = '';
		arr[v].className = block;
	}
	GameStart();
}

// 按钮 -- 再来一局
function BtnGameStarts(){
	document.getElementsByClassName("game-over")[0].style.display = "none";
	document.getElementsByClassName("game-over-p")[0].innerHTML = "Game Over";

	BtnGameStart();
}

Ready();	// 样式准备

GameStart();	// 游戏开始
document.addEventListener("keydown", function (event) {
	if(GameKeyTest(event.keyCode)){
		switch(event.keyCode){
			case 37:
			case 65:
				//console.log('left'); 
				GameInit(0,1);				
				break;
			case 38:
			case 87:
				//console.log('top'); 
				GameInit(1,1);
				break;
			case 39:
			case 68:
				//console.log('right');
				GameInit(0,-1);
				break;
			case 40:
			case 83:
				//console.log('bottom');
				GameInit(1,-1);
				break;
			default:
				break;
		}
	}
});
『空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web开发项目 # 2048小游戏
skysys的研究小屋
11-08 2715
游戏规则 每次控制所有方块向同一个方向运动，两个相同数字的方块撞在一起之后合并成为他们的和，每次操作之后会在空白的方格处随机生成一个2或者4，最终得到一个“2048”的方块就算胜利了。如果16个格子全部填满并且相邻的格子都不相同也就是无法移动的话，那么恭喜你gameover。 *上面似乎也很多细节没有提到(这个给用户看足够了，对开发者来说还有一些小细节) 比方说3个方块2,2,4,0要连续合并吗?...
html+css+javascript 实现小游戏 2048
10-15
《使用HTML+CSS+JavaScript实现2048小游戏详解》 在数字娱乐和教育领域，2048小游戏因其简洁的界面和上瘾的游戏机制，受到了广泛的欢迎。它是一款基于数字合成的智力游戏，玩家通过滑动屏幕使相同数字的方块合并，...
JS与HTML、CSS实现2048小游戏（一）
池子的学习分享
12-12 5551
JS与HTML、CSS实现2048小游戏（一）引言知识储备功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 引言 这是大...
js实现2048
∑
05-22 577
HTML： <div id="score"> 0 </div> <div id="game"> </div> <a href="javascript:history.go(0);" id="reset"> 重新开始 </a> JavaScript： $(function() { //初始化 function reset() { _start = 0; _score = 0; Garr = ..
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
h5+js+css 2048.zip
06-13
《使用H5+JS+CSS实现2048游戏详解》 2048是一款深受玩家喜爱的数字拼图游戏，其简洁的界面和有趣的玩法吸引了大量用户。在这个项目中，我们将探讨如何利用HTML5（H5）、JavaScript（JS）和CSS这三种核心技术来实现...
html+css+js实现2048小游戏完整代码
08-17
html+css+js实现2048小游戏完整代码，内含音乐播放器
js+html+css 游戏
03-18
在“star-battle-master”这个压缩包中，我们可以期待找到这个游戏的源代码文件，包括HTML文件（可能以.html为扩展名），CSS文件（可能以.css为扩展名）以及JavaScript文件（可能以.js为扩展名）。开发者可能还使用...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 3906
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 892
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
css性能优化的方法
最新发布
jht_520的博客
07-21 93
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
拖拽上传（预览图片）
喵喵的博客
07-18 479
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 757
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
PeacefulWinter的博客
07-18 1413
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。
CSS基础学习之元素定位（6）
07-17 637
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
只用 CSS 能玩出什么花样？
艾恩小灰灰的博客
07-17 1096
CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能，我们不仅能够构建美观且功能性的网站，还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画，CSS 提供了无尽的可能性，等待着每一位前端开发者去探索和实现。以上代码示例展示了 CSS 的部分能力，但真正的乐趣在于实验和创造。所以，拿起你的代码编辑器，开始探索 CSS 的无限可能性吧！
Tailwind CSS常见用法
solocao的专栏
07-18 244
Tailwind CSS允许在tailwind.config.js配置文件中自定义样式，如颜色、字体大小、边框宽度等。然后，这些自定义样式可以在HTML中通过类名引用，如text-custom-size。
Web响应式设计———1、Grid布局
Violetto_Yan的博客
07-21 220
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
html基础知识学习
m0_56363537的博客
07-16 902
html基础知识了解，笔记测试使用，仅供参考
HTML+css+JavaScript小游戏
05-30
这里提供一个基于 HTML、CSS 和 JavaScript 的小游戏，是一个打地鼠的游戏： HTML 部分： ```html <!DOCTYPE html> <html> <head> <title>打地鼠游戏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>打地鼠游戏</h1> <div class="game-box"> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> </div> <button onclick="startGame()">开始游戏</button> <script src="script.js"></script> </body> </html> ``` CSS 部分： ```css .game-box { display: flex; flex-wrap: wrap; width: 300px; margin: 20px auto; } .hole { width: 80px; height: 80px; background-image: url('mole.png'); background-size: contain; background-repeat: no-repeat; background-position: center; margin: 10px; cursor: pointer; opacity: 0; transition: opacity 0.3s; } .hole.up { opacity: 1; } ``` JavaScript 部分： ```javascript var holes = document.querySelectorAll('.hole'); var score = 0; var isPlaying = false; function startGame() { if (isPlaying) { return; } isPlaying = true; score = 0; // 清除所有地鼠的状态 holes.forEach(hole => hole.classList.remove('up')); // 开始游戏 playGame(); } function playGame() { var time = Math.round(Math.random() * (1500 - 500) + 500); var hole = holes[Math.floor(Math.random() * holes.length)]; hole.classList.add('up'); setTimeout(function() { hole.classList.remove('up'); if (isPlaying) { playGame(); } }, time); } function whack(e) { if (!e.isTrusted) { return; } score++; this.classList.remove('up'); // 更新分数 document.getElementById('score').textContent = score; } holes.forEach(hole => hole.addEventListener('click', whack)); ``` 这个游戏的原理是随机在 6 个洞里面弹出地鼠，玩家需要在规定时间内点击地鼠，每次点击得分加 1 分。游戏结束后可以重新开始。其中，`mole.png` 是地鼠的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值