首页
所有分类
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 相关文章推荐
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JsRender for object语法简介
Oct 31 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
node.js文件上传处理示例
Oct 27 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
iOS15(1) iOS16(1) 模糊匹配(1) opencv(7) Athens(1) iOS(1) compose(3) moviepy(1) FuzzyWuzzy(1) Pyecharts(7)
You might like
将php数组输出html表格的方法
2014/02/24 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
实例解析php的数据类型
2018/10/24 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
javascript学习之json入门
2016/12/22 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python绘制多个子图的实例
2019/07/07 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python同义词替换的实现（jieba分词）
2020/01/21 Python
python3 配置logging日志类的操作
2020/04/08 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
Lookfantastic瑞典：英国知名美妆购物网站
2018/04/06 全球购物
奥兰多迪士尼门票折扣：Undercover Tourist
2018/07/09 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
买房协议书
2014/04/11 职场文书
公司捐款倡议书
2014/05/14 职场文书
奖励通知
2015/04/22 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript