javascript实现2048游戏示例_基础知识

原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。

2048.html

复制代码 代码如下:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2048</title>
<link rel="stylesheet" type="text/css" href="css/2048.css" />
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> -->
<script type="text/javascript" src="js/2048.js"></script>
</head>

<body>
 <div id="div2048">
        <a id="start">tap to start :-)</a>
    </div>
</body>
</html>

2048.css

复制代码 代码如下:

@charset "utf-8";

#div2048
{
    width: 500px;
    height: 500px;
    background-color: #b8af9e;
    margin: 0 auto;
    position: relative;
}
#start
{
    width: 500px;
    height: 500px;
    line-height: 500px;
    display: block;
    text-align: center;
    font-size: 30px;
    background: #f2b179;
    color: #FFFFFF;
}
#div2048 div.tile
{
    margin: 20px 0px 0px 20px;
    width: 100px;
    height: 40px;
    padding: 30px 0;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    float: left;
}
#div2048 div.tile0{
 background: #ccc0b2;
}
#div2048 div.tile2
{
    color: #7c736a;
    background: #eee4da;
}
#div2048 div.tile4
{
    color: #7c736a;
    background: #ece0c8;
}
#div2048 div.tile8
{
    color: #fff7eb;
    background: #f2b179;
}
#div2048 div.tile16
{
    color:#fff7eb;
    background:#f59563;
}
#div2048 div.tile32
{
    color:#fff7eb;
    background:#f57c5f;
}
#div2048 div.tile64
{
    color:#fff7eb;
    background:#f65d3b;
}
#div2048 div.tile128
{
    color:#fff7eb;
    background:#edce71;
}
#div2048 div.tile256
{
    color:#fff7eb;
    background:#edcc61;
}
#div2048 div.tile512
{
    color:#fff7eb;
    background:#ecc850;
}
#div2048 div.tile1024
{
    color:#fff7eb;
    background:#edc53f;
}
#div2048 div.tile2048
{
    color:#fff7eb;
    background:#eec22e;
}

2048.js

复制代码 代码如下:

function game2048(container)
{
 this.container = container;
 this.tiles = new Array(16);
}

game2048.prototype = {
 init: function(){
  for(var i = 0, len = this.tiles.length; i < len; i++){
   var tile = this.newTile(0);
   tile.setAttribute('index', i);
   this.container.appendChild(tile);
   this.tiles[i] = tile;
  }
  this.randomTile();
  this.randomTile();
 },
 newTile: function(val){
  var tile = document.createElement('div');
  this.setTileVal(tile, val)
  return tile;
 },
 setTileVal: function(tile, val){
  tile.className = 'tile tile' + val;
  tile.setAttribute('val', val);
  tile.innerHTML = val > 0 ? val : '';
 },
 randomTile: function(){
  var zeroTiles = [];
  for(var i = 0, len = this.tiles.length; i < len; 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){
  var j;
  switch(direction){
   case 'W':
    for(var i = 4, len = this.tiles.length; i < len; i++){
     j = i;
     while(j >= 4){
      this.merge(this.tiles[j - 4], this.tiles[j]);
      j -= 4;
     }
    }
    break;
   case 'S':
    for(var i = 11; i >= 0; i--){
     j = i;
     while(j <= 11){
      this.merge(this.tiles[j + 4], this.tiles[j]);
      j += 4;
     }
    }
    break;
   case 'A':
    for(var i = 1, len = this.tiles.length; i < len; i++){
     j = i;
     while(j % 4 != 0){
      this.merge(this.tiles[j - 1], this.tiles[j]);
      j -= 1;
     }
    }
    break;
   case 'D':
    for(var i = 14; i >= 0; i--){
     j = i;
     while(j % 4 != 3){
      this.merge(this.tiles[j + 1], this.tiles[j]);
      j += 1;
     }
    }
    break;
  }
  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.length; i < len; i++){
   if(this.tiles[i].getAttribute('val') == 2048){
    return true;
   }
  }
 },
 over: function(){
  for(var i = 0, len = this.tiles.length; i < len; i++){
   if(this.tiles[i].getAttribute('val') == 0){
    return false;
   }
   if(i % 4 != 3){
    if(this.equal(this.tiles[i], this.tiles[i + 1])){
     return false;
    }
   }
   if(i < 12){
    if(this.equal(this.tiles[i], this.tiles[i + 4])){
     return false;
    }
   }
  }
  return true;
 },
 clean: function(){
  for(var i = 0, len = this.tiles.length; i < len; i++){
   this.container.removeChild(this.tiles[i]);
  }
  this.tiles = new Array(16);
 }
}

var game, startBtn;

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, keychar;
 if(window.event){  // IE
  keynum = e.keyCode;
 }
 else if(e.which){  // Netscape/Firefox/Opera
  keynum = e.which;
 }
 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?';
   return;
  }
  game.move(keychar);
 }
}

时间： 2024-10-26 01:06:30

javascript实现2048游戏示例_基础知识的相关文章

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码_基础知识

源码下载 源码我已经上传到 CSDN 了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873. 源码使用 VS 2013 +TypeScript 1.4 进行开发.打开后,显示如下图: JsTankGame 1.0:老的使用 JS 编写的坦克游戏. JsTankGame 2.0:新的使用 TS 直接翻译过来的游戏. JsTankGame:在 2.0 的基础上,对类型进行了重构后的新游戏. 重构步骤 由于老的 JS 游戏是采用 MS

JavaScript—window对象使用示例_基础知识

window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性: 1 打开新窗口 复制代码 代码如下: window.open(pageURL,name,parameters) 其中: pageURL为子窗口路径 name为子窗口句柄 parameters为窗口参数(各参数用逗号分隔) 如: 复制代码 代码如下: window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,

javascript判断office版本示例_基础知识

使用JavaScript判断office版本,在项目开发中非常有用,由其是在OA系统的在线office编辑,我们需要让office在线编辑工具同时支持office的多个版本,例如office2003.2007.office在安装的时候,会在注册表中写入键值,具体位置为HKEY_CURRENT_USER/Software/Microsoft/Office. 我们打开注册表就可以看到office的版本,office版本与注册表键值对应关系如下: 复制代码 代码如下: 11.0         off

javascript实现2048游戏示例

 这篇文章主要介绍了javascript实现2048游戏示例,需要的朋友可以参考下 原生javascript代码写的2048游戏.建议在谷歌浏览器下跑. 2048.html 代码如下: tap to start :-) 2048.css 代码如下: @charset "utf-8"; #div2048 { width: 500px; height: 500px; background-color: #b8af9e; margin: 0 auto; position: relative;

JavaScript方法和技巧大全_基础知识

这篇介绍JavaScript方面的日志,我在是Clang上看到的.作者介绍挺全面的,所以转载过来让感兴趣的朋友看一下.呵呵--- 有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西会浪费你很多时间,我一直以为我早在几年前就已经精通JavaScript了,直到目前,我才越来越觉得JavaScript远比我想象的复杂和强大,我开始崇拜它,就像崇拜所有OOP语言一样- 趁着节日的空隙,把有关JavaScript的方

在HTML中插入JavaScript代码的示例_基础知识

 在HTML文档中的任何地方可包括JavaScript代码.但也有以下的最佳方法来包含JavaScript在HTML文件.     在 <head>...</head> 部分.     在 <body>...</body> 部分.     在<body>...</body> 和<head>...</head> 部分.     脚本和外部文件,然后包括在<head>... </ head>

JavaScript 函数模式详解及示例_基础知识

JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建函数的语法 命名函数表达式 //命名函数表达式 var add = function add(a,b){ return a+b; }; var foo = function bar() { console.log(foo === bar); }; foo();//true 可见,他们引用的是同一函数

Javascript中eval函数的使用方法与示例_基础知识

定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图覆盖 eval

JavaScript操作Cookie详解_基础知识

什么是 Cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." - w3school cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息. 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 在JavaScript中可以通过 doc