AngularJS实现的2048小游戏功能【附源码下载】
程序员文章站
2022-07-06 10:59:02
本文实例讲述了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程序设计有所帮助。
下一篇: js登录滑动验证的实现(不滑动无法登陆)
推荐阅读
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
-
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
-
Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
使用DevExpress的PdfViewer实现PDF打开、预览、另存为、打印(附源码下载)