心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

JavaScript实现2048小游戏，我终于赢了一把

发布时间：2022-07-06 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript实现2048小游戏，我终于赢了一把，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

JavaScript实现2048小游戏

作者简介

作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

系列目录

1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘

效果图

JavaScript实现2048小游戏，我终于赢了一把

实现思路

  1. 编写页面和画布代码。
  2. 绘制背景。
  3. 绘制好全部卡片。
  4. 随机生成一个卡片（2或者4）。
  5. 键盘事件监听（上、下、左、右键监听）。
  6. 根据键盘的方向，处理数字的移动合并。
  7. 加入成功、失败判定。
  8. 处理其他收尾工作。

代码实现

编写页面代码

<!DOCTYPE htML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inITial-scale=1.0">
    <title>2048</title>
    <style>
        #box{
           width:370px;
           height:370px;
           position:absolute;
           margin:0 auto;
           left:0;
           right:0;
           top:1px;
           bottom:0;
       }

       .rebutton{
        position: absolute;
        top:370px;
        left:38%;
       }
       </style>
</head>
<body>
    <div id='box'></div>
    <button onclick="restart()" class='rebutton'>重开</button>
</body>
<script src="js/util.js"></script>
<script src="js/2048.js"></script>
<script type="text/javascript">

   </script>
</html>

添加画布

在2048.js编写代码

  1. 创建函数
function G2048(){
	this.renderArr=[];//渲染数组
	this.cards=initCardArray();
	//游戏标记
	this.flag='start';
}
//初始化数组
function initCardArray(){
	VAR cards = new Array();
	for (var i = 0; i < 4; i++) {
		cards[i] = new Array();
		for (var j = 0; j < 4; j++) {
			//cards[i][j]=null;
		}
	}
	return cards;
}
  1. 初始化和绘制背景代码（在2048.js中编写）
//初始化
    G2048.PRototype.init=function(el,musicObj){
        if(!el) return ;
		this.el=el;
		var canvas = document.createElement('canvas');//创建画布
		canvas.style.cssText="background:white;";
		var W = canvas.width = 370; //设置宽度
		var H = canvas.height = 370;//设置高度
		
		el.appendChild(canvas);//添加到指定的dom对象中
		this.ctx = canvas.getContext('2d');
		
		this.draw();
	}
    //绘制入口
    G2048.prototype.draw=function(){
		//创建背景
		this.drawGB();

	    //渲染到页面上
		this.render();

	}

	//创建背景
	G2048.prototype.drawGB=function(){
		var bg = new _.Rect({x:0,y:0,width:364,height:364,fill:true,fillStyle:'#428853'});
		this.renderArr.push(bg);
	}

	//渲染图形
	G2048.prototype.render=function(){
		var context=this.ctx;
		this.clearCanvas();	
		_.each(this.renderArr,function(item){
			item && item.render(context);
		});
	}
	//清洗画布
	G2048.prototype.clearCanvas=function() {
		this.ctx.clearRect(0,0,parseInt(this.w),parseInt(this.h));
	}
  1. 在页面代码中加入以下 js 代码
var box = document.getElementById('box');
g2048.init(box);

JavaScript实现2048小游戏，我终于赢了一把

运行效果：

JavaScript实现2048小游戏，我终于赢了一把

绘制好全部卡片

  1. 创建Card
//定义Card
function Card(i,j){
	this.i=i;//下标i
	this.j=j;//下标j
	this.x=0;// x坐标
	this.y=0;// y坐标
	this.h=80;//高
	this.w=80;//宽
	this.start=10;//偏移量（固定值）
	this.num=0;//显示数字
	this.merge=false;//当前是否被合并过，如果合并了，则不能继续合并，针对当前轮
	//初始化创建
	this.obj = this.init();
	//创建显示数字对象
	this.numText = this.initNumText();
} 
//初始创建
Card.prototype.init=function(){
	return new _.Rect({x:this.x,y:this.y,width:this.w,height:this.h,fill:true});
}
//根据i j计算x y坐标
Card.prototype.cal=function(){
	this.x = this.start + this.j*this.w + (this.j+1)*5;
	this.y = this.start + this.i*this.h + (this.i+1)*5;
	//更新给obj
	this.obj.x=this.x;
	this.obj.y=this.y;
	//设置填充颜色
	this.obj.fillStyle=this.getColor();

	//更新文字的位置
	this.numText.x = this.x+40;
	this.numText.y = this.y+55;
	this.numText.text=this.num;
}
//初始化显示数字对象
Card.prototype.initNumText=function(){
	var font = "34px 思源宋体";
	var fillStyle = "#7D4E33";
	return new _.Text({x:this.x,y:this.y+50,text:this.num,fill:true,textAlign:'center',font:font,fillStyle:fillStyle});
}
//获取color
Card.prototype.getColor=function(){
	var color;
	//根据num设定颜色
	switch (this.num) {
	case 2:
		color = "#EEF4EA";
		break;
	case 4:
		color = "#DEECC8";
		break;
	case 8:
		color = "#AED582";
		break;
	case 16:
		color = "#8EC94B";
		break;
	case 32:
		color = "#6F9430";
		break;
	case 64:
		color = "#4CAE7C";
		break;
	case 128:
		color = "#3CB490";
		break;
	case 256:
		color = "#2D8278";
		break;
	case 512:
		color = "#09611A";
		break;
	case 1024:
		color = "#f2B179";
		break;
	case 2048:
		color = "#DFB900";
		break;

	default://默认颜色
		color = "#5C9775";
		break;
	}
	
	return color;
}

Card.prototype.render=function(context){
	//计算坐标等
	this.cal();
	//执行绘制
	this.obj.render(context);
	//是否绘制文字的处理
	if(this.num!=0){
		this.numText.render(context);
	}
}

}
  1. 创建卡片
	//创建卡片
	G2048.prototype.drawCard=function(){
		var that=this;
		var card;
		for (var i = 0; i < 4; i++) {
			for (var j = 0; j < 4; j++) {
				card = new Card(i,j);
				that.cards[i][j]=card;
				that.renderArr.push(card);
			}
		}
	}
  1. 调用绘制代码

    JavaScript实现2048小游戏，我终于赢了一把

    运行效果：

    JavaScript实现2048小游戏，我终于赢了一把

  2. 修改一下卡片的默认数字

    JavaScript实现2048小游戏，我终于赢了一把

JavaScript实现2048小游戏，我终于赢了一把

随机生成一个卡片，2或者4

  1. 先把Card中 num 默认改成0
  2. 因为2跟4出现的比例是1:4，所以采用随机出1-5的数字，当是1的时候就表示，当得到2、3、4、5的时候就表示要出现数字2.
  3. 随机获取i，j 就可以得到卡片的位置，割接i，j取到card实例，如果卡片没有数字，就表示可以，否则就递归继续取，取到为止。
  4. 把刚才取到的数字，设置到card实例对象中就好了。

代码如下：

//随机创建一个卡片
	G2048.prototype.createRandomNumber=function(){
		var num = 0;
		var index = _.getRandom(1,6);//这样取出来的就是1-5 之间的随机数
		//因为2和4出现的概率是1比4，所以如果index是1，则创建数字4，否则创建数字2(1被随机出来的概率就是1/5，而其他就是4/5 就是1：4的关系)
		console.LOG('index==='+index)
		if(index==1){
			num = 4;
		}else {
			num = 2;
		}
		//判断如果格子已经满了，则不再获取，退出
		if(this.cardFull()){
			return ;
		}
		//获取随机卡片，不为空的
		var card = this.getRandomCard();
		//给card对象设置数字
		if(card!=null){
			card.num=num;
		}
	}
	//获取随机卡片，不为空的
	G2048.prototype.getRandomCard=function(){
		var i = _.getRandom(0,4);
		var j = _.getRandom(0,4);
		var card = this.cards[i][j];
		if(card.num==0){//如果是空白的卡片，则找到了，直接返回
			return card;
		}
		//没找到空白的，就递归，继续寻找
		return this.getRandomCard();
	}
	//判断格子满了
	G2048.prototype.cardFull=function() {
		var card;
		for (var i = 0; i < 4; i++) {
			for (var j = 0; j < 4; j++) {
				card = this.cards[i][j];
				if(card.num==0){//有一个为空，则没满
					return false;
				}
			}
		}		
		return true;
	}

draw方法中调用，表示打开游戏默认一个数字

JavaScript实现2048小游戏，我终于赢了一把

运行效果：

JavaScript实现2048小游戏，我终于赢了一把

加入键盘事件

同样要在draw方法中调用哦

	//按键的控制
	G2048.prototype.control=function(){
		var that=this;
		global.addEventListener('keydown',function(e){
			console.log(that.flag)
			if(that.flag!='start') return ;
			var dir;
			switch (e.keyCode){
				case 87://w
				case 38://上
					dir=1;//上移动
					break;
				case 68://d
				case 39://右
					dir=2;//右移动
					break;
				case 83://s
				case 40://下
					dir=3;//下移动
					break;
				case 65://a
				case 37://左
					dir=4;//左移动
					break;
			}
			//卡片移动的方法
			that.moveCard(dir);
		});
	}
  1. 加入移动逻辑处理代码
//卡片移动的方法
	G2048.prototype.moveCard=function(dir) {
		//将卡片清理一遍，因为每轮移动会设定合并标记，需重置
		this.clearCard();
		
		if(dir==1){//向上移动
			this.moveCardTop(true);
		}else if(dir==2){//向右移动
			this.moveCardRight(true);
		}else if(dir==3){//向下移动
			this.moveCardBottom(true);
		}else if(dir==4){//向左移动
			this.moveCardLeft(true);
		}
		//移动后要创建新的卡片
		this.createRandomNumber();
		//重绘
		this.render();
		//判断游戏是否结束
		this.gameOverOrNot();
	}

	//将卡片清理一遍，因为每轮移动会设定合并标记，需重置
	G2048.prototype.clearCard=function() {
		var card;
		for (var i = 0; i < 4; i++) {//i从1开始，因为i=0不需要移动
			for (var j = 0; j < 4; j++) {
				card = this.cards[i][j];
				card.merge=false;
			}
		}
	}
  1. 加入上下左右处理逻辑
//向上移动
	G2048.prototype.moveCardTop=function(bool) {
		var res = false;
		var card;
		for (var i = 1; i < 4; i++) {//i从1开始，因为i=0不需要移动
			for (var j = 0; j < 4; j++) {
				card = this.cards[i][j];
				if(card.num!=0){//只要卡片不为空，要移动
					if(card.moveTop(this.cards,bool)){//向上移动
						res = true;//有一个为移动或者合并了，则res为true
					}
				}
			}
		}
		return res;
	}
	//向右移动
	G2048.prototype.moveCardRight=function(bool) {
		var res = false;
		var card;
		for (var i = 0; i < 4; i++) {
			for (var j = 3; j >=0 ; j--) {//j从COLS-1开始，从最右边开始移动递减
				card = this.cards[i][j];
				if(card.num!=0){//只要卡片不为空，要移动
					if(card.moveRight(this.cards,bool)){//向右移动
						res = true;//有一个为移动或者合并了，则res为true
					}
				}
			}
		}
		return res;
	}
	
	//向下移动
	G2048.prototype.moveCardBottom=function(bool) {
		var res = false;
		var card;
		for (var i = 3; i >=0; i--) {//i从ROWS-1开始，往下递减移动
			for (var j = 0; j < 4; j++) {
				card = this.cards[i][j];
				if(card.num!=0){//只要卡片不为空，要移动
					if(card.moveBottom(this.cards,bool)){//下移动
						res = true;//有一个为移动或者合并了，则res为true
					}
				}
			}
		}
		return res;
	}
	
	//向左移动
	G2048.prototype.moveCardLeft=function(bool) {
		var res = false;
		var card;
		for (var i = 0; i < 4; i++) {
			for (var j = 1; j < 4 ; j++) {//j从1开始，从最左边开始移动
				card = this.cards[i][j];
				if(card.num!=0){//只要卡片不为空，要移动
					if(card.moveLeft(this.cards,bool)){//向左移动
						res = true;//有一个为移动或者合并了，则res为true
					}
				}
			}
		}
		return res;
	}
  1. 在Card中加入向上移动的处理逻辑
  1. 从第2行开始移动，因为第一行不需要移动。
  2. 只要卡片的数字不是0，就表示要移动。
  3. 根据 i-1 可以获取到上一个卡片，如果上一个卡片是空，则把当前卡片交换上去，并且递归，因为可能要继续往上移动。
  4. 如果当前卡片与上一个卡片是相同数字的，则要合并。
  5. 以上两种都不是，则不做操作。
//卡片向上移动
	Card.prototype.moveTop=function(cards,bool) {
		var i=this.i;
		var j=this.j;
		//设定退出条件
		if(i==0){//已经是最上面了
			return false;
		}
		//上面一个卡片
		var prev = cards[i-1][j];
		if(prev.num==0){//上一个卡片是空
			//移动，本质就是设置数字
			if(bool){//bool为true才执行，因为flase只是用来判断能否移动
				prev.num=this.num;
				this.num=0;
				//递归操作（注意这里是要 prev 来 move了）
				prev.moveTop(cards,bool);
			}
			return true;
		}else if(prev.num==this.num &amp;& !prev.merge){//合并操作（如果已经合并了，则不运行再次合并，针对当然轮）
			if(bool){bool为true才执行
				prev.merge=true;
				prev.num=this.num*2;
				this.num=0;
			}
			return true;
		}else {//上一个的num与当前num不同，无法移动，并退出
			return false;
		}
	}

JavaScript实现2048小游戏，我终于赢了一把

  1. 在Card中加入其他3个方向的代码
//向下移动
	Card.prototype.moveBottom=function(cards,bool) {
		var i=this.i;
		var j=this.j;
		//设定退出条件
		if(i==3){//已经是最下面了
			return false;
		}
		//上面一个卡片
		var prev = cards[i+1][j];
		if(prev.num==0){//上一个卡片是空
			//移动，本质就是设置数字
			if(bool){//bool为true才执行，因为flase只是用来判断能否移动
				prev.num=this.num;
				this.num=0;
				//递归操作（注意这里是要 prev 来 move了）
				prev.moveBottom(cards,bool);
			}
			return true;
		}else if(prev.num==this.num && !prev.merge){//合并操作（如果已经合并了，则不运行再次合并，针对当然轮）
			if(bool){bool为true才执行
				prev.merge=true;
				prev.num=this.num*2;
				this.num=0;
			}
			return true;
		}else {//上一个的num与当前num不同，无法移动，并退出
			return false;
		}
	
		
	}
	//向右移动
	Card.prototype.moveRight=function(cards,bool) {
		var i=this.i;
		var j=this.j;
		//设定退出条件
		if(j==3){//已经是最右边了
			return false;
		}
		//上面一个卡片
		var prev = cards[i][j+1];
		if(prev.num==0){//上一个卡片是空
			//移动，本质就是设置数字
			if(bool){//bool为true才执行，因为flase只是用来判断能否移动
				prev.num=this.num;
				this.num=0;
				//递归操作（注意这里是要 prev 来 move了）
				prev.moveRight(cards,bool);
			}
			return true;
		}else if(prev.num==this.num && !prev.merge){//合并操作（如果已经合并了，则不运行再次合并，针对当然轮）
			if(bool){bool为true才执行
				prev.merge=true;
				prev.num=this.num*2;
				this.num=0;
			}
			return true;
		}else {//上一个的num与当前num不同，无法移动，并退出
			return false;
		}
	}
	//向左移动
	Card.prototype.moveLeft=function(cards,bool) {
		var i=this.i;
		var j=this.j;
		//设定退出条件
		if(j==0){//已经是最左边了
			return false;
		}
		//上面一个卡片
		var prev = cards[i][j-1];
		if(prev.num==0){//上一个卡片是空
			//移动，本质就是设置数字
			if(bool){//bool为true才执行，因为flase只是用来判断能否移动
				prev.num=this.num;
				this.num=0;
				//递归操作（注意这里是要 prev 来 move了）
				prev.moveLeft(cards,bool);	
			}
			return true;
		}else if(prev.num==this.num && !prev.merge){//合并操作（如果已经合并了，则不运行再次合并，针对当然轮）
			if(bool){bool为true才执行
				prev.merge=true;
				prev.num=this.num*2;
				this.num=0;
			}
			return true;
		}else {//上一个的num与当前num不同，无法移动，并退出
			return false;
		}
	}

运行效果：

JavaScript实现2048小游戏，我终于赢了一把

做到这里就基本完成了，加入其他一下辅助的东西就行了，比如重新开始、游戏胜利，游戏结束等，也就不多说了。

看到这里的大佬，动动发财的小手 点赞 + 回复 + 收藏，能【 关注 】一波就更好了。

代码获取方式：

帮忙文章【点赞】 +【 收藏】+【关注】+【评论】 后，加我主页左边的微信 或者 私聊我，我发给你！

更多精彩

1. Java俄罗斯方块 2. Java五子棋小游戏 3. 老Java程序员花一天时间写了个飞机大战 4. Java植物大战僵尸 5. 老Java程序员花2天写了个连连看 6. Java消消乐（天天爱消除） 7. Java贪吃蛇小游戏 8. Java扫雷小游戏 9. Java坦克大战 10. Java迷宫小游戏

相关阅读

1. JavaWeb图书管理系统 2. JavaWeb学生宿舍管理系统 3. JavaWeb在线考试系统

另外

为了帮助更多小白从零进阶 Java 工程师，从CSDN官方那边搞来了一套 《Java 工程师学习成长知识图谱》，尺寸 870mm x 560mm，展开后有一张办公桌大小，也可以折叠成一本书的尺寸，原件129元现价 29 元，先到先得，有兴趣的小伙伴可以了解一下！

JavaScript实现2048小游戏，我终于赢了一把

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript实现2048小游戏，我终于赢了一把全部内容，希望文章能够帮你解决JavaScript实现2048小游戏，我终于赢了一把所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：capjavajavascriptlistphppythonString开发开发程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程