HTML + CSS + JS 写出简单2048游戏

最新推荐文章于 2023-10-15 20:32:30 发布
最新推荐文章于 2023-10-15 20:32:30 发布
阅读量835 收藏 7
点赞数 6
分类专栏： 前端小项目 文章标签： js-2048游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40855199/article/details/84797846
版权

HTML + CSS + JS 写出简单2048游戏

在这里插入代码片
/*html 代码：*/

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>2048游戏</title>
		<style>
			.container{
				width: 600px;
				height: 600px;
				border: 2px solid #000;
				background-color: white;
				margin: auto;
			}

			.header{
				font: bold 40px arial;
				margin-left: 80px;
			}
			.header span, #gameOver span{
				color: red;
			}
			
			#gameBody{
				width: 450px;
				height: 450px;
				margin-left: 80px;
				padding: 5px 0 0 5px;
				border-radius: 10px;
				background-color: #bbada0;
			}
			
			.cell{
				width: 100px;
				height: 100px;
				margin: 5px;
				background-color: #ccc0b3;
				border-radius: 5px;
				float: left;
				font: 50px/100px arial;
				text-align: center;
			}
			
			.n2{background-color: #eee3da}
			.n4{background-color: #ede0c8}
			.n8{background-color: #f2b179}
			.n16{background-color: #f59563}
			.n32{background-color: #f67c5f}
			.n64{background-color: #f65e3b}
			.n128{background-color: #edcf72}
			.n256{background-color: #edcc61}
			.n512{background-color: #9c0}
			.n1024{background-color: #33b5e5}
			.n2048{background-color: #09c}
			.n4096{background-color: #a6c}
			.n8192{background-color: #93c}
			.n2,.n4{color: #776e65}
			.n1024,.n2048,.n4096,.n8192{font-size: 40px}
			
			
			#gameOver{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background:rgba(55,55,55,0.5);
			}
			
			#gameOver p{
				width: 300px;
				height: 200px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -100px 0 0 -150px;
				text-align: center;
				border-radius: 10px;
				border: 1px solid #edcf72;
				font: bold 40px/65px arial;
				background: #fff;
			}
			
			#gameOver .btn{
				padding: 10px;
				color:#fff;
				background: #9f8d77;
				border-radius: 6px;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p class="header">SCORE:<span id="score">0</span></p>
			<div id="gameBody">
						<div  class="cell" id="cell-00"></div>
						<div  class="cell" id="cell-01"></div>
						<div  class="cell" id="cell-02"></div>
						<div  class="cell" id="cell-03"></div>
						<div  class="cell" id="cell-10"></div>
						<div  class="cell" id="cell-11"></div>
						<div  class="cell" id="cell-12"></div>
						<div  class="cell" id="cell-13"></div>
						<div  class="cell" id="cell-20"></div>
						<div  class="cell" id="cell-21"></div>
						<div  class="cell" id="cell-22"></div>
						<div  class="cell" id="cell-23"></div>
						<div  class="cell" id="cell-30"></div>
						<div  class="cell" id="cell-31"></div>
						<div  class="cell" id="cell-32"></div>
						<div  class="cell" id="cell-33"></div>
			</div>
			<div id="gameOver">
				<p>
					GAME OVER<br>
					SCORE:<span id="final">0</span><br>
					<a href="javascript:game.start();" class="btn">TRY AGAIN!</a>
				</p>
			</div>
		</div>
		
		<script>
			//创建对象：属性+方法
			var game = {
				//数组，保存数据
				data:[],
				//游戏得分：0
				score:0,
				//设置游戏状态：1-开始，0-结束
				state:1,
				//游戏状态：开始
				RUNNING:1,
				//游戏状态：结束
				GAMEOVER:0,
				
				//游戏开始start()方法
				start:function(){
					//设置游戏状态为开始
					this.state=this.RUNNING;
					//初始化游戏得分为0
					this.score=0;
					//创建一个二维数组
					for(var r = 0; r < 4; r++){
						//创建一个一维数组，
						var datacell = [];
						//将一维数组值初始化为0
						for(var c = 0;c < 4; c++){
							datacell[c] = 0;
						}
						//将一维数组的值循环赋给数组data[],成功创建一个二维数组
						this.data[r] = datacell;
					}
					
					//调用函数随机生成两个数
					this.randomNum();
					this.randomNum();
					//刷新页面，显示div的值
					this.updateView();
				},
				
				//随机生成两个数4或2
				randomNum:function(){
					while(true){
						var r=Math.floor(Math.random()*this.data.length);
						var c=Math.floor(Math.random()*this.data.length);
						if(this.data[r][c]==0){
							//随机生成2和4的概率相等
							this.data[r][c]=Math.random()<0.5?2:4;
							break;
						}
					}
				},
				
				updateView:function(){
					for(var r=0;r<this.data.length;r++){
						for(var c=0;c<this.data.length;c++){
							//判断数组中的数据，为0则不做任何操作，保持原来数据和类名不变
							//动态获取标签的id：要求取id名时与数组下角标相对应
							if(this.data[r][c]==0){
								document.getElementById("cell-"+r+c).innerHTML="";
								document.getElementById("cell-"+r+c).className="cell";
							}else{
								//不为0，则将数组中数据显示在对应的div格子中
								document.getElementById("cell-"+r+c).innerHTML= this.data[r][c];
								//保持原来类名不变，并追加对应div类名（动态）
								document.getElementById("cell-"+r+c).className="cell n" + this.data[r][c];
								
							}
						}
					}
					//将分数显示在界面上方
					document.getElementById("score").innerHTML=this.score;
					var gameOver=document.getElementById("gameOver");
					if(this.state==this.GAMEOVER){
						//如果状态为GAMEOVER（即0，表示游戏结束，显示结束界面，并将最后分数显示在结束界面
						gameOver.style.display="block";
						document.getElementById("final").innerHTML=this.score;
					}else{
						//如果状态为1，表示游戏还未结束，隐藏结束界面
						gameOver.style.display="none";
					}
				},
				
				//向左移动所有行
				moveLeft:function(){
					//判断字符串是否移动
					//做移动操作前先将数组转换为字符串保存
					var before=String(this.data);
					//遍历行
					for(var r=0;r<this.data.length;r++){
						this.moveLeftRow(r);
					}
					//做移动操作后先将数组转换为字符串保存
					var after=String(this.data);
					//将移动操作前后的数组(字符串)作比较，如果不相等，即发生改变，则随机生成一个数
					if(before!=after){
						this.randomNum();
						//随机生成一个数后，判断游戏是否结束，设置游戏状态
						if(this.isGameOver()){
							this.state=this.GAMEOVER;
						}
						//游戏未结束刷新页面，再显示随机生成数
						this.updateView();
					}
				},
				
				//判断并向左移动指定行中的每个元素
				moveLeftRow:function(r){
					//0开始，遍历r行中每一个元素
					for(var c=0;c<this.data.length-1;c++){
						//获得当前元素下一个不为0的元素的下标nextc
						var nextc=this.getNextRow(r,c)
						//如果nextc=-1，说明右侧没有元素了，退出循环
						if(nextc==-1) {
							break;
						}else if(this.data[r][c]==0){   //如果自己==0 则将下一个位置放入当前位置，下一个位置设置为零
							this.data[r][c]=this.data[r][nextc];
							this.data[r][nextc]=0;
							//重新检查
							c--;
						}else if(this.data[r][c]==this.data[r][nextc]){// 如果当前位置的值==nextc的位置的值，将当前位置*=2;下一个位置设置为0
							this.data[r][c]*=2;
							//将当前值累加到score属性上
							this.score+=this.data[r][c];
							this.data[r][nextc]=0;
						}
					}
				},
				
				//找当前位置右侧，下一个不为0的数
				getNextRow:function(r,c){
					//从c+1 遍历row行中剩余元素，
					for(var i=c+1;i<this.data.length;i++){
						//如果出现不为0的值，返回它的列数
						if(this.data[r][i]!=0) {
							return i;
						}
					}
					//循环退出返回-1
					return -1;
				},
					
					
				//向右移动所有行	
				moveRight:function(){
					var before=String(this.data);
					for(var r=0;r<this.data.length;r++){
						this.moveRightRow(r);
					}
					var after=String(this.data);
					if(before!=after){
						this.randomNum();
						if(this.isGameOver()){
							this.state=this.GAMEOVER;
						}
						this.updateView();
					}
				},
			
				moveRightRow:function(r){
					for(var c=this.data.length-1;c>0;c--){
						var prec=this.getPreRow(r,c)
						if(prec==-1){
							break;
						}else if(this.data[r][c]==0){
							this.data[r][c]=this.data[r][prec];
							this.data[r][prec]=0;
							c++;
						}else if(this.data[r][c]==this.data[r][prec]){
							this.data[r][c]*=2;
							this.score+=this.data[r][c];
							this.data[r][prec]=0;
						}
					}
				},
				
				getPreRow:function(r,c){
					for(var i=c-1;i>=0;i--){
						if(this.data[r][i]!=0) return i;	
						}
						return -1;
				},
					
				moveUp:function(){
					var before=String(this.data);
					for(var c=0;c<this.data.length;c++){
						this.moveUpCol(c);
					}
					var after=String(this.data);
					if(before!=after){
						this.randomNum();
						if(this.isGameOver()){
							this.state=this.GAMEOVER;
						}
						this.updateView();
					}
				},
				
				//向上移动所有列
				moveUpCol:function(c){
					for(var r=0;r<this.data.length-1;r++){
						var nextr=this.getNextCol(r,c)
						if(nextr==-1) {break;
						}else if(this.data[r][c]==0){
							this.data[r][c]=this.data[nextr][c];
							this.data[nextr][c]=0;
							r--;
						}else if(this.data[r][c]==this.data[nextr][c]){
						this.data[r][c]*=2;
						this.score+=this.data[r][c];
						this.data[nextr][c]=0;
					}
					}
				},
					
				getNextCol:function(r,c){
					for(var i=r+1;i<this.data.length;i++){
						if(this.data[i][c]!=0) return i;	
					}
					return -1;
				},
				
				//向下移动所有列
				moveDown:function(){
					var before=String(this.data);
					for(var c=0;c<this.data.length;c++){
						this.moveDownCol(c);
					}
					var after=String(this.data);
					if(before!=after){
						this.randomNum();
						if(this.isGameOver()){
							this.state=this.GAMEOVER;
						}
						this.updateView();
					}
				},
				
				moveDownCol:function(c){
					for(var r=this.data.length-1;r>0;r--){
						var prer=this.getPreCol(r,c)
						if(prer==-1) {
							break;
						}
						else if(this.data[r][c]==0){
							this.data[r][c]=this.data[prer][c];
							this.data[prer][c]=0;
							r++;
						}else if(this.data[r][c]==this.data[prer][c]){
							this.data[r][c]*=2;
							this.score+=this.data[r][c];
							this.data[prer][c]=0;
						}
					}
				},
				
				getPreCol:function(r,c){
					for(var i=r-1;i>=0;i--){
						if(this.data[i][c]!=0) return i;	
					}
					return -1;
				},
				
				isGameOver:function(){
					//游戏结束条件：
					//1.数组中所有数据均不为0；
					//2.数组中每一行数据相邻位置值不相等
					//3.数组中每一列数据相邻位置值不相等
					for(var c=0;c<this.data.length;c++){
						for(var r=0;r<this.data.length;r++){
							//判断所有不为0
							if(this.data[r][c]==0){
								return false;
							}
							if(c<3){
								if(this.data[r][c]==this.data[r][c+1]){
									return false;
								}
							}
							if(r<3){
								if(this.data[r][c]==this.data[r+1][c]){
									return false;
								}
							}
						}
					}
					return true;
				}
			}
			
			//调用函数开始游戏
			game.start();
			document.onkeydown=function(event){
				//按下左键或者字母键a，向左移动
				if(event.keyCode==37 || event.keyCode==65 ){
					game.moveLeft();
				}
				//按下向上键或者字母键w，向上移动
				if(event.keyCode==38 || event.keyCode==87 ){
					game.moveUp();
				}
				//按下右键或者字母键d，向右移动
				if(event.keyCode==39 || event.keyCode==68 ){
					game.moveRight();
				}
				//按下向下键或者字母键s，向下移动
				if(event.keyCode==40 || event.keyCode==83 ){
					game.moveDown(); 
				}
				//按下空格键重新开始游戏
				if(event.keyCode==32 ){
					game.start();
				}
				
			}
			
		</script>
	</body>
</html>!

游戏开始界面
游戏结束界面

DearWu1226
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个简单HTML游戏网页（HTML+CSS）仿龙之谷网络游戏官网
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
创建一个HTML小游戏
weixin_42613018的博客
02-18 656
好的，要创建一个HTML小游戏，你需要熟悉HTML、CSS和JavaScript三种语言。 首先，你需要创建一个HTML文件。在文件中，你可以使用HTML标签来定义游戏的框架和布局。 接下来，你可以使用CSS来设计游戏的外观和风格。你可以使用CSS来控制文本的颜色、大小和字体，以及页面的背景色、边框和其他元素的布局。 最后，你可以使用JavaScript来控制游戏的逻辑和行为。你可以使用JavaS...
基于html+js编写的生命游戏
haohulala的博客
10-15 359
本文将介绍一个基于html+js的生命游戏，该项目只有一个html代码，无任何其他以来，UI方面采用了vue+element-plus进行渲染，游戏的界面基于canvas进行渲染，先来看一下成果。我不知道游戏规则有没有写错，感觉经常会陷入循环中。本次项目可以算是对canvas的简单应用吧，我发现其实可以用canvas做很多东西，甚至可以用来制作一些简单的2D游戏，不过如果要做游戏的话，可能需要自己实现一下逻辑，还是挺复杂的。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
用html写游戏,Html5写一个简单的俄罗斯方块小游戏
weixin_36285931的博客
05-30 2375
导言在一个风和日丽的一天，看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏，并做了一些改进，作为自己前端学习的第一站。游戏效果：制作思路因为书里的俄罗斯方块比较普通，太常规了，不是很好看，所以我在网上找了上面那张图片，打算照着它来做。(请无视成品和原图的差距)然后便是游戏界面和常规的俄罗斯方块游戏逻辑。接着便是游戏结束界面了。原本想做个弹出层，但...
HTML+CSS+JavaScript实现2048游戏
weixin_43396749的博客
11-24 729
HTML+CSS+JavaScript实现2048游戏
使用html + css 写出一个政府网页.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
学生信息管理系统(html + js + css)
07-01
HTML负责内容，CSS负责表现，JavaScript负责行为，三者结合，构建出功能完备且用户体验良好的学生信息管理系统。同时，这个项目也锻炼了开发者对DOM操作、事件处理、数据序列化等前端技术的掌握，以及对前后端交互的...
HTML+CSS+JS-入门基础ppt课件.ppt
11-19
HTML+CSS+JS入门基础知识点 HTML 是一种超文本标记语言，用于设计网页的主要语言。 HTML 文档的扩展名是 .html 或 .htm，使用记事本或可视化 HTML 编辑器可以编写 HTML 代码。 HTML 文档的结构主要包括和两个...
web前端(html+css+js)简单的仿原神官网静态项目
05-29
简单的前端小项目，偶然找到的大一时写的作业 使用了html+css+js 仅实现了部分功能：轮播图，播放音乐，视频，返回首页等 演示视频：https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议...
springboot+css+js+html Demo
01-20
本Demo将详细讲解如何利用SpringBoot整合CSS、JS和HTML，以创建一个简单的Web应用。 首先，让我们了解SpringBoot的核心理念。SpringBoot旨在简化Spring应用的初始搭建以及开发过程，它通过内嵌Tomcat服务器、自动...
利用Html开发简单游戏,HTML5与Canvas做一个简单的Sokoban游戏
weixin_36348900的博客
05-30 593
【IT168技术】在简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏之后，我们现在需要写一个简单的Sokoban游戏。游戏的玩法是：将所有的箱子移动到指定标识的区域，游戏就结束了。游戏规则是：箱子只能推，不能拉一次只能移动一个箱子我们需要创建以下JavaScript类：•主要 “Game” 类•“Map” 表示•Player•Map ...
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 9770
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
html游戏怎么做,HTML5 制做“游戏”的一个基本流程
weixin_29623481的博客
05-31 5515
怎样用HTML5 Canvas制作一个简单的游戏为了让大家清楚HTML5制作游戏的简单流程，所以先了制作一个非常简单的游戏，来看一看这个过程。游戏非常简单，无非就是英雄抓住怪物就得分，然后游戏重新开始，怪物出现在地图的随机位置，英雄初始化在地图的中间。点击这里，我们可以直接先玩玩这个游戏1. 创建一个Canvas对象这里相信大家都知道，当然代码里面是通过JS动态创建的画布，大家也可以直接在HTML...
JavaScript实现2048小游戏，我终于赢了一把
热门推荐
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
原生js实现2048（启发向）
weixin_63087450的博客
03-25 619
2048是一个不错的练手项目，因为它涵盖了不少js，css的知识，同时也包含了简单的游戏逻辑，这个项目的完成对我来说收获颇丰。他让我见见理解了游戏的构成，和一些看似简单的东西复杂的一面。我会虚心接纳各位的建议，对不足之处进行修改。
写一个HTML小游戏
weixin_42602241的博客
02-10 158
好的，这里是一个简单的 HTML 小游戏的例子。首先，我们需要创建一个 HTML 文件，打开文本编辑器，然后输入以下代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的小游戏</title> </head> <body&g...
编一个html游戏出来
weixin_35755640的博客
02-09 129
<p>好的，我来给你编写一个简单的 HTML 游戏的示例代码。</p> <p>首先，需要创建一个 HTML 文件，在文件中引入 JavaScript 脚本，并使用 HTML 元素和 CSS 样式来显示游戏界面。</p> <p>例如，可以使用 HTML 的 <code>div</code> 元素来创建游戏区域，使用 ...
html做的小游戏,41个用HTML5制作完成的游戏作品
weixin_32129187的博客
05-30 9561
了解的人都应该知道HTML5有大量的动画和交互功能，完全可以用来完成一些游戏类的操作，今天收集分享：41个用HTML5制作完成的游戏作品，希望其中有你喜欢和需要的，或者可以给你带来灵感的。1-Pirateslovedaisies2-Torus3-Blobby4-Blinkwang5-space pirat killer6-Agent 8 ball7-sketch out8-Manic Space ...
使用简单的html+css+js写出一个计算器程序
06-08
以下是一个简单的计算器程序的HTML、CSS和JS代码： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <title>Calculator <link rel="stylesheet" href="style.css"> <div class="display"></div> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值