【总结篇】js编写的2048小游戏开发(上:思路)

js 同时被 3 个专栏收录
2 篇文章 0 订阅
7 篇文章 0 订阅
2 篇文章 0 订阅

2048是大家都熟悉的一款魔性小游戏,其操作简单,却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构,适合有一定html、css、js、jquery语言基础的读者阅读。

 

一.游戏试玩

      游戏玩法大家都很熟悉,每次可以选择上下左右中的一个方向滑动一次,所有数字方块都会向滑动的方向靠拢,每次滑动后空白的地方随机出现一个数字方块2或4,相邻的相同数字的方块在靠拢时会相加融合为一个方块。不断叠加以拼凑出标志性数字2048,并仍可以无休止地继续叠加下去,直至空间塞满方格无法移动游戏结束。

二.游戏剖析

2.1 界面

    界面主体部分就是由4×4的方格框与其中会动的数字方格构成,再加上游戏分数累计。空方格框的界面编写较为简单,float:left与宽高百分比结合即可实现。根据观察我们可发现数字方格具有以下重要属性:数值与其对应颜色、位置,在系统增加随机格子或操作移动格子时,界面所呈现的是某位置格子的出现或伴随某位置格子的消失,以及某数值格子的出现或消失。因而我们想到用一组名为坐标的class类定义位置属性,用一组名为数值的class类定义对应数值的对应背景颜色属性,通过jquery中addClass与removeClass方法操控格子属性变化,注意方格布局不能采用流式布局,position属性值应为absolute,对应方格框div容器的position属性值为relative。总结即:

/*position数组坐标位置*/
.pos00{left:0;top:0;}
 .pos01{left:0; top:25%; } 
 .pos02{left:0; top:50%; } 
 .pos03{left:0; top:75%; } 
 .pos10{left:25%; top:0; } 
 .pos11{left:25%; top:25%; } 
 .pos12{left:25%; top:50%; } 
 .pos13{left:25%; top:75%; } 
 .pos20{left:50%; top:0; } 
 .pos21{left:50%; top:25%; } 
 .pos22{left:50%; top:50%; } 
 .pos23{left:50%; top:75%; } 
 .pos30{left:75%; top:0; } 
 .pos31{left:75%; top:25%; } 
 .pos32{left:75%; top:50%; } 
 .pos33{left:75%; top:75%; }
/*级别格子样式*/
.n2{background: #ede6d9; color: #625b4e; } 
.n4{background: #eee1cc; color: #625b4e; } 
.n8{background: #eab678; color: #fff; } 
.n16{background: #e5925b; color: #fff; } 
.n32{background: #ef805e; color: #fff; } 
.n64{background: #e75b37; color: #fff; } 
.n128{background: #edcf70; color: #fff; } 
.n256{background: #ebcd64; color: #fff; } 
.n512{background: #ecc950; color: #fff; } 
.n1024{background: #edc63e; color: #fff; } 
.n2048{background: #f0c52f; color: #fff; } 
.n4096{background: #fab912; color: #fff; } 

位置组的class类名定义格式为pos+二维数组索引,数值组的class类名定义格式为n+方格上数字。

2.2 游戏操作

    1.初始状态下系统在4×4所有格子框中的两个随机位置生成数值为2的方格------创建形态对应的二维数组arr[ ][ ]存放动态的数值,随机索引的数值,将之通过jquery的append方法将class为pos+i+j的div注入html文档(i、j为索引),在界面显示出来

    2.进行一轮操作:向上下左右中的一个方位滑动(手机版)或上下左右方向键(电脑版),方格向该方向移动或合并或移动+合并或碰壁状态无法移动------先用js监听事件判上、下、左、右操作,后判断并进行相应的移动或合并操作

    3.每执行方向操作后若移动或合并操作有条件发生(即未碰壁)空白处随机位置新增格子------遍历数组筛选出数值为空的数组对象再进行随机并用1中方法画出格子

    4.每新增格子后判断一次游戏是否结束------遍历数组检查是否无空值且是否无相邻方格数值相等,是则游戏结束,通知玩家并回到1,否则继续下一轮操作,返回2

三.函数设计

    根据2.2可画出设计图,其中调用的方法的位置、频率、顺序通过图示将更为清晰。

设计函数

Game2048.prototype = {
	constructor:Game2048,
	//初始化
	init:function(){
        this.score = 0;
		this.arr = [];
		this.moveAble = false;
		$("#score").html("0");
		$(".number_cell").remove();
		this.creatArr();
	},
    //创建二维数组
	creatArr:function(){
		var i,j;
		for(i=0;i<4;i++){
			this.arr[i] = [];
			for(j=0;j<4;j++){
				this.arr[i][j] = {};
				this.arr[i][j].value = 0;
			}
		}
		//在全空白情况下随机生成第一个方格2
		var i1,j1;
		i1 = getRandom(4);
		j1 = getRandom(4);
		this.arrValueUpdate(2,i1,j1);
		this.drawCell(i1,j1);
	},
	//方格数字更新
	arrValueUpdate:function(num,i,j){
		this.arr[i][j].oldValue = this.arr[i][j].value;
		this.arr[i][j].value = num;
	},
	//画出方格
	drawCell:function(i,j){
		var item = '<div class="number_cell pos'+i+j+'"><span>'+this.arr[i][j].value+'</span></div>';
		$(".box").append(item);
	},
	//监听并执行动作
	addEvent:function(){
		var that = this;
		document.onkeydown = function(event){
			var e = event||window.event||arguments.callee.caller.arguments[0];
			var keyCode = e.keyCode;
			switch(keyCode){
				case 37:
				that.moveAble = false;
				that.moveLeft();
				that.checkLose();
				break;
				case 38:
				that.moveAble = false;
				that.moveUp();
				that.checkLose();
				break;
				case 39:
				that.moveAble = false;
				that.moveRight();
				that.checkLose();
				break;
				case 40:
				that.moveAble = false;
				that.moveDown();
				that.checkLose();
				break;
			}
		}
	},
	//向上
	moveUp:function(){ 	  },
	//向下
	moveDown:function(){    },
	//向左
	moveLeft:function(){    },
	//向右
	moveRight:function(){    },
    //添加新格子
	newCell:function(){    },
	//移动
	moveCell:function(){    },
	//合并
	mergeCell:function(){	 },
	//判断输
	checkLose:function(){	 }
}
function getRandom(n){
	return Math.floor(Math.random()*n)
}
function Game2048(){
	this.addEvent();
}
var g = new Game2048;
g.init();

 

 

 

2048小游戏整体的思路与结构如上,具体的算法填充见《js编写的2048小游戏开发(下:算法实现)》。转载请注明出处,不足之处欢迎讨论^_^~。

 

  • 4
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值