首页
所有分类
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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
十分钟教你上手ES2020新特性
Feb 12 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
浅谈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
Javascript面试题(44) SOA面试题(9) PYTHON面试题(27) 自我鉴定(671) UNIX面试题(27) Ruby面试题(15) Delphi面试题(13) Servlet面试题(20) MySQL面试题(19) J2EE面试题(19)
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
js实现随机点名
2021/01/19 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
Python类定义和类继承详解
2015/05/08 Python
Python实现简单字典树的方法
2016/04/29 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python爬取微博评论的实例讲解
2021/01/15 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
阿迪达斯意大利在线商店：adidas意大利
2016/09/19 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
高中毕业自我鉴定
2013/12/16 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
大学生社会实践方案
2014/05/11 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
2014年医生工作总结
2014/11/21 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
专家推荐信范文
2015/03/26 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python