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

2019-11-19 14:36:18

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/games/game2048

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

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

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

上一篇：vue、react等单页面项目应该这样子部署到服务器

下一篇：浅谈node模块与npm包管理工具