html+CSS+js 一个2048小游戏

dengji1882

于 2019-08-14 17:25:00 发布

阅读量232

点赞数

文章标签：游戏 java javascript ViewUI

原文链接：http://www.cnblogs.com/hjc-12580/p/11353400.html

版权

这几天看js 的教程看到头晕，觉得这种方法不适合我，效率贼低。我还是有已丢丢的java基础，于是想做一个小东西提高自己，印证一下这几个星期的所学。

于是想写一个2048的小游戏。上网看了很多大神的代码，有点思路，最后成功啦！

GitHub连接：https://github.com/514870106/hjc

具体的思路是html方面利用table 创建一个4*4的矩阵，在js中创建一个二维数组与矩阵一一对应，写一个绘图函数通过二维数组中的内容更改矩阵样式和内容。

具体都做了注释：

html：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>2048小游戏</title>
       <link rel="stylesheet" type="text/css" href="小游戏样式.css"/>
   </head>
   <body οnlοad="read()">
       <div id="game">
           <h1 class="h1">boy ♂ next door</h1>
           <p id="p1">使用键盘方向键↑ ↓ ← →控制，出现2048即为胜利</p>
           <p id="p2">你已经尝试0次</p>
           <button type="button" id="button" οnclick="read()">重新开始</button>
           <table border="1" id="table">
               <tr><td id="00" style=""></td><td id="01" style=""></td><td id="02" style=""></td><td id="03" style=""></td></tr>
               <tr><td id="10" style=""></td><td id="11" style=""></td><td id="12" style=""></td><td id="13" style=""></td></tr>
               <tr><td id="20" style=""></td><td id="21" style=""></td><td id="22" style=""></td><td id="23" style=""></td></tr>
               <tr><td id="30" style=""></td><td id="31" style=""></td><td id="32" style=""></td><td id="33" style=""></td></tr>
           </table>
       </div>
       <script src="算法部分.js" type="text/javascript" charset="utf-8"></script>
   </body>
</html>

CSS：

#game{
   border: 5px solid black;
   height: 600px;
   width: 500px;
   margin:0 auto;
}
.h1{
   text-align: center;
}
#p1{
   text-align: center;
}
#p2{
   text-align: center;
}
#button{
   float: right;
   margin-right: 200px;
   width: 100px;
   height: 60px;
}
#table{
   width: 300px;
   height: 300px;
   text-align:center;
   margin:0 auto;
}
tr,td{
   width: 18%;
   height: 18%;
}

js：

var x;
var c=0;
function read(){
   // 创建一个4*4的二维数组x全部赋值为0
   x=new Array(4);
   for (i=0;i<x.length;i++) {
       x[i]=[0,0,0,0];
   }
   //获得随机坐标，将数组x对应坐标内的数改为2
   var a,b,a1,b1;
   a=Math.round(Math.random()*3);
   b=Math.round(Math.random()*3);
   x[a][b] = 2;
   //获得随机坐标，判断坐标不重复，将数组x对应坐标内的数改为4
   while(1){
       a1 = Math.round(Math.random()*3);
       b1 = Math.round(Math.random()*3);
       if(a1 != a || b2 != b){
           x[a1][b1] = 4 ;
           break;
       }
   }
   //调用数字与图像书写函数
   font();
   color();
   //变更<p>中的已尝试次数
   document.getElementById("p2").innerHTML=("你已经尝试"+ c +"次")
   c+=1;
}

//依次将数组x内数字填充到table中对应的td中，如果为0，则填写空；
function font(){
   for (i=0;i<x.length;i++) {
       for (j=0;j<x.length;j++) {
           var td = document.getElementById(i+""+j);
           if(x[i][j] != 0)
           {
               td.innerHTML = x[i][j];
           }
           else
           {
               td.innerHTML = " ";
           }
       }
   }
}
// 遍历x数组,获得对应table 的 td,再通过值来更改对应 td 的背景颜色
function color(){
   for (i=0;i<x.length;i++) {
       for (j=0;j<x.length;j++) {
           var td = document.getElementById(i+""+j);
           var num = x[i][j];
           switch(num){
           case 2:
                td.style="
                break;
           case 4:
                td.style="background-color:#FFEFD1";
                break;
           case 8:
                td.style="
                break;
           case 16:
                td.style="background-color:#FFDEAD";
                break;
           case 32:
                td.style="
                break;
           case 64:
                td.style="background-color:#F08080";
                break;
           case 128:
                td.style="
                break;
           case 256:
                td.style="background-color:#FF69B4";
                break;
           case 512:
                td.style="
                break;
           case 1024:
                td.style="background-color:#FF4500";
                break;
           default:
                td.style="
                break;
           }
           if(num==1024){
               alert("恭喜你成功通关，获得香蕉君的友谊");
               return;
           }
       }
   }
}

//监听键盘按钮按下情况，根据keyCode返回值判断按下了哪个键并执行函数,再进行重新绘图（调用font（）、color（））
window.onkeydown = function(){
   var boy = event.keyCode;
   switch(boy){
   case 37://左
       onleft();
       font();
       color();
       break;
   case 38://上
       ontop();
       font();
       color();
       break;
   case 39://右
       onright();
       font();
       color();
       break;
   case 40://下
       onbelow();
       font();
       color();
       break;
   }
}

//用户按了左
function onleft(){
   for (i = 0;i < x.length; i++){
       var x1 = new Array(0,0,0,0);//创建一个临时数组x1
       var ace=0;
       for(j = 0;j < x.length; j++){//将x数组当前行的有效数组赋值给x1
           if(x[i][j] != 0){
               x1[ace] = x[i][j];
               ace+=1;
           }
       }
       for(j=0;j<x1.length-1;j++){
           if(x1[j] == x1[j+1]){ //判断相邻数是否相等，若相等则左边的数翻倍
               x1[j]*=2;
               var k=j+1;         //记录相等数对右边数的下标
               while(k<x1.length-1){//右边所有数向左移动
                   x1[k] = x1[k+1];
                   k+=1;
               }
           x1[3]=0; //将最后一位赋值为0，为了table满了不立即结束。
           }
       }
       x[i]=x1;//将x数组更新
   }
   newnum();//随机出现2 或者 4 在数组内
}

//用户按了上
function ontop(){
   for (i = 0;i < x.length; i++){
       var x1 = new Array(0,0,0,0);
       var ace=0;
       for(j = 0;j < x.length; j++){
           if(x[j][i] != 0){
               x1[ace] = x[j][i];
               ace+=1;
           }
       }
       for(j=0;j<x1.length-1;j++){
           if(x1[j] == x1[j+1]){
               x1[j]*=2;
               var k=j+1;
               while(k<x1.length-1){
                   x1[k] = x1[k+1];
                   k+=1;
               }
           x1[3]=0;
           }
       }
       for(j=0;j<x.length;j++){
           x[j][i]=x1[j];
       }
   }
   newnum();
}
//用户按了右
function onright(){
   for (i = 0;i < x.length; i++){
       var x1 = new Array(0,0,0,0);
       var ace=3;
       for(j = 3;j >= 0; j--){
           if(x[i][j] != 0){
               x1[ace] = x[i][j];
               ace-=1;
           }
       }
       for(j=3;j>0;j--){
           if(x1[j-1] == x1[j]){
               x1[j]*=2;
               var k=j-1;
               while(k>0){
                   x1[k] = x1[k-1];
                   k-=1;
               }
           x1[0]=0;
           }
       }
       x[i]=x1;
   }
   newnum();
}

// 用户按了下
function onbelow(){
   for (i = 0;i < x.length; i++){
       var x1 = new Array(0,0,0,0);
       var ace=3;
       for(j = 3;j >=0 ; j--){
           if(x[j][i] != 0){
               x1[ace] = x[j][i];
               ace-=1;
           }
       }
       for(j=3; j>0 ;j--){
           if(x1[j-1] == x1[j]){
               x1[j]*=2;
               var k=j-1;
               while(k<0){
                   x1[k] = x1[k-1];
                   k-=1;
               }
           x1[0]=0;
           }
       }
       for(j=0;j<x.length;j++){
           x[j][i]=x1[j];
       }
   }
   newnum();
}

function newnum(){
   // 遍历数组x.若没有等于0的元素,游戏结束.输了
   var flag = false;
   for (i=0;i<x.length;i++) {
       for (j=0;j<x.length;j++) {
           if(x[i][j] == 0){
               flag=true;
               break;
           }
       }
   }
   if(flag==false){
       alert("兄弟，智商堪忧啊");
       return;
   }
   var a,b,q;
   // 获得一个随机的坐标
   while(true){
       a = Math.round(Math.random()*3);
       b = Math.round(Math.random()*3);
       if(x[a][b]==0){
           break;
       }
   }
   // 获得一个2或者4，并赋值给所得到的随机坐标
   while(true){
       q =Math.round(Math.random()*6);
       if(q==2|| q==4){
           break;
       }
   }
   x[a][b] = q;
}