AngularJS实现的2048小游戏功能【附源码下载】
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
本文实例讲述了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="/UploadFiles/2021-04-02/angular.min.js">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 ","); 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程序设计有所帮助。
下一篇：浅谈node模块与npm包管理工具