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

时间：2021-05-28

本文实例讲述了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

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章