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);
}
}
});
附：完整实例代码点击此处本站下载。
PS：这里再为大家推荐另两款本站2048游戏供大家参考（JS实现）
在线2048游戏：
http://tools.jb51.net/games/game2048
在线2048小游戏数字版：
http://tools.jb51.net/games/game2048num
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
JS实现的走迷宫小游戏完整实例
本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
JavaScript用200行代码制作打飞机小游戏实例
我去,我的图片分数被这个录屏软件的水印盖上了,扎心. 这个程序的文件以及代码全部上传到了github 程序下载链接传送门 这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了.所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西. 当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创. 代码部分我是通过一个大
-
原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
-
原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 <div id="game"> <div id="bird"></div> </div> css样式 #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; posi
-
Three.js 再探 - 写一个微信跳一跳极简版游戏
那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧 源码地址: github.com/luosijie/th- 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好 下面是实现过程 游戏分析 首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机 一块又一块的方块 会跳的那个 ,或者叫游戏者 以上 游戏过程 初始一个场景, 场景中有一个 会跳的那个 和 2个方块 鼠标按下储存 能量值 鼠标放
-
原生js编写2048小游戏
效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b
-
JavaScript实现打地鼠小游戏
在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
-
js猜数字小游戏的简单实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="