基于html的2048小游戏,基于jQuery的2048小游戏设计（网页版）

上周模仿一个2048小游戏，总结一下自己在编写代码的时候遇到的一些坑。

游戏规则：省略，我想大部分人都玩过，不写了

源码地址：https://github.com/xinhua6/2048game.git

文件结构：

2048.css  编写游戏样式

index.html  页面结构内容

main2048.js 游戏主逻辑文件，包含初始化格子，随机生成2个数字

game.js 游戏交互逻辑文件，主要包含上下左右移动逻辑

support.js 游戏的基础逻辑文件，提供游戏结束判断，数字移动的前提条件判断

animation.js 游戏的动画逻辑文件，包含数字格子的颜色设计，移动的动画设计

ps：这里我只是写一下注意点，不会把详细的代码都罗列出来，要想看详细的编写代码，请到源码地址：https://github.com/xinhua6/2048game.git 下载。

1.在css样式中没有对每个格子的位置进行设置，利用循环来初始化每个格子。

.grid-cell{

width: 100px;

height: 100px;

border-radius: 6px;

background-color: #ccc0b3;

position: absolute;

margin：0 auto;

}

main.js中

function init() {

for (var i =0;i<4;i++){

board[i] = new Array();

for (var j= 0;j<4;j++){

board[i][j] = 0;

//通过双重遍历获取每个格子的元素

var eachGrid = $('#grid-cell-'+i+'-'+j);

//通过getPostTop()获取每个格子距离顶部的高度和到左端的距离

//eachGrid.css({"top":getPos(i),"left":getPos(j)});无效

eachGrid.css('top',getPos(i));

eachGrid.css('left',getPos(j));

}

}

updateBoardView();

}

support.js文件中

//格子到顶部/左端的距离

function getPos(num) {

return 20+num*120;

}

注意：在这里子元素grid-cell的position要设置为absolute，父元素container的position要设置为relative，这样才可以基于父元素框向左向下偏移位置，否则子元素grid-cell会基于整个屏幕来向左，向下移动

2.随机生成两个数字。(2或者4)。这里三步走：生成一个随机的位置；生成一个随机的数字；在随机的位置上显示随机的数字

function generateOneNumber() {

//生成一个随机位置的随机数

//1生成随机的位置

var randx = parseInt(Math.floor(Math.random()*4));

var randy = parseInt(Math.floor(Math.random()*4));

//定义一个死循环，完成生成随机空格子

while (true){

//如果当前的格子为0，满足条件

if (board[randx][randy] == 0){

break;

}

//否则重新随机一个位置

var randx = Math.floor(Math.random()*4);

var randy = Math.floor(Math.random()*4);

}

//2生成随机的数字,只能生成2或4

var randNumber = Math.random() < 0.5 ? 2 : 4;

//3在随机的位置上显示出随机的数字

board[randx][randy] = randNumber;

showNumberWithAnimation(randx,randy,randNumber);

}

3.这里就向左移来讲解，其余方向的移动逻辑都是类似的。

开始是判断是否能够左移，左移的条件是当前数字所在的格子左边相邻的值为0或者值相等。该函数返回的是boolean值

function canMoveLeft(board) {

for (var i =0;i<4;i++){

for (var j = 1;j<4;j++){

if (board[i][j] != 0){

//当前数字格的左边前一个值为0或者当前数字格的值与左边第一个数字格的值相等

if (board[i][j-1] == 0 || board[i][j-1] == board[i][j]){

return true;

}

}

}

}

return false;

}

紧接着如果判断成立，则进行左移。左移的时候要进行判断，相邻的格子数是否相等，相等要相加，同时成绩上要增加分数；否则，当前的格子的数字移动到相应格子。

function moveLeft() {

//moveLeft 左移要注意不是第一列，第一列无法左移

for (var i = 0; i < 4; i++){

for (var j = 1; j < 4; j++){

if (Number(board[i][j]) != 0){

for (var k = 0;k

if (board[i][k]==0 && noBoardHorizontal(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] && noBoardHorizontal(i,k,j,board)){

//向左移动

showMoveAnimation(i,j,i,k);

board[i][k] += board[i][j];

score += board[i][k];

updateScore(score);

board[i][j] = 0;

}

}

}

}

}

//设置刷新时间是为了让运动的动画走完再进行跟新数字格，否则数字格运动的动画将会被打断

setTimeout(updateBoardView(),200);

}

//判断当前数字格水平的数字格是否值为0

function noBoardHorizontal(row,col1,col2,board) {

for (var i = col1 + 1; i< col2;i++){

if (board[row][i]!=0){

return false;

}

}

return true;

}

function showMoveAnimation(fromx,fromy,tox,toy) {

//获取当前的数字格的元素

var numberCell = $("#number-cell-"+ fromx + "-" + fromy);

numberCell.animate({

top:getPos(tox),

left:getPos(toy),

},200)

4.最后判断是否游戏结束，以及分数跟新

//跟新分数

function updateScore(num){

$('#score').text(num);

}

//判断游戏是否结束

function isgameover(board){

if (!canMoveLeft(board) && !canMoveUp(board) && !canMoveRight(board) && !canMoveDown(board)) {

alert("游戏结束，请重新开始游戏！");

}

}

总结：

这个游戏编程总体不难，只要理清思路，就可以写了，最后调试的时候，比较注意的是：设置setTimeOut时，要注意最后的时间设置。

基于jQuery仿QQ音乐播放器网页版代码

基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码:

Swift实战之2048小游戏

上周在图书馆借了一本Swift语言实战入门,入个门玩一玩^_^正好这本书的后面有一个2048小游戏的实例,笔者跟着实战了一把. 差不多一周的时间,到今天,游戏的基本功能已基本实现,细节我已不打算继续完 ...

2048小游戏代码解析 C语言版

2048小游戏,也算是风靡一时的益智游戏.其背后实现的逻辑比较简单,代码量不算多,而且趣味性强,适合作为有语言基础的童鞋来加强编程训练.本篇分析2048小游戏的C语言实现代码. 前言 游戏截图:  游 ...

HTML&plus;CSS&plus;JavaScript实现2048小游戏

相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...

c&num;撸的控制台版2048小游戏

1.分析 最近心血来潮,突然想写一个2048小游戏.于是搜索了一个在线2048玩玩,熟悉熟悉规则. 只谈核心规则:(以左移为例) 1.1合并 以行为单位,忽略0位,每列依次向左进行合并,且每列只能合并 ...

C&num; 开发2048小游戏

这应该是几个月前,闲的手痒,敲了一上午代码搞出来的,随之就把它丢弃了,当时让别人玩过,提过几条更改建议,但是时至今日,我也没有进行过优化和更改(本人只会作案,不会收场,嘎嘎),下面的建议要给代码爱好的 ...

随机推荐

check&lowbar;user&lowbar;createdate&period;sh

在前面这篇文章Linux如何找出用户的创建时间里面讨论了查看用户创建时间的方法,后面自己尝试弄了一个脚本来检查所有用户创建时间脚本,当然更合理的应该叫检查所有用户的密码修改时间比较准确(因为这种方法有 ...

&lpar;原创&rpar;AD账户误删导致Exchange邮箱被删 莫苦恼

由于人员变动,离职人员AD账户和邮箱经常要删除.但是在删除AD账户的时候难免会犯错,将在用的用户给删除了,这是个痛苦的事情, 然后你会发现Exchange邮箱也会跟着删除,抓狂了..,还好,幸亏这里进 ...

Maven-007-Nexus 用户添加，用户角色分配，用户修改密码，管理员重置用户密码

配置好 maven nexus 私服后,默认的用户可通过查看[Users]查看当前私服中所存在的用户,如下图所示:

HDFS原理讲解

简介 本文是笔者在学习HDFS的时候的学习笔记整理, 将HDFS的核心功能的原理都整理在这里了. [广告] 如果你喜欢本博客,请点此查看本博客所有文章:http://www.cnblogs.com/x ...

CC&period;NET-自动化发布时 Web&period;config 文件维护

[Hello CC.NET]自动化发布时 Web.config 文件维护   在  的 HellowWorld 中经实现: 1. ...

svn branching and merging

the svn switch command is an alternative way to creating a working copy of a branch :) You can merge ...

Java编码问题汇总

转自 http://www.blogjava.net/zhangchao/archive/2011/05/26/351051.html Thanks Java编码问题汇总 工作中经常遇到java编码问 ...

Delphi 开发手机 App 与其他工具之间的比较分析

写在前头 关于各种手机App开发的工具,从2010年前后到现在已经在很多不同的场合介绍过,在元智大学.中台科技大学.德霖科技大学等不同学校的讲座.课程当中,都有类似的主题,所以对我来说,这个主题属于驾 ...

ubuntu server 在 virtualbox中安装增强包

原文链接:http://luzl.iteye.com/blog/1010597 首先说下增强包能干什么,在desktop下面有了增强包桌面就能变大了,在server下也是类似,那个黑屏就能变大了,还有 ...

SpingBoot —— 多线程

Spring 通过任务执行器(TaskExecutor)来实现多线程和并发编程.使用ThreadPoolTaskExecutor可实现一个基于线程池的TaskExecutor.而实际开发中任务一般是非 ...