首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 03, 2018

本文实例讲述了AngularJS实现的2048小游戏功能。分享给大家供大家参考，具体如下：

先来看看运行效果图：

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);
    }
  }
});

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

- Author -

soulkiss

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript操作cookie的文章(设置，删除cookies)
Apr 01 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 #Javascript
利用原生js实现html5小游戏之打砖块（附源码）
Jan 03 #Javascript
403(1) Stater(1) 404(1) xps(1) CAD(1) sout(1) XPathParser(1) Sentry(1) macos(1) csgo(1)
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php适配器模式介绍
2012/08/14 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP分页类集锦
2014/11/18 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Python运用于数据分析的简单教程
2015/03/27 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python发展史及网络爬虫
2019/06/19 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
详解Python 中的容器 collections
2020/08/17 Python
HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能
2019/04/26 HTML / CSS
英国领先的在线高尔夫商店：Scottsdale Golf
2019/08/26 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
.NET概念性的面试题
2012/02/29 面试题
名人传读书笔记
2015/06/26 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
解决pytorch-gpu 安装失败的记录
2021/05/24 Python