用javascript制作2048游戏的思路(原创若 转载请附上本链接)

一、项目已上传至github,地址:https://github.com/forjuan/2048game

二、学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏。经过初期的思路设计手工画了设计思路图。手工图有空在用图画出来。

实现2048的功能:1、核心:上下左右移动。

2、游戏开始,游戏结束。

3、外观实现。

4、积分(暂时没实现)

把问题分解:1.首要难点移动,将移动进行分解,分为上下左右移动;

2.用什么记录位置,怎样记录每个方块的值,边界,相同值相加?

3.我选择用一个二维数组记录位置相关信息,包括,left,top值(相对于页面的位置),用一个boolean类型value值记录该位置上是否有值。loca[i][i] = {left:***,top:***,value:false}

4.怎么记录小方块,小方块与位置间的关系?我用的是div,每个div是个小方块(样式不在此说明),每个div有x,y值用于储存div的位置信息,value:小方块的值,change:每次移动小方块是否已经相加过(这是后来出现bug想到的)。

5.先向左移动,左移每个小方块向左边移动,左边可能有两种情况:a.无值,

b.有值,有值可能有两种情况,

(1).值相同,

(2).值不同。

6.哪些值需要移动,哪些值不需要移动: 根据5知:不移动:与左边相邻第一个值不相等,或者是到左边界。其他情况都要移动

7.向左移动,则每行的每列的循环从左往右对每个方块执行移动操作(判断是否需要移动,若移动操作)

8.若要移动操作,怎么移动,(我选择用一个函数封装找到这个小方块应该到达的位置,如果它的左边第一个有值而且是相等的,则小方块的值是原来的2倍,它的位置就是左边第一有值得位置,若值不等则目标位置是左边第一有值的值的后一个位置,若它左边都无值,它的目标位置是最左边)

9.基本向左思路就是这样了。

三、编写过程中发现的bug

1.在移动过后,有的小方块,移动乱了位置,无法显示,解决bug比查找bug更简单,怎么查找bug呢,我用的排除法,用浏览器调试工具找到不见的小方块在哪里被隐藏,然后思考它前一步,分析出现这个问题的原因,再单独处理确认错误原因,最后解决问题,我的问题有我用了原生的运动的完美框架,到指定位置会有时间延迟,后面设置的位置信息先执行完,它才运动完,导致后面的设置没用。

2.小方块只有16个,所以一个小方块占用了位置,原来位置上的小方块与它交换位置。

四、版本迭代中

现在我的这个小游戏只是实现了,初步将move(top,left,down,right)封装在同一函数中,同一功能的函数也已封装,为了复用,提高性能,现在正在学习js设计模式,希望能用于该游戏中,将代码完善,提高性能,最后希望丰富该游戏的基本功能,积分,不同模式,移动时有滑动效果,手机版。有兴趣的一起捣鼓哦

时间: 2024-10-18 20:48:36

用javascript制作2048游戏的思路(原创若 转载请附上本链接)的相关文章

山大泰克条屏写串口的核心代码(海宏原创,转载请注明)

山大泰克条屏写串口的核心代码,海宏原创,转载请注明. using System; using System.Collections.Generic; using System.Text; // using System.Runtime.InteropServices; using System.IO.Ports; using System.Windows.Forms; using iPublic; namespace sdLed { /// <summary> /// 用来连接LED的API.

ar游戏开发入门三步走 - 转载请保留原文链接:http://www.chinaar.com/ZYJC/2423.html

中国AR网(公众号armeiti):其实我遇到很多像你这样的去做AR开发的.其实现在很多AR开发者根本不懂AR实现原理,因为现在开发AR不需要自己去做底层算法,直接去用成熟的SDK即可.现在AR应用开发门槛不是像以前那么高了,反而好的创意更多的来自内容 ar游戏开发入门一般需要 算法.应用开发.3D美工三部分: 你说的 opencv 主要用与算法部分. java,c# 属于应用开发部分. 国内一般只做后两部分,借助于 高通 或 美桃(Metaio) 的识别算法, 使用 Unity 作为开发平台,

简单的JavaScript实现2048游戏

实现一个网页版的2048游戏,过程参考了慕课网2048游戏的教程, 具体代码如下: html结构: <body> <div class="header"> <h2>2048</h2> <a href="javascript:newGame()" id="newGameBtn">New Game</a> <p>Score:<span id="scor

使用UNITY3d制作2048游戏

使用unity的插件NGUI,可以快速的制作2D游戏: 2048这个游戏主要的核心是算法,不管用cocos2d,erget还是其他的引擎,算法基本不变,细节有变化而已: 基本算法图: 数字代表XY坐标,每个格子都有一个特定坐标,首先定义一个4*4的数组来存储这个棋盘格局: 一,界面区目录 UI ROOT(-Number)

制作2048游戏

下载 :: Game 2048 with Animation 今天的任务是给2048加上动画.别看用js的transition就搞定的事情,用GDI来实现是有难度的. 2048的游戏实现机制 虽然代码抄自gabrielecirulli/2048: A small clone of 1024 (https://play.google.com/store/apps/details?id=com.veewo.a1024) ,但是将js代码用lua去实现还是多费了点工夫.当然两者都是动态语言,坑比较少.

pof(Protocol Oblivious Forwarding)环境测试用例(原创,转载请注明)

Pof测试教程详细版 前言 一.此教程在pof环境搭建好之后,作为测试用例.下面说明配置中需要用到的一些参数: Controller,即pc1,宿主机mac 地址:忽略,ip:10.10.16.199 Switch,即pc2,mac地址:08:00:27:f8:d0:03  ip: 10.10.16.201 Server/client,即pc3,mac地址:08:00:31:40:e2:6a ip:10.10.16.200 二.本测试用例所构建的一个新协议架构如图:协议类型为0x0888,协议名

pof(Protocol Oblivious Forwarding)环境的搭建(原创,转载请注明)

Pof环境的搭建 一.总体概述 架构如图:pc1为控制器,pc2为交换机.Pc3为server/client(一台装有两个虚拟机的pc,需将网络连接方式设为桥接.自行按照实验室的网段来分配ip,后面章节有详述),在本搭建教程中,controller为宿主机,pc2和pc3为宿主机上的两台虚拟机. 二.Java环境的配置 (一)Java环境配置 由于控制器是floodlight版本修改而来,所以作为控制器的宿主机必须要有java的开发环境.配置方法如下: 1. 在浏览器中打开http://www.

openflow之pof(原创,转载请注明)

最近看pof代码看的头疼,不过庆幸的是搞定了,剩下就是将pof的思想看能否融合到EPC的代码里,咱也为将来的5G提出点意见不是?先来说说pof是啥吧. pof简介 pof的全称(Protocol Oblivious Forwarding)即协议无感知转发,华为提出的一种在OpenFlow上改进的转发方式,这种方式再不需要知道包用的协议是什么的时候就可以转发出去.它能够提高SDN的可编程性,可以在不更改转发设备代码的基础上支持新的协议.仅仅需要做的就是由控制器配置好相应的流表,下发到转发设备上即可

280行代码:Javascript 写的2048游戏

2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.不妨就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算法,移动后有数字的对齐,无数字(我用的0,但不显示)补齐. 移动前 移动后(注意程序合并了第一行2个2,并产生了新的2) 移动算法分2步: 第一步骤:移动 第二步骤:合并 移动代码参考: [html] view plaincopy function left(t,i) { var j; var len