AngularJS实现的2048小游戏功能【附源码下载】

更新时间：2020-06-22 12:54:02 作者：startmvc

本文实例讲述了AngularJS实现的2048小游戏功能。分享给大家供大家参考，具体如下：先来看

本文实例讲述了AngularJS实现的2048小游戏功能。分享给大家供大家参考，具体如下：

先来看看运行效果图：

具体代码如下：

index.html：


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="2048.css" rel="external nofollow" >
 <script src="angular.min.js"></script><!-- 1.4.6-->
 <script src="angular-animate.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" ng-keypress="keyEvent($event)">
 <div>
 <div class="div2048">
 <input class="btn btn-init" type="button" value="2048" ng-click="init()" />
 <div class="Num-Back">
 <p class="Num-Title">分数 <span class="done" ng-show="GameOver"> Game Over !!!</span> </p>
 <p class="Num-Show">
 {{MaxSum}}
 </p>
 </div>
 <ul class="ul2048" ng-repeat="ArrNum in ArrShow">
 <!--<li ng-repeat="Num in ArrNum" class="li2048 num{{Num}}">{{Num == 0 ? "" : Num}}</li>-->
 <li class="li2048 num{{ArrNum[0]}}">{{ArrNum[0] == 0 ? "" : ArrNum[0]}}</li>
 <li class="li2048 num{{ArrNum[1]}}">{{ArrNum[1] == 0 ? "" : ArrNum[1]}}</li>
 <li class="li2048 num{{ArrNum[2]}}">{{ArrNum[2] == 0 ? "" : ArrNum[2]}}</li>
 <li class="li2048 num{{ArrNum[3]}}">{{ArrNum[3] == 0 ? "" : ArrNum[3]}}</li>
 </ul>
 </div>
 </div>
 <script src="JS2048.js" charset="utf-8"></script>
</body>
</html>

JS2048.js：


var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function ($scope) {
 //初始化
 $scope.ArrAll = new Array([0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]);
 $scope.ArrShow = new Array([0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]);
 $scope.MaxLenth = 4;
 $scope.MaxSum = 0;
 $scope.IsMoved = false;
 $scope.GameOver = false;
 $scope.init = function () {
 $scope.GameOver = false;
 $scope.ArrAll = new Array([0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]);
 //$scope.ArrAll = new Array([2, 4, 8, 16], [16, 8, 4, 2], [2, 4, 8, 16], [16, 8, 32, 2]);
 $scope.ArrAll = CreateNum($scope.ArrAll , 2);
 $scope.MaxSum = 0;
 $scope.ArrShow = $scope.ArrAll.map(function (col, i) {
 return $scope.ArrAll.map(function (row) {
 return row[i];
 })
 });
 //$scope.GameOver = !$scope.CheckMove();
 }
 $scope.init();
 //移动 type : r_l,l_r,u_d,d_u
 $scope.move = function (type) {
 var moveArr = $scope.ArrAll;
 if (type == "u_d" || type == "d_u") {//竖排的 上下 按照左右来操作
 moveArr = moveArr.map(function (col, i) {
 return moveArr.map(function (row) {
 return row[i];
 })
 });
 }
 var lastArr = moveArr.concat();
 moveArr = Remove0(moveArr);
 var typeInt = 0;
 if (type == "r_l" || type == "d_u") {
 typeInt = 1
 }
 var arrShow = moveNum(moveArr, typeInt);
 if ($scope.IsMoved(lastArr, arrShow)) {//有移动，增加一个随机数
 arrShow = CreateNum(arrShow, 1);
 }
 //横竖转化
 if (type == "u_d" || type == "d_u") {
 $scope.ArrShow = arrShow;
 $scope.ArrAll = arrShow.map(function (col, i) {
 return arrShow.map(function (row) {
 return row[i];
 })
 });
 }
 else {
 $scope.ArrAll = arrShow;
 $scope.ArrShow = arrShow.map(function (col, i) {
 return arrShow.map(function (row) {
 return row[i];
 })
 });
 }
 $scope.GameOver = !$scope.CheckMove();
 }
 //去除数组中的0
 function Remove0(objRemove) {
 var temp = new Array([0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]);
 for (var i = 0; i < objRemove.length; i++) {
 var a = objRemove[i];
 var b = new Array();
 for (var l = 0; l < a.length; l++) {
 if (a[l] != 0) {
 b.push(a[l]);
 }
 }
 //补齐0
 for (var j = b.length; j < $scope.MaxLenth; j++) {
 b.push(0);
 }
 temp[i] = b;
 }
 return temp;
 }
 //核心计算 0 左到右 1 右到左
 function MoveCore(objCore, type) {
 var b = new Array();
 var c = objCore.concat();
 if (type == 0) {// 倒序
 c = c.reverse();
 }
 for (var i = 0; i < c.length; i++) {
 if (c[i] == 0) {//去除0值
 continue;
 }
 if (i + 1 < c.length && c[i] == c[i + 1]) {//相同的相加
 b.push(c[i] * 2);
 c[i + 1] = 0;
 }
 else {//直接赋值
 b.push(c[i]);
 c[i] = 0;
 }
 }
 if (b.length < $scope.MaxLenth) {//补足0
 for (var i = b.length; i < $scope.MaxLenth; i++) {
 b.push(0);
 }
 }
 if (type == 0) {//调整回来
 b = b.reverse();
 }
 return b;
 }
 //递归计算
 function MoveSum(objSum, i) {
 if (objSum[i] == 0) {//去除0值
 return 0;
 }
 else {
 return objSum[i];
 }
 for (var i = 0; i < objSum.length; i++) {
 if (c[i] == 0) {//去除0值
 continue;
 }
 if (i + 1 < c.length && objSum[i] == objSum[i + 1]) {//相同的相加
 b.push(c[i] * 2);
 objSum[i + 1] = 0;
 }
 else {//直接赋值
 b.push(objSum[i]);
 objSum[i] = 0;
 }
 }
 }
 //移动数字
 function moveNum(objNum, type) {
 var arrShow = new Array([0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]);
 for (var i = 0; i < objNum.length; i++) {
 var a = objNum[i];
 if (!IsRowFull(a)) {
 var b = MoveCore(a, type);
 }
 else {
 b = a.concat();
 }
 arrShow[i] = b;
 }
 return arrShow;
 }
 //当前行/列 是否满了
 function IsRowFull(objFull) {
 var a = 1;
 var b = 0;
 var isExitSame = false;
 for (var i = 0; i < objFull.length; i++) {
 a = a * objFull[i];
 b = b + objFull[i];
 if (i + 1 < objFull.length && objFull[i] != 0 && objFull[i] == objFull[i + 1]) {
 isExitSame = true;
 }
 }
 if (isExitSame) return false;//存在相同的非零数字
 if (b == 0) return true;//全部是0 相当于满了
 return a != 0;
 }
 //验证数组是否变过
 $scope.IsMoved = function (objLast, objNow) {
 for (var i = 0; i < objLast.length; i++) {
 for (var j = 0; j < objLast[i].length; j++) {
 if (objLast[i][j] != objNow[i][j])
 return true;
 }
 }
 return false;
 }
 //随机产生数字
 function CreateNum(objCreate, count) {
 var b = new Array();
 for (var i = 0; i < objCreate.length; i++) {
 var a = objCreate[i];
 for (var l = 0; l < a.length; l++) {
 if (a[l] == 0) {
 b.push(i + "," + l);
 }
 }
 }
 for (var c = 0; c < count; c++) {
 if (b.length > 0) {
 var num = Math.round(Math.random() * 100);
 num = num < 80 ? 2 : 4;
 var bIndex = Math.floor((Math.random() * b.length));
 var objIndex = b[bIndex].split(",");
 var i = parseInt(objIndex[0]);
 var j = parseInt(objIndex[1]);
 objCreate[i][j] = num;
 $scope.MaxSum += num;
 console.log(b[bIndex], num);
 b.splice(bIndex, 1);
 }
 }
 return objCreate;
 }
 //验证是否可移动
 $scope.CheckMove = function () {
 var objCheck = $scope.ArrAll;
 for (var i = 0; i < objCheck.length; i++) {
 var a = objCheck[i];
 if (!IsRowFull(a)) {
 return true;
 }
 }
 var objCheckUD = objCheck.map(function (col, i) {
 return objCheck.map(function (row) {
 return row[i];
 })
 });
 for (var i = 0; i < objCheckUD.length; i++) {
 var a = objCheckUD[i];
 if (!IsRowFull(a)) {
 return true;
 }
 }
 return false;
 }
 //left 37 up 38 right 39 down 40 没作用
 //a:97 w 119 s 115 d 100
 $scope.keyEvent = function ($event) {
 var type = "";
 if ($event.keyCode == 37 || $event.keyCode == 97) {//回车
 type = "r_l";
 }
 if ($event.keyCode == 38 || $event.keyCode == 119) {//回车
 type = "d_u";
 }
 if ($event.keyCode == 39 || $event.keyCode == 100) {//回车
 type = "l_r";
 }
 if ($event.keyCode == 40 || $event.keyCode == 115) {//回车
 type = "u_d";
 }
 if (type != "") {
 $scope.move(type);
 }
 }
});

附：完整实例代码点击此处本站下载。

PS：这里再为大家推荐另两款本站2048游戏供大家参考（JS实现）

在线2048游戏： http://tools.jb51.net/games/game2048

在线2048小游戏数字版： http://tools.jb51.net/games/game2048num