jQuery制作《2048》
来源:互联网 发布:swf文件mac用什么打开 编辑:程序博客网 时间:2024/06/04 19:25
《2048》是比较流行的一款数字游戏,在初始的16个方格中会随机出现基础数字2和4,使用上下左右四个快捷键来移动数字块,相同的数字会叠加在一起,直到游戏出现[2048]数字即为游戏的通关。今天为大家奉上使用‘面向过程’写的《2048》小游戏。
游戏源码:2048游戏源码
1.构建页面
创建一个html文件用于编写静态页面,分别设置游戏的标题,开始游戏按钮,分数和16个小方格。
2.初始化棋盘格
创建一个main.js文件用来初始化棋盘格,在棋盘格上随机的生成两个数字,2和4
由于棋盘格是一个4*4的16方格所以我们需要创建一个二维数组来表示棋盘上的所有方格。
var board = new Array();//定义一个数组function init() { for (var i = 0; i < 4; i++) { board[i] = new Array(); for (var j = 0; j < 4; j++) { board[i][j] = 0; //此处设置方格的css样式 } }}
这样初始化的棋盘格二维数组就创建出来了。
3.初始化数字格
初始化方格后需要为数字格做准备,数字格里面需要有内容,并且数字格的位置是随机生成的
1定义一个函数用于初始化数字格,初始化数字格之前首先清除原来存在的数字格布局和内容以免对下一次随机生成的数字格造成影响。
$(".number-cell").remove();
2创建另一个二维数组用于存放合并的数字格,并且设置数字格的宽高和随机的位置(top,left)
for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { //将创建的数字格添加到此处 //如果棋盘格的值为0;设置数字格宽高都为0 if (board[i][j] == 0) { numberCell.css({ width: 0, height: 0, top: getPosTop(i, j) + 50, left: getPosLeft(i, j) + 50 }); } else { numberCell.css({ width: 100, height: 100, top: getPosTop(i, j), left: getPosLeft(i, j), }).text(board[i][j]); } hasBug[i][j] = false; } }
3在随机生成的方格中随机的生成两个数字2和4 首先判断一下当前的数字格是否为空,如果不为空返回false,否则返回true。
if (nospace(board)) { return false; } return true;
4随机生成一个格子
//随机一个x坐标的位置 var randx = parseInt(Math.floor(Math.random() * 4)); //随机一个y坐标的位置 var randy = parseInt(Math.floor(Math.random() * 4)); //定义一个死循环,完成生成随机空格子 while (true) { //如果当前格子的值为0,满足条件 if (board[randx][randy] == 0) { break; } //否则重新随机一个位置 var randx = parseInt(Math.floor(Math.random() * 4)); var randy = parseInt(Math.floor(Math.random() * 4)); }
5随机一个数字(只能随机出现2和4)
var randNumber = Math.random() < 0.5 ? 2 : 4;
6在随机格子中显示随机的数字
board[randx][randy] = randNumber;
4.初始化基础逻辑
1使用getPosTop()方法和getPosLeft()方法来完成距顶端和距左端的距离设置。
function getPosTop(i, j) { return 20 + i * 120;}function getPosLeft(i, j) {return 20 + j * 120;}
2编写函数来设置方格的背景色和前景色
3定义一个函数来判断当前格子是否为空。
for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (board[i][j] == 0) { return false; } } } return true;
5.初始化动画逻辑
当随机的位置方格随机出现时加入自己喜欢的动画,并为数字格添加背景色和前景色。
6.游戏逻辑
1捕获键盘事件 游戏是用上下左右四个键来控制的因此需要给对应的键盘添加事件
使用keydown来监听是哪个键盘被按下了并使用keycode来判断需要做哪些事情。
$(document).keydown(function (event) { switch (event.keyCode) { case 37://left break; case 38://up break; case 39://right break; case 40://down break; default : break; }});
2给对应键盘添加函数来使得方格能够移动,这里以向左为例。需要判断向左移动的方格左边是否有不为0的数字,如果有并且已经靠边了,就不能移动,如果数字能够叠加则可以移动。如果待移动的方格与已经靠边的方格中间无方格那么也可以移动。
//向左移动function moveLeft() { if (!canMoveLeft(board)) { //当前格子 无法移动 return false; } //完成向左移动的逻辑 for (var i = 0; i < 4; i++) { //由于第一列不能再移动了 所以j从1开始 for (var j = 1; j < 4; j++) { //数字格有值才可以移动 if (board[i][j] != 0) { //向左移动 for (var k = 0; k < j; k++) { if (board[i][k] == 0 && noBlokHorizontalCol(i, k, j, board)) { showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board) && !hasBug[i][k]) { //move showMoveAnimation(i, j, i, k); //累加数字 board[i][k] += board[i][j]; board[i][j] = 0; //增加分数 score += board[i][k]; updateScore(score); hasBug[k][j] = true; continue; } } } } } setTimeout( updateBoard,200); return true;}
7.游戏收尾
1关于游戏何时结束
棋盘中无空余的方格
棋盘中无可移动的方格
棋盘中无可以叠加的方格
那么游戏可以结束了
编写gameOver函数
function gameover() { alert("游戏结束!");}
整个游戏的流程大致就这样了。由于使用面向过程编写,代码比较繁琐,有能力的小伙伴可以使用面向对象来优化代码。
- jQuery制作《2048》
- 制作jQuery插件
- jQuery动画制作
- JQUERY制作图片滚动
- jquery插件制作
- jQuery制作动画特效
- jQuery制作的幻灯片``
- jquery插件制作进度条
- jquery制作选项卡
- jQuery制作相册
- jquery制作简单计算器
- jquery全选插件制作
- 自己制作jQuery插件
- jquery制作滑动面板
- [边学边用]jquery插件制作
- jQuery制作简单柱状图
- jQuery制作菜单
- jQuery制作瀑布流
- 欢迎使用CSDN-markdown编辑器
- 电信3G典型拨号脚本
- JavaScript、jQuery、AJAX、JSON 这四个之间的关系 神段子 通俗易懂
- webapi全局日志方法
- if-else
- jQuery制作《2048》
- mac上安装mongoDb以及简单使用
- Eclipce 编辑区滚动条闪烁BUG
- CMD能执行
- SMP和AMP
- AIS系统中的UTC同步
- MySql安装后在服务管理器里边找不到MySql服务项的解决办法
- SEVERE: Invalid message received with signature 1025
- Android RxJava操作符详解系列: 变换操作符