当前访客身份：游客 [
当前位置：
发布于 日 10时,
原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。&WASD&控制方向。演示地址请移步：/detail/bp8baf8b&
代码片段(3)
1.&[代码]2048.html&&&&
&!DOCTYPE&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&2048&/title&
&link rel="stylesheet" type="text/css" href="css/2048.css" /&
&!-- &script type="text/javascript" src="/jquery-latest.js"&&/script& --&
&script type="text/javascript" src="js/2048.js"&&/script&
&div id="div2048"&
&a id="start"&tap to start :-)&/a&
2.&[代码]2048.css&&&&
@charset "utf-8";
width: 500
height: 500
background-color: #b8af9e;
width: 500
height: 500
line-height: 500
text-align:
font-size: 30
background: #f2b179;
color: #FFFFFF;
#div2048 div.tile
margin: 20px 0px 0px 20
width: 100
height: 40
padding: 30px 0;
font-size: 40
line-height: 40
text-align:
#div2048 div.tile0{
background: #ccc0b2;
#div2048 div.tile2
color: #7c736a;
background: #eee4
#div2048 div.tile4
color: #7c736a;
background: #ece0c8;
#div2048 div.tile8
color: #fff7
background: #f2b179;
#div2048 div.tile16
color:#fff7
background:#f59563;
#div2048 div.tile32
color:#fff7
background:#f57c5f;
#div2048 div.tile64
color:#fff7
background:#f65d3b;
#div2048 div.tile128
color:#fff7
background:#edce71;
#div2048 div.tile256
color:#fff7
background:#edcc61;
#div2048 div.tile512
color:#fff7
background:#ecc850;
#div2048 div.tile1024
color:#fff7
background:#edc53f;
#div2048 div.tile2048
color:#fff7
background:#eec22e;
3.&[代码]2048.js&&&&
function game2048(container)
this.container =
this.tiles = new Array(16);
game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles. i & i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] =
this.randomTile();
this.randomTile();
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
setTileVal: function(tile, val){
tile.className = 'tile tile' +
tile.setAttribute('val', val);
tile.innerHTML = val & 0 ? val : '';
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() & 0.8 ? 2 : 4);
move:function(direction){
switch(direction){
for(var i = 4, len = this.tiles. i & i++){
while(j &= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
for(var i = 11; i &= 0; i--){
while(j &= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
for(var i = 1, len = this.tiles. i & i++){
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
for(var i = 14; i &= 0; i--){
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
this.randomTile();
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
max: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 2048){
over: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
if(i & 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
clean: function(){
for(var i = 0, len = this.tiles. i & i++){
this.container.removeChild(this.tiles[i]);
this.tiles = new Array(16);
var game, startB
window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
window.onkeydown = function(e){
var keynum,
if(window.event){
keynum = e.keyC
else if(e.which){
// Netscape/Firefox/Opera
keynum = e.
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) & -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
game.move(keychar);
开源中国-程序员在线工具：
相关的代码(110)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
Nice！这才是我一直找的代码，谢谢！
2楼：chaogel 发表于
应该加个状态，页面不发生改变时，是不产生新数字的
3楼：刘国添 发表于
谢谢，有空好好研究一下
4楼：touzi 发表于
貌似不能用
5楼：OpenSo 发表于
建议复制代码的时候能把行号去掉，这个太不人性化了吧
6楼：OpenSo 发表于
开始之后数字就不能动了
7楼：曹超 发表于
楼上的同学，请看好html文件 ，把目录结构弄正确哦
8楼：skysakuya 发表于
9楼：车开源 发表于
10楼：zhoushen 发表于
11楼：loongchao 发表于
赞 1024 * 10
12楼：raydo 发表于
很好，很不错。
13楼：2EZ 发表于
14楼：KYZGJ 发表于
15楼：OSDaven 发表于
引用来自“OpenSo”的评论建议复制代码的时候能把行号去掉，这个太不人性化了吧你没看到上面有个 “copy to clipbord”吗？
16楼：老李99 发表于
17楼：曹超 发表于
引用来自“ll99”的评论不能动?/detail/bp8baf8b
18楼：曹超 发表于
引用来自“头子”的评论貌似不能用/detail/bp8baf8b
19楼：老李99 发表于
原来是用wsad来移动的,话说这个游戏没玩懂
开源从代码分享开始
曹超的其它代码1跟1消除变成2,2跟2消除变成3是什么游戏_百度知道
1跟1消除变成2,2跟2消除变成3是什么游戏
///s/1eQcQFpK" target="_blank">http.7m
http.baidu://pan://pan://pan://pan2048 纯净版_v2
来自团队：
其他类似问题
为您推荐：
其他2条回答
小游戏十分难合成
2048游戏，可以搜到
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前所在位置： >
热门微信号：
【源码分享】Cocos2d-x 3.2开发《2048》游戏
作者： 浏览数：0 用手机扫描二维码
阅读，只需一秒。精彩，尽在掌握！一、规则游戏2048的规则很简单2+2=44+4=88+8=……48二、游戏游戏的界面是用画的,数字是写上去的...
一、规则游戏2048的规则很简单2+2=44+4=88+8=……48二、游戏游戏的界面是用画的，数字是写上去的，卡片的移动效果没有做，加入了声音，玩起来还行。1、主要的类只有四个：GameScene主场景（分值显示、菜单按钮、游戏区域）GameLayer游戏操作区域（数值变化、逻辑控制）GameItem游戏中的格子控件（颜色，数字显示）GameMenuLayer游戏中的菜单（重置、暂停或开始）2、移动方向的判断移动方向是通过手指触摸起点到移动终点的距离来判断的，横向距离小于纵向距离则为向上或者下移动，横向距离大于纵向距离则为向左或者右移动3、颜色控制if(_num == 0){
_layer-&setColor(cocos2d::Color3B(200,190,180));
if (_num == 2) {
_layer-&setColor(cocos2d::Color3B(240,230,220));
if (_num == 4) {
_layer-&setColor(cocos2d::Color3B(240,220,200));
if (_num == 8) {
_layer-&setColor(cocos2d::Color3B(240,180,120));
if (_num == 16) {
_layer-&setColor(cocos2d::Color3B(240,140,90));
if (_num == 32) {
_layer-&setColor(cocos2d::Color3B(240,120,90));
if (_num == 64) {
_layer-&setColor(cocos2d::Color3B(240,90,60));
if (_num == 128) {
_layer-&setColor(cocos2d::Color3B(240,90,60));
if (_num == 256) {
_layer-&setColor(cocos2d::Color3B(240,200,70));
if (_num == 512) {
_layer-&setColor(cocos2d::Color3B(240,200,70));
if (_num == 1024) {
_layer-&setColor(cocos2d::Color3B(0,130,0));
if (_num == 2048) {
_layer-&setColor(cocos2d::Color3B(0,130,0));
}三、横竖屏设置横竖屏的设置在AndroidManifest.xml文件中：screenOrientation=&landscape&为横屏；screenOrientation=&portrait&为竖屏；这里在编译apk文件时要设置，因为我们的游戏是竖屏的，不然会有显示问题。四、屏幕适配屏幕适配的问题我忘记在哪里找到的，不过适配的效果不错，在代码里面。转自RichardMillings
博客点击阅读原文下载源码
手机版地址：
微信号：eoe_cn
eoe移动开发社区
TA的热门文章
推荐数码微信帐号
热门文章排行
(), All rights reserved 京ICP备号-12