帝王谷资源网 Design By www.wdxyy.com
本文实例讲述了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="/UploadFiles/2021-04-02/angular.min.js">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 ","); 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游戏:
http://tools.jb51.net/games/game2048在线2048小游戏数字版:
http://tools.jb51.net/games/game2048num更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年10月31日
2024年10月31日
- 徐玮1980-我爱校园[台湾复刻版][WAV+CUE]
- 刘亦菲分享靶场射击视频 网友夸赞又美又飒
- 《怪物猎人:荒野》试玩现已开放 你最想尝试哪种武器?
- 《异度之刃X 终极版》正式公布!明年3月20日登陆NS
- 【原神】V5.1攻略 | 纳西妲角色培养攻略
- 【原神】V5.1攻略 | 纳西妲与胡桃抽取建议
- 【原神】V5.1攻略 | 纳西妲一图流攻略
- 群星.2003-重遇80·感动今天的都市人2CD【SONY】【WAV+CUE】
- 希文.2024-沉溺【StreetVoice】【FLAC分轨】
- 韩红.2005-精丫麒麟童】【WAV+CUE】
- 2D像素风日式美学动作游戏《雨魂》将登陆Xbox Series
- 《龙腾世纪4》评分造假?仅将评测代码给好评媒体!
- 《怪猎荒野》推出蜘蛛恐惧症设定 蜘蛛秒变史莱姆
- 《张韶涵单8CD+无损单曲合集》[WAV/FLAC][6.5G]
- 自然声带《大自然 雨声 白噪音》[320K/MP3][135.32MB]