1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>cwl's 2048</title>
  6.          <style>
  7.              *{
  8.                  margin: 0;
  9.                  padding: 0;
  10.              }
  11.              body{
  12.                  background-color: #5ad9ff;
  13.              }
  14.          </style>
  15.      </head>
  16.      <body>
  17.          <script>
  18.  
  19.              function canvas_node() {
  20.                  /**
  21.                  var canvas = document.getElementById('tutorial');
  22.                  var ctx = canvas.getContext('2d');
  23.  
  24.                  ctx.fillStyle = "rgb(200,0,0)";
  25.                  ctx.fillRect(25,25,100,100);
  26.                  ctx.clearRect(45,45,60,60);
  27.                  ctx.strokeRect(50,50,50,50);
  28.  
  29.                  ctx.beginPath();
  30.                  ctx.moveTo(75,50);
  31.                  ctx.lineTo(100,75);
  32.                  ctx.lineTo(100,25);
  33.                  ctx.fill();        
  34.  
  35.                  */
  36.              }
  37.  
  38.              function rand_num(l,r) {
  39.                  l = Math.min(l,r);
  40.                  r = Math.max(l,r);
  41.                  return Math.floor(Math.random()*(r-l+1)+l);
  42.              }
  43.  
  44.              function draw_num(num,x,y,x0,y0) {
  45.                    var ctx = document.getElementById('canvas').getContext('2d');
  46.                  ctx.fillStyle = "black";
  47.                    ctx.font = "30px serif";
  48.                  ctx.textAlign = "center";
  49.                  ctx.textBaseline = "middle"
  50.                    ctx.fillText(num.toString(),x0+x*100+40,y0+y*100+40,100);
  51.              }
  52.  
  53.              function show_map(arr) {
  54.                  var ctx = document.getElementById('canvas').getContext('2d');
  55.                  var width = window.innerWidth;
  56.                  var height = window.innerHeight;
  57.                  var x0 = width/2 - 200;
  58.                  var y0 = window.innerHeight/5;
  59.                  ctx.fillStyle = "#8ece44";
  60.                  ctx.fillRect(x0-25,y0-25,430,430);
  61.                  ctx.fillStyle = "#ffe945";
  62.                  for(var i = 0; i < 4; i ++ ) {
  63.                      for(var j = 0; j < 4; j ++ ) {
  64.                          ctx.fillRect(x0+i*100,y0+j*100,80,80);
  65.                      }
  66.                  }
  67.                  for(var i = 0; i < 4; i ++ ) {
  68.                      for(var j = 0; j < 4; j ++ ) {
  69.                          if(arr[i][j]!=0) {
  70.                              draw_num(arr[i][j],i,j,x0,y0);
  71.                          }
  72.                      }
  73.                  }
  74.              }
  75.  
  76.              function init_game() {
  77.                  var arr = new Array(4);
  78.                  for(var i = 0; i < 4; i ++ ) {
  79.                      arr[i] = new Array(4);
  80.                  }
  81.                  for(var i = 0; i < 4; i ++ ) {
  82.                      for(var j = 0; j < 4; j ++ ) {
  83.                          arr[i][j] = 0;
  84.                      }
  85.                  }
  86.                  new_num(arr);
  87.                  new_num(arr);
  88.                  show_map(arr);
  89.                  return arr;
  90.              }
  91.  
  92.              function new_num(arr) {
  93.                  var ok = 0;
  94.                  for(var i = 0; i < 4; i ++ ) {
  95.                      for(var j = 0; j < 4; j ++ ) {
  96.                          if(!arr[i][j]) {
  97.                              ok = 1;
  98.                          }
  99.                      }
  100.                      if(ok) {
  101.                          break;
  102.                      }
  103.                  }
  104.                  while(ok) {
  105.                      var x = rand_num(0,3);
  106.                      var y = rand_num(0,3);
  107.                      var t = rand_num(1,2);
  108.                      if(arr[x][y] == 0) {
  109.                          arr[x][y] = t*2;
  110.                          break;
  111.                      }
  112.                  }
  113.              }
  114.  
  115.              function is_end(arr) {
  116.                  var xx = [-1, 1, 0, 0];
  117.                  var yy = [ 0, 0,-1, 1];
  118.                  for(var i = 0; i < 4; i ++ ) {
  119.                      for(var j = 0; j < 4; j ++ ) {
  120.                          if(arr[i][j] == 0) {
  121.                              return false;
  122.                          }
  123.                          else {
  124.                              for(var k = 0; k < 4; k ++ ) {
  125.                                  var next_x = i + xx[k];
  126.                                  var next_y = j + yy[k];
  127.                                  if(is_in(next_x,next_y) && arr[next_x][next_y] == arr[i][j]) {
  128.                                      return false;
  129.                                  }
  130.                              }
  131.                          }
  132.                      }
  133.                  }
  134.                  return true;
  135.              }
  136.  
  137.              function is_in(x,y) {
  138.                  return x >= 0 && y >= 0 && x < 4 && y < 4;
  139.              }
  140.  
  141.              function join(arr,dir,x,y) {
  142.                  var xx = [-1, 1, 0, 0];
  143.                  var yy = [ 0, 0,-1, 1];
  144.                  var flag = 0;//判断是否能继续合并
  145.                  while(is_in(x,y)) {
  146.                      var next_x = x+xx[dir];
  147.                      var next_y = y+yy[dir];
  148.                      if(!is_in(next_x,next_y)) {
  149.                          break;
  150.                      }
  151.                      if(arr[next_x][next_y] == 0) {
  152.                          arr[next_x][next_y] = arr[x][y];
  153.                          arr[x][y] = 0;
  154.                      }
  155.                      else if(arr[next_x][next_y] == arr[x][y] && !flag) {
  156.                          arr[next_x][next_y] *= 2;
  157.                          arr[x][y] = 0;
  158.                          flag = 1;
  159.                      }
  160.                      else break;
  161.                      x = next_x;
  162.                      y = next_y;
  163.                  }
  164.  
  165.              }
  166.  
  167.              function change(arr,dir) {
  168.                  if(dir == 2) { // up
  169.                      for(var i = 0; i < 4; i ++ ) {
  170.                          for(var j = 0; j < 4; j ++ ) {
  171.                              join(arr,dir,i,j);
  172.                          }
  173.                      }
  174.                  }
  175.                  else if(dir == 3) { //down
  176.                      for(var i = 0; i < 4; i ++ ) {
  177.                          for(var j = 3; j >= 0; j -- ) {
  178.                              join(arr,dir,i,j);
  179.                          }
  180.                      }
  181.                  }
  182.                  else if(dir == 0) {
  183.                      for(var i = 0; i < 4; i ++ ) {
  184.                          for(var j = 0; j < 4; j ++ ) {
  185.                              join(arr,dir,i,j);
  186.                          }
  187.                      }
  188.                  }
  189.                  else if(dir == 1) {
  190.                      for(var i = 3; i >= 0; i -- ) {
  191.                           for(var j = 0; j < 4; j ++ ) {
  192.                              join(arr,dir,i,j);
  193.                          }
  194.                      }
  195.                  }
  196.                  //console.log(arr);
  197.                  if(is_end(arr)) {
  198.                      alert("end");
  199.                      return 1;
  200.                  }
  201.                  new_num(arr);
  202.                  show_map(arr);
  203.                  return 0;
  204.              }
  205.  
  206.              function main() {
  207.                  document.body.style.overflow="hidden";
  208.                  var can = document.createElement('canvas');
  209.                  can.id = "canvas";
  210.                  can.width = window.innerWidth;
  211.                  can.height = window.innerHeight;
  212.                  document.body.appendChild(can);
  213.                  var arr = init_game();
  214.  
  215.                  var keyIsDown = 0;
  216.  
  217.                  window.addEventListener('mousemove', function(event) {
  218.                      console.log(event)
  219.                  })
  220.  
  221.                  window.addEventListener('keydown',function(event){
  222.                      var key = event.keyCode;
  223.                      var ret = 0;
  224.                      if(keyIsDown == 0) {
  225.                          keyIsDown = 1;
  226.                          if(key == 38) {//up
  227.                              ret = change(arr,2);
  228.                          }
  229.                          else if(key == 40) {//down
  230.                              ret = change(arr,3);
  231.                          }
  232.                          else if(key == 37) {//left
  233.                              ret = change(arr,0);
  234.                          }
  235.                          else if(key == 39) {//right
  236.                              ret = change(arr,1);
  237.                          }
  238.                          if(ret) {
  239.                              arr = init_game();
  240.                              show_map(arr);
  241.                          }
  242.                      }
  243.                  })
  244.  
  245.                  window.addEventListener('keyup',function(){
  246.                      keyIsDown = 0;
  247.                  })
  248.  
  249.                  window.onresize = function()
  250.                  {
  251.                      var can = document.getElementById("canvas");
  252.                      var height = window.innerHeight;
  253.                      var width = window.innerWidth;
  254.                      can.height = height;
  255.                      can.width = width;
  256.                      show_map(arr);
  257.                  }
  258.              }
  259.              main();
  260.          </script>
  261.      </body>
  262.  </html>
  263.  　　

2048

JS实现2048代码的更多相关文章

  1. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  2. JS Nice – JavaScript 代码美化和格式化工具

    JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...

  3. ios-UIWebView中js和oc代码的互调

    webview是ios中显示远程数据的网页控件,webview能显示的内容很多,MP4.文本.pdf等等: 关于js和oc代码的互相调用 1:oc中调用js代码; >>oc中调用js代码很 ...

  4. 关于JS的一些代码效果图

    关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...

  5. js基础 - 兼容代码

    js基础 - 兼容代码 . scrollTop . chrome document.body.scrollTop . IE && firefox document.documentEl ...

  6. [转]Asp.Net调用前台js调用后台代码分享

    1.C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> ...

  7. JS软键盘代码

    页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...

  8. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  9. asp.net调用前台js调用后台代码分享

    asp.net调用前台js调用后台代码分享 C#前台js调用后台代码前台js<script type="text/javascript" language="jav ...

随机推荐

  1. [SHOI2009] 会场预约 - Treap

    Description PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也 ...

  2. 如何从0开发一个Atom组件

    最近用Atom写博客比较多,然后发现一个很严重的问题..没有一个我想要的上传图片的方式,比如某乎上边就可以直接copy/paste文件,然后进行上传.然而在Atom上没有找到类似的插件,最接近的一个, ...

  3. python/零起点（一、字典）

    python/零起点(一.字典) dict( )字典 dict()强型转换成字典类型的数据类型: 字典的键(Key)必须是唯一不可变的 字典是无序,字典可变数据类型,且是可迭代的对象 字典清空操作案例 ...

  4. *args和**kwargs

    #coding=utf8 __author__ = 'Administrator' # 当函数的参数不确定时,可以使用*args和**kwargs.*args没有key值,**kwargs有key值 ...

  5. SourceTree 01 - git 客户端介绍

    SourceTree - git客户端介绍 SourceTree系列第1篇 --->> SourceTree 01 - git 客户端介绍(http://www.cnblogs.com/g ...

  6. Django中的可复用模板

    将文件转换成可复用的模板,便可以通过模板的基本布局来设计未来项目. startproject的模板是一个目录或zip文件,当命令运行时形成Django模板. 默认情况下,所有Python源文件都会被制 ...

  7. HTML5中meta属性大集合

    1.声明文档的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" ...

  8. No mapping found for HTTP request with URI [/user/login.do] in DispatcherServlet with name 'dispatcher'错误

    1.警告的相关信息 七月 24, 2017 3:53:04 下午 org.springframework.web.servlet.DispatcherServlet noHandlerFound警告: ...

  9. 【Swift】UIPresentationController的使用方法

    UIPresentationController是ios8.0的新特性哦,使用需要注意 先上一个效果图 第一步: 连线选择segue类型为,present Modally 第二步:需要演示的控制器,自 ...

  10. linux 基本使用命令

    arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI ...