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

程序员文章站 2022-03-22 13:13:58

本文实例讲述了angularjs实现的2048小游戏功能。分享给大家供大家参考，具体如下：先来看看运行效果图：具体代码如下： index.html：...

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

在线2048小游戏数字版：

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

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

上一篇：如何判断页面是pc端还是移动端，进入不同的页面

下一篇：这几步瑜伽动作，瘦腿又瘦腰，超简单！

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

Android编程实现TextView垂直自动滚动功能【附demo源码下载】

Android实现下载zip压缩文件并解压的方法（附源码）

Android编程实现手绘及保存为图片的方法(附demo源码下载)

ASP.NET MVC使用ActionFilterAttribute实现权限限制的方法(附demo源码下载)

使用Java实现系统托盘功能的介绍(附源码以及截图)

Android编程实现TextView垂直自动滚动功能【附demo源码下载】

Android实现下载zip压缩文件并解压的方法（附源码）

Zend Framework实现留言本分页功能(附demo源码下载)

Zend Framework实现具有基本功能的留言本(附demo源码下载)

Android编程实现手绘及保存为图片的方法(附demo源码下载)