溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下AngularJS怎么實現的2048小游戲功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術進行服務器端編程。
先來看看運行效果圖：
具體代碼如下：
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小游戲功能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
