AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】

更新時間：2018年01月03日 11:43:06 作者：soulkiss

這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了AngularJS實現(xiàn)的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">分數(shù) <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)) {//有移動，增加一個隨機數(shù)
      arrShow = CreateNum(arrShow, 1);
    }
    //橫豎轉(zhuǎn)化
    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();
  }
  //去除數(shù)組中的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) {//調(diào)整回來
      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;
      }
    }
  }
  //移動數(shù)字
  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;//存在相同的非零數(shù)字
    if (b == 0) return true;//全部是0 相當于滿了
    return a != 0;
  }
  //驗證數(shù)組是否變過
  $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;
  }
  //隨機產(chǎn)生數(shù)字
  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實現(xiàn)）

在線2048游戲：
http://tools.jb51.net/games/game2048

在線2048小游戲數(shù)字版：
http://tools.jb51.net/games/game2048num

更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結(jié)》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章: