谈谈2048小游戏怎么用HTML+CSS+JS实现它

最新推荐文章于 2023-12-25 15:10:36 发布
最新推荐文章于 2023-12-25 15:10:36 发布
阅读量481 收藏 1
点赞数
分类专栏： javascript 文章标签： 2048小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csxazdas/article/details/103190950
版权

我们在做2048游戏之前先搞清楚游戏的思路在去完成建议先玩玩游戏在去想怎么做

HTML+CSS部分没啥好说的 直接上图；


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2048</title>
        <link rel="stylesheet" href="css/2048.css" />   
    </head>
    <body>
        <div class="container">
            <div class="container-head">
              SCORE:<span style="color: red;" id="SCORE1" >0</span>
            </div>
            <div class="mian">
        <div class="grid-container">
            <div class="grid-row">
            <div class="grid-cell "     id="n00"></div>
            <div class="grid-cell "     id="n01"></div>
            <div class="grid-cell "     id="n02"></div>
            <div class="grid-cell "     id="n03"></div>
            </div>
            <div class="grid-row">
            <div class="grid-cell"     id="n10"></div>
            <div class="grid-cell"     id="n11"></div>
            <div class="grid-cell"     id="n12"></div>
            <div class="grid-cell" id="n13"></div>
            </div>
            <div class="grid-row" >
            <div class="grid-cell"     id="n20"></div>
            <div class="grid-cell"     id="n21"></div>
            <div class="grid-cell"     id="n22"></div>
            <div class="grid-cell" id="n23"></div>
            </div>
            <div class="grid-row">
            <div class="grid-cell"     id="n30"></div>
            <div class="grid-cell"     id="n31"></div>
            <div class="grid-cell"     id="n32"></div>
            <div class="grid-cell" id="n33"></div>
            </div>
        </div>   
            </div>
            <div  class="gameend" id="Gameover">
                <div class="Gameover" >
                     <p >GAME OVER!!!</p>
                     <p>SCORE:<span  style="color:red" id="SCORE2"></span></p>
                      <a style="display: inline-block;" href="">try again</a>
                </div>
            </div>
        </div>
    </body>
`</html>``
//下面是CSS部分

*{
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.container{
	 width: 550px;
	 height: 550px;
	 margin: 50px auto;
}
.container-head{
	font-family:arial;
	font-size: 40px;
	    text-indent: 23px;
}
.mian{
	 width: 500px;
	 height: 500px;
		margin: auto;
	background: #bbada0;
	position: relative;
	border-radius: 10px;
}
.grid-container{
	 width: 470px;
	 height: 470px;
	 position: absolute;
	padding: 15px 15px 15px 25px;
}
.grid-row{
width: 470px;
	height: 106.28px;
margin-bottom: 15px
}
.grid-cell{
	width: 100.25px;
    height: 106.25px;
    margin-right: 15px;
    float: left;
    border-radius: 3px;
    background: #ccc0b3;
    font-size: 55px;
    line-height: 106.25px;
    text-align: center;
	
}
.n2{
	background-color:#eee3da;
	color:#776e65;
}
.n4{
	 background-color:#ede0c8;
	 color:#776e65;
}
.n8{
	background-color:#f2b179
}
.n16{
	background-color:#f59563
}
.n32{
	background-color:#f67c5f
}
.n64{
	background-color:#f65e3b
}
.n128{
	
	background-color:#edcf72
}
.n256{
	 background-color:#edcc61
}
.n512{
	 background-color:#9c0
}
.n1024{
	background-color:#33b5e5;
	font-size:40px;
}
.n2048{
	background-color:#09c;
	font-size:40px;
}
.n4096{
	background-color:#a6c;
	font-size:40px;
}
.gameend{
	display:none;
	width: 500px;
    height: 500px;
    z-index: 999;
    position: absolute;
    top: 45px;
    background: rgba(50,50,50,0.5);
    left: 32%;
    
}
.Gameover{
	  width: 400px;
	  height: 200px;
	  position: absolute;
	  background: white;
	  border-radius: 5px;
		top: 50%;
		left: 10%;
		font-size: 35px;
		text-align: center;
		line-height: 60px;
		font-family: arial;
}

.Gameover>a{
	border-radius: 5px;
    background: #9F8D77;
    text-decoration: none;
    color: white;
}

剩下的是JS部分
<script type="text/javascript">
              var game ={
                   data:[],//添加一个属性，存储游戏数据
                   score:0,//添加一个分数属性
                   gameover:0,//添加一个游戏结束的状态
                   gamerunning:1,//添加一个游戏运行时状态：
                   startus:1,//表示的是当前游戏的状态，时时刻刻检测该状态，如果这个状态等于1，表示可以继续，如果等于0，结束
                   start:function(){ //添加游戏开始的方法
                      this.startus = this.gamerunning;
                      this.score = 0;
                      this.data=[];
                     for(var r = 0; r < 4; r++){
                         this.data[r]  = [];
                         for(var c = 0; c < 4; c++){
                             this.data[r][c] = 0;
                         }
                     }
                      this.randomNum();
                      this.randomNum();
                      this.dataView();
                      console.log(this.data);
                   },
                   randomNum:function(){   //生成一个随机数的方法
                        for(var i =0; i <1; i--){
                            var r = Math.floor(Math.random() * 4);
                            var c = Math.floor(Math.random() * 4);
                            if(this.data[r][c] == 0){
                                var num=Math.random() > 0.5?2:4;
                                this.data[r][c] = num;
                                break; //退出死循环
                            }
                        }
                   },
                   dataView:function(){  //将数据显示到页面
                       for(var r = 0; r < 4; r++){
                           for(var c = 0; c < 4; c++){
                                var div =document.getElementById("n" + r + c);
                                if(this.data[r][c] ==0){
                                      div.innerHTML="";
                                      div.className = "grid-cell";
                                }else{
                                     div.innerHTML=this.data[r][c];
                                     div.className = "grid-cell n" + this.data[r][c]
                                }
                                
                           }
                       }
                           document.getElementById("SCORE1").innerHTML=this.score;
                        if(this.startus == this.gameover){   //如果游戏处于结束的阶段了，更新视图
                            document.getElementById("SCORE2").innerHTML=this.score; //找到结束时的分数ID，更新分数
                            document.getElementById("Gameover").style.display="block";
                           
                        }else{
                            document.getElementById("Gameover").style.display="none";
                        }
                      
                   },
                    isgameover:function(){ //  判断游戏是否结束的方法
                          // 那，游戏结束需要满足哪些条件呢？
                    // 1.格子全部都不为0的时候 && 相邻的位置不能有相同的
                    // 给函数增加一个返回值,如果false表示还可以继续,ture表示游戏结束
                         for(var r = 0; r < 4; r++){
                               for(var c =0; c < 4; c++){
                                   if(this.data[r][c] ==0){   //如果有等于零的情况，则游戏继续
                                       return false;
                                   }if(c<3){
                                       if(this.data[r][c] ==this.data[r][c+1]){  //检测同一行之间是否有相同
                                           return false
                                       }
                                   }
                                   if(r<3){
                                       if(this.data[r][c] == this.data[r+1][c]){  //检测同一列之间是否有相同
                                           return false;
                                       }
                                   }
                               }
                         }
                         return true;
                    },
                    //左移动开始
                    moveleft:function(){ //给移动之前的数组“拍个照”  因为数组之间不能直接比较(地址问题),所以这里需要先将其转化为字符串,然后才能用于比较
                          var befoer = String(this.data);                
                          console.log(this.data);
                          console.log(befoer);
                          for(var r = 0; r<4; r++){
                              this.moveLeftInRow(r);
                          }
                          var after = String(this.data);//给移动之后的数组“拍个照”
                           console.log(after);
                          if(befoer != after){                     
                            this.randomNum();
                              if(this.isgameover()){
                                  this.startus = this.gameover;
                              }
                              this.dataView();
                          }
                         
                    },
                    moveLeftInRow:function(r){
                        for(var c=0; c<3;c++){
                            var nextc =this.getNextInRow(r,c); //找数字,并依据不同的情况返回值
                            if(nextc  != -1){   //在位置game.data[r][i]上找到了元素
                                 if(this.data[r][c] == 0){
                                     this.data[r][c] =this.data[r][nextc];
                                     this.data[r][nextc] = 0;
                                 }else if(this.data[r][c] ==this.data[r][nextc]){
                                     this.data[r][c] *=2;
                                     this.data[r][nextc] =0;
                                     this.score += this.data[r][c];
                                 }
                            }else{
                                break;
                            }
                        }
                    },
                   getNextInRow:function(r,c){  //找位置的函数
                       for(var i =c+1; i < 4; i++){  //从当前位置的下一个元素开始去找,所以是 c+1(当前位置为c，下一个为c+1)
                           if(this.data[r][i] !=0){  //如果不等于0，则表明位置上存在一个元素
                               return i;  //找到了就把这个位置直接返回出来
                           }
                       }
                       return -1;  //如果没有找到，随意取一个标识符返回回来:表示没有找到
                   },  //左移动结束
                     //右移动开始
                     moveRight:function(){
                            var befoer = String(this.data);                
                          console.log(this.data);
                          console.log(befoer);
                          for(var r = 0; r<4; r++){
                              this.moveRightInRow(r);
                          }
                          var after = String(this.data);//给移动之后的数组“拍个照”
                           console.log(after);
                          if(befoer != after){                     
                            this.randomNum();
                              if(this.isgameover()){
                                  this.startus = this.gameover;
                              }
                              this.dataView();
                          }
                         
                    },
                    moveRightInRow:function(r){
                        for(var c = 3; c > 0;c--){
                            var nextc =this.moveRightNextRows(r,c); //找数字,并依据不同的情况返回值
                            if(nextc  != -1){   //在位置game.data[r][i]上找到了元素
                                 if(this.data[r][c] == 0){
                                     this.data[r][c] =this.data[r][nextc];
                                     this.data[r][nextc] = 0;
                                     c++;// 这一步,重点理解: 当位置替代发生了改变之后,下一次的比较则从下一位开始比较,需要让它回到原点的位置重新从头开始比较
                                 }else if(this.data[r][c] ==this.data[r][nextc]){
                                     this.data[r][c] *=2;
                                     this.data[r][nextc] =0;
                                     this.score += this.data[r][c];
                                 }
                            }else{
                                break;
                            }
                        }
                    },
                     moveRightNextRows:function(r,c){    //找位置的函数
                              for(var j =c-1; j>=0; j--){  //因为从c开始,所以下一位是从 c-1 开始找
                                    if(this.data[r][j] !=0){
                                        return j;
                                    }
                              }
                              return -1;
                        },  //右移动结束
                            //向上移动
                        moveUP:function(){
                        var befoer = String(this.data);                
                          console.log(befoer);
                          for(var c = 0; c<4; c++){
                              this.moveUpInRow(c);
                          }
                          var after = String(this.data);//如果两次拍照不相等，就发生了移动
                          if(befoer != after){                     
                            this.randomNum();
                              if(this.isgameover()){
                                  this.startus = this.gameover;
                              }
                              this.dataView();
                          }
                        },
                        moveUpInRow:function(c){
                            for(var r = 0; r<4;r++){
                            var nextc =this.moveUPNextRows(r,c); //找数字,并依据不同的情况返回值
                            if(nextc  != -1){   //在位置game.data[r][i]上找到了元素
                                 if(this.data[r][c] == 0){
                                     this.data[r][c] =this.data[nextc][c];
                                     this.data[nextc][c] = 0;
                                     r--; //从原地开始，继续往后
                                 }else if(this.data[r][c] ==this.data[nextc][c]){
                                     this.data[r][c] *=2;
                                    this.score +=this.data[r][c];
                                     this.data[nextc][c]=0;
                                 }
                            }else{
                                break;
                            }
                        }
                    },
                       moveUPNextRows:function(r,c){    //找位置的函数
                              for(var j =r+1; j <4; j++){   //如果不为0，表示找到，就返回i，i对应的格子的几个位置
                                    if(this.data[j][c] !=0){
                                        return j;
                                    }
                              }
                              return -1;
                        },
                       
                        //向下移动
                        moveDown:function(){
                        var befoer = String(this.data);                
                          console.log(this.data);
                          console.log(befoer);
                         
                          for(var c = 0; c<4; c++){
                              this.moveDownInRow(c);
                          }
                          var after = String(this.data);//给移动之后的数组“拍个照”
                           console.log(after);
                          if(befoer != after){                     
                            this.randomNum();                             
                            if(this.isgameover()){
                                  this.startus = this.gameover;
                              }
                              this.dataView();
                          }
                       },                      
                      moveDownInRow:function(c){
                    for(var r = 3; r >=0;r--){
                            var nextr =this.moveDownNextRows(r,c); //找数字,并依据不同的情况返回值
                            if(nextr  != -1){   //在位置game.data[r][i]上找到了元素
                                 if(this.data[r][c] == 0){
                                     this.data[r][c] = this.data[nextr][c];
                                     this.data[nextr][c] = 0;
                                     r++;// 这一步,重点理解: 当位置替代发生了改变之后,下一次的比较则从下一位开始比较,需要让它回到原点的位置重新从头开始比较
                                 }else if(this.data[r][c] ==this.data[nextr][c]){
                                     this.data[r][c] *=2;
                                     this.score += this.data[r][c];
                                     this.data[nextr][c]=0;
                                 }
                            }else{
                                break;
                            }
                    }
                },
                       moveDownNextRows:function(r,c){    //找位置的函数
                              for(var j =r-1; j>=0; j--){  //因为从r开始,所以下一位是从 r-1 开始找
                                    if(this.data[j][c] !=0){
                                        return j;
                                    }
                              }
                              return -1;
                        },
                        //向下移动结束
                    }
             
        game.start();
            document.onkeydown = function(event){
                var event = event || e || arguments[0];
                if(event.keyCode == 37){
                    game.moveleft();
                } else if(event.keyCode ==39){
                    game.moveRight();
                }else if(event.keyCode ==38){
                    game.moveUP();
                }else if(event.keyCode ==40){
                    game.moveDown();
                }
               }

                //        addEventListener   
                  document.addEventListener("touchstart",function(event){
                            event = event || window.event;
                          console.log("按下");
                          console.log(event);
                           startX =event.touches[0].pageX;   //获取开始位置的横坐标
                           startY =event.touches[0].pageY    //获取开始位置的纵坐标;
                  });
                  document.addEventListener("touchend",function(event){
                            console.log("抬起");
                            console.log(event);
                             EndX = event.changedTouches[0].pageX; //获取结束位置的横坐标
                             EndY = event.changedTouches[0].pageY; //获取结束位置的横坐标
                            
                            var  aX =EndX - startX;     //获取移动后的距离半段移动到方向
                            var  aY =EndY - startY;
                            var  absX =Math.abs(aX) > Math.abs(aY);
                            var  absY =Math.abs(aY) > Math.abs(aX);
                              //如果aX的值大于0，并且X的绝对值大于Y的说明左移动
                            if( aX<0 && absX){
                                console.log("左移动");
                                game.moveleft();
                            } else if(aX >0 && absX){
                                       console.log("右移动");
                                 game.moveRight();
                            } else if(aY<0 &&  absY ){
                                       console.log("向上移动");
                                game.moveUP();
                            }else if(aY >0 && absY){
                                       console.log("向下移动");
                                game.moveDown();
                            }
                  })
    </script>
前端起步
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2048. html+css+js实现网页版2048小游戏
07-11
2048. html + js + css实现网页版2048小游戏源码，直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
html+css+js 实现2048
weixin_33994444的博客
07-06 93
<!DOCTYPE html><!--suppress ALL --><html lang="en"><head> <meta charset="UTF-8"> <title>2048</title> <style> *{ padding:0; ...
html+js+css+2048,html+css+js 实现2048
weixin_42510222的博客
06-26 147
2048*{padding:0;margin:0;font-family:Arial;}#game-title .title{text-align: center;font-weight: bolder;font-size: 40px;margin: 6px;}#game-window{width:500px;margin:auto;font-weight:700;}#game-window .o...
html做2048游戏的代码,原生JS编写的2048小游戏代码
weixin_42468901的博客
05-30 688
js代码// 模块化开发思路var json={// 创建初始化函数init:function(){var otab= document.querySelector('.tab'),str='',id=1;//返回文档指定的css元素，并保存for(var i=0;i<4;i++){str+='';for(var j=0;j<4;j++){str +='';}str +='';}ota...
html+CSS+js 一个2048小游戏
08-14 215
这几天看js 的教程看到头晕，觉得这种方法不适合我，效率贼低。我还是有已丢丢的java基础，于是想做一个小东西提高自己，印证一下这几个星期的所学。 于是想写一个2048的小游戏。上网看了很多大神的代码，有点思路，最后成功啦！ GitHub连接：https://github.com/514870106/hjc 具体的思路是html方面利用table 创建一个4*4的矩阵，在js中创建...
html+css+javascript 实现小游戏 2048
10-15
编程语言：html+css+js 开发工具：viscode or webstorm or Dw or HBuilder 基于html+css+javascript 开发的小游戏 2048
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
html+css+js实现2048小游戏完整代码
08-17
html+css+js实现2048小游戏完整代码，内含音乐播放器
2048小游戏，Java+css+html
最新发布
03-18
2048小游戏是基于网站开发的，电脑玩家可以通过上下左右控制方向，手机玩家可以通过滑动屏幕进行操作。系统使用js进行前端交互，css设置界面样式，操作简单，代码有详细注释，适合小白学习。 tips：将代码放下载到...
html+css+js实现2048小游戏（PC）
杨家的小胖几的博客
04-03 2765
html+js+css实现PC2048小游戏，代码非原创，来源：源码之家。但是在之前源码的基础上稍作样式修改，效果图如下，大家自行借鉴即可： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2048小游戏</title> &lt...
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（四）
weixin_41306215的博客
07-28 1204
4.1游戏循环 大多数游戏采用的是基于时间的游戏循环 这种循环会随着时间的流逝更新游戏数据 根据时间流逝判断游戏是否结束 比如：星际争霸、魔兽争霸 另一类是基于玩家响应的游戏循环 这种游戏循环是基于玩家响应而更新游戏数据 玩家响应后继续判断游戏是否结束 比如：棋类游戏，2048游戏 4.2 基于玩家响应的游戏循环 那么我们怎么接收玩家的操作呢？也就是说，玩家如何控制游戏的进行？ 2048游戏是玩家通过键盘上下左右操作，进而推进游戏的继续，于是，我们需要获取玩家的按键信息 这里，我们需要使用keydown事
移动端 监听手指滑动方向
qq_41990338的博客
03-15 337
高产是母猪，这个是转载一位大佬的，但是我忘了是哪位大佬了，发布只为了自己以后方便使用~ // initTouch var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else if (element.attach
CSS小游戏2048—简单小游戏编程有手就行~会玩？你会写吗？
PC_372的博客
03-05 367
简单实现2048小游戏 想实现2048游戏书写代码时可以分为三个步骤 一、HTML部分 先书写HTML把游戏结构搭建出来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </h...
使用html+css+JavaScript实现2048
归墟
01-23 1002
2048游戏代码及思路关于游戏关于代码html代码css代码JavaScript代码main.jscontrol.jssupport.jsgamePlay.js写的原因仍然有的缺陷最后，github 关于游戏 《2048》，是一款益智小游戏，这款游戏是由年仅19岁的意大利程序员加布里勒希鲁尼（Gabriele Cirulli）开发出来的，官方版本只能在网页上或通过其移动网站运行。 2048游戏共有...
html2048游戏算法逻辑,2048游戏逻辑实现
weixin_34533343的博客
06-08 218
#include "HelloWorldScene.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"#include "CardSprite.h"#include#include "test.h"USING_NS_CC;#define RWO 4#define LIE 4using namespace cocostudio...
html5 如何实现自动射击,基于HTML5实现的横版射击游戏详解
weixin_42314680的博客
05-30 255
功能说明：基于HTML5的横版射击游戏，参考自flash游戏《双面特工》。左右方向键控制移动，下方向键蹲下，上方向键跳跃，空格键射击。体验前请先关闭输入法。该游戏基于自己开发的HTML5游戏框架cnGameJS。效果预览：实现分析：1.关于多层地图。在上一个HTML5游戏《坦克后援队》中，所用的地图只为简单的单层地图，意思是地图中除了石头就是空地，仅仅只有一层的地图。但是这种单层地图具有比较大的局...
html+css+javascript实现小游戏2048（详解，附源代码）
baiqi123456的博客
08-05 6690
html+css+javascript实现小游戏2048（详解，附源代码） 上下左右的移动原理相同，这里只详细说明向上移动的方法 这里的上下左右由wasd四个键控制 html部分 先创建好2048的一个静态布局 zuiwaibian：一个大的框框，整体的游戏界面。 caidan：用于显示当前得分的区域。 a1，a2，a3，a4：是第一行的小方块。 b1，b2，b3，b4：是第二行的小方块。 c1，c2，c3，c4：是第三行的小方块。 d1，d2，d3，d4：是第四行的小方块。 <div id="zui
html+css+JavaScript实现*{2048}小游戏,单机游戏（代码）
2302_81218205的博客
12-25 935
新游戏
用html+css+js做一个小游戏
04-27
好的，我可以为您提供一些关于如何使用 HTML、CSS 和 JavaScript 制作小游戏的指导。 首先，您可以考虑使用 HTML 创建游戏的基本框架，包括游戏画面、分数、计时器等。然后使用 CSS 设计游戏画面的样式，包括颜色、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值