经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS原生2048小游戏源码分享
来源：cnblogs　　作者：林恒　　时间：2021/5/6 17:56:34　　对本文有异议

最近在学习算法方面的知识，看到了一个由算法主导的小游戏，这里给大家分享下代码：

效果：

代码：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=360px,user-scalable=no" />
  4.     <title>2048小游戏</title>
  5.     <style>
  6.         body,h1,div,table,tr,td{
  7.             margin: 0px;
  8.             padding: 0px;
  9.         }
  10.         body{
  11.             background-color: rgb(0,0,0);
  12.         }
  13.         h1{
  14.             margin: 36px auto;
  15.             text-align: center;
  16.             color: rgba(255,255,255,0.7);
  17.             font-family: "楷体";
  18.             font-size: 48px;
  19.             text-shadow: 1px 2px 3px rgb(134,134,134);
  20.         }
  21.         div{
  22.             margin: 12px auto;
  23.             line-height: 60px;
  24.         }
  25.         #box{
  26.             margin-top: -24px;
  27.             width: 240px;
  28.             height: 60px;
  29.             text-align: center;
  30.             font-weight: bold;
  31.             color: rgb(255,255,255);
  32.         }
  33.         #box input{
  34.             border: 3px solid rgb(255,255,255);
  35.             border-radius: 4px;
  36.             box-shadow: 1px 2px 3px rgb(234,234,234);
  37.         }
  38.         #box input:focus{
  39.             outline-style: none;
  40.         }
  41.         table{
  42.             margin: 24px auto;
  43.             border: 3px solid rgb(255,255,255);
  44.             border-radius: 6px;
  45.         }
  46.         #random,td{
  47.             width: 60px;
  48.             height: 60px;
  49.             border: 2px solid rgb(255,255,255);
  50.             border-radius: 18px;
  51.             text-align: center;
  52.             font-weight: bold;
  53.             color: rgb(255,255,255);
  54.         }
  55.         td:hover{
  56.             cursor: pointer;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <h1>2 0 4 8</h1>
  62. <!-- 显示得分及新游戏按钮 -->
  63. <div id="box">
  64.     得分: <span id="span">0</span>
  65.             
  66.     <input id="but" type="button" value="新游戏" />
  67. </div>
  68. <!-- 显示随机数 -->
  69. <div id="random"></div>
  70. <!-- 游戏主要布局 -->
  71. <table border="3px">
  72.     <tr>
  73.         <td></td>
  74.         <td></td>
  75.         <td></td>
  76.         <td></td>
  77.     </tr>
  78.     <tr>
  79.         <td></td>
  80.         <td></td>
  81.         <td></td>
  82.         <td></td>
  83.     </tr>
  84.     <tr>
  85.         <td></td>
  86.         <td></td>
  87.         <td></td>
  88.         <td></td>
  89.     </tr>
  90.     <tr>
  91.         <td></td>
  92.         <td></td>
  93.         <td></td>
  94.         <td></td>
  95.     </tr>
  96. </table>
  97. </body>
  98. <script type="text/javascript">
  99.     var span = document.getElementById("span");
  100.     var but = document.getElementById("but");
  101.     var td = document.getElementsByTagName("td");
  102.     //定义得分
  103.     var score = 0;
  104.     //定义随机数
  105.     var random = document.getElementById("random");
  106.     var showNums = [2,4,8,16,32,64,128,256,512,1024];
  107.     var showNum = 0;
  108.     //定义背景色数组
  109.     var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
  110.                 "rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
  111.     //初始化程序,生成随机数
  112.     /* start */
  113.     function init(){
  114.         var max = maxNum();
  115.         var num = 0;
  116.         for(var i=4;i > 0;i++){
  117.             if(max < Math.pow(2,i+1)){
  118.                 num = parseInt(Math.random()*i);
  119.                 break;
  120.             }else if(max < 2048){
  121.                 continue;
  122.             }else{
  123.                 num = parseInt(Math.random()*showNums.length);
  124.                 break;
  125.             }
  126.         }
  127.         random.innerHTML = showNums[num];
  128.         color(random);
  129.         showNum = showNums[num];
  130.     }
  131.     init();
  132.     /* end */
  133.     
  134.     //获取棋盘中的最大值
  135.     /* start */
  136.     function maxNum(){
  137.         var max = 0;
  138.         for(var i=0;i<td.length;i++){
  139.             if(td[i].innerHTML == ""){
  140.                 max = max;
  141.             }else{
  142.                 if(parseInt(td[i].innerHTML) > max){
  143.                     max = parseInt(td[i].innerHTML);
  144.                 }else{
  145.                     max = max;
  146.                 }
  147.             }
  148.         }
  149.         return max;
  150.     }
  151.     /* end */
  152.     
  153.     //根据数字显示背景颜色
  154.     /* start */
  155.     function color(obj){
  156.         for(var i=0;i < colors.length;i++){
  157.             if(obj.innerHTML == Math.pow(2,i+1)){
  158.                 obj.style = "background-color: "+colors[i]+";";
  159.                 break;
  160.             }
  161.         }
  162.     }
  163.     /* end */
  164.     
  165.     //合并算法
  166.     /* start */
  167.     function offsetTop(obj,index){//合并上
  168.         if(index > 3){
  169.             if(td[(index-4)].innerHTML == obj.innerHTML){
  170.                 td[(index-4)].innerHTML = "";
  171.                 td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
  172.                 return true;
  173.             }
  174.         }
  175.         return false;
  176.     }
  177.     function offsetBottom(obj,index){//合并下
  178.         if(index < 12){
  179.             if(td[(index+4)].innerHTML == obj.innerHTML){
  180.                 td[(index+4)].innerHTML = "";
  181.                 td[(index+4)].style = "background-color: rgba(0, 0, 0, 0);";
  182.                 return true;
  183.             }
  184.         }
  185.         return false;
  186.     }
  187.     function offsetLeft(obj,index){//合并左
  188.         if(index!=0 && index!=4 && index!=8 && index!=12){
  189.             if(td[(index-1)].innerHTML == obj.innerHTML){
  190.                 td[(index-1)].innerHTML = "";
  191.                 td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
  192.                     return true;
  193.             }
  194.         }
  195.         return false;
  196.     }
  197.     function offsetRight(obj,index){//合并右
  198.         if(index!=3 && index!=7 && index!=11 && index!=15){
  199.             if(td[(index+1)].innerHTML == obj.innerHTML){
  200.                 td[(index+1)].innerHTML = "";
  201.                 td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";
  202.                 return true;
  203.             }
  204.         }
  205.         return false;
  206.     }
  207.     /* end */
  208.     
  209.     //判断单元格是否合并
  210.     /* start */
  211.     function merge(obj,index){
  212.         if(offsetTop(obj,index)){
  213.             if(offsetBottom(obj,index)){
  214.                 if(offsetLeft(obj,index)){
  215.                     if(offsetRight(obj,index)){
  216.                         obj.innerHTML = parseInt(obj.innerHTML)*2;//合并上、下、左、右
  217.                         score += 16;
  218.                         merge(obj,index);
  219.                     }else{
  220.                         obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下、左
  221.                         score += 8;
  222.                         merge(obj,index);
  223.                     }
  224.                 }else if(offsetRight(obj,index)){
  225.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下、右
  226.                     score += 8;
  227.                     merge(obj,index);
  228.                 }else{
  229.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、下
  230.                     score += 4;
  231.                     merge(obj,index);
  232.                 }
  233.             }else if(offsetLeft(obj,index)){
  234.                 if(offsetRight(obj,index)){
  235.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左、右
  236.                     score += 8;
  237.                     merge(obj,index);
  238.                 }else{
  239.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、左
  240.                     score += 4;
  241.                     merge(obj,index);
  242.                 }
  243.             }else if(offsetRight(obj,index)){
  244.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上、右
  245.                 score += 4;
  246.                 merge(obj,index);
  247.             }else{
  248.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并上
  249.                 score += 2;
  250.                 merge(obj,index);
  251.             }
  252.         }else if(offsetBottom(obj,index)){
  253.             if(offsetLeft(obj,index)){
  254.                 if(offsetRight(obj,index)){
  255.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左、右
  256.                     score += 8;
  257.                     merge(obj,index);
  258.                 }else{
  259.                     obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、左
  260.                     score += 4;
  261.                     merge(obj,index);
  262.                 }
  263.             }else if(offsetRight(obj,index)){
  264.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下、右
  265.                 score += 4;
  266.                 merge(obj,index);
  267.             }else{
  268.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并下
  269.                 score += 2;
  270.                 merge(obj,index);
  271.             }
  272.         }else if(offsetLeft(obj,index)){
  273.             if(offsetRight(obj,index)){
  274.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并左、右
  275.                 score += 4;
  276.                 merge(obj,index);
  277.             }else{
  278.                 obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并左
  279.                 score += 2;
  280.                 merge(obj,index);
  281.             }
  282.         }else if(offsetRight(obj,index)){
  283.             obj.innerHTML = parseInt(obj.innerHTML)*2;//仅合并右
  284.             score += 2;
  285.             merge(obj,index);
  286.         }
  287.     }
  288.     /* end */
  289.     
  290.     //main
  291.     /* start */
  292.     function gameOver(){
  293.         for(var i=0;i<td.length;i++){
  294.             if(td[i].innerHTML == ""){
  295.                 break;
  296.             }
  297.             if(i == 15){
  298.                 alert("很遗憾！本局游戏结束。。。");
  299.             }
  300.         }
  301.     }
  302.     /* end */
  303.     
  304.     //main
  305.     /* start */
  306.     (function(){
  307.         for(var i=0;i<td.length;i++){
  308.             var choose = td[i];
  309.             choose.index = i;
  310.             choose.onclick = function(){
  311.                 if(this.innerHTML == ""){
  312.                     this.innerHTML = showNum;
  313.                     merge(this,this.index);
  314.                     if(this.innerHTML >= 2048){
  315.                         this.innerHTML = "";
  316.                         this.style = "background-color: rgba(0, 0, 0, 0);";
  317.                     }
  318.                     color(this);
  319.                     init();
  320.                 }
  321.                 updateScore();
  322.                 gameOver();
  323.             }
  324.         }
  325.     })();
  326.     /* end */
  327.     
  328.     //更新得分
  329.     /* start */
  330.     function updateScore(){
  331.         if(score > 500){
  332.             span.style = "color: rgb(255,0,0)";
  333.         }else if(score > 100){
  334.             span.style = "color: rgb(255,0,255)";
  335.         }else if(score > 50){
  336.             span.style = "color: rgb(255,255,0)";
  337.         }else if(score > 20){
  338.             span.style = "color: rgb(0,0,255)";
  339.         }else if(score > 10){
  340.             span.style = "color: rgb(0,255,0)";
  341.         }
  342.         span.innerHTML = score;
  343.     }
  344.     /* end */
  345.     
  346.     //新游戏
  347.     /* start */
  348.     but.onclick = function(){
  349.         location.reload();
  350.     }
  351.     /* end */
  352.     
  353. </script>
  354. </html>

原文链接：http://www.cnblogs.com/smileZAZ/p/14722401.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号