지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 JS 튜토리얼 Tetris 웹 버전_javascript 기술을 작성하기 위한 JAVASCRIPT 코드

Tetris 웹 버전_javascript 기술을 작성하기 위한 JAVASCRIPT 코드

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:29 PM

테트리스는 원래의 흑백 휴대용 게임기부터 TV 게임기, 컴퓨터에 이르기까지 그 흔적이 남아 있는 게임입니다. 오늘은 그 구현 방식 중 하나를 정리해보겠습니다. 내 생각엔...

HTML CSS JS는 테트리스 정식 버전을 구현합니다. 자료는 사진뿐입니다. 원하는 사진을 다운로드하고 프롬프트 이름에 따라 저장하세요. ! 주로 JS에서! JS에는 자세한 설명이 제공됩니다

효과:

핵심 팁: [키보드 키]

소재: 이미지 이름은 코드에 해당합니다

1. 배경 이미지 : tetris.png

　

2. 실패시 팝업창 사진 : game-over.png

　

3. 일곱 가지 색깔의 작은 사각형 사진:

I.png：

J.png：

L.png：

O.png：

S.png：

　T.png：

Z.png：

HTML 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>俄罗斯方块 — 经典完整版</title>
    <link rel="stylesheet" href="css/tetris.css"/>
    <script src="js/shapes.js"></script>
    <script src="js/tetris.js"></script> 
  </head>
  <body>
    <div class="playground">
      <p>SCORE:<span>0</span></p>
      <p>LINES:<span>0</span></p>
      <p>LEVEL:<span>1</span></p>
    </div>       
  </body>
</html>
로그인 후 복사

CSS 코드

.playground {
  width: 525px;
  height: 550px;
  margin: 20px auto 0 auto;
  position: relative;
  background-image:url("tetris.png");
}
.playground img { position: absolute;}
.playground p {font-size: 30px;
        font-family: 'SimHei';
        font-weight: bold;
        color: #667799;
        position: absolute;
        left:305px;
        top:120px;
}
.playground p+p { top:176px; }
.playground p+p+p { top:232px; }
로그인 후 복사

JAVASCRIPT 코드: 두 문단으로 나누어 자세한 단계별 설명

　1. tetris.js

window.$=HTMLElement.prototype.$=function(selector){
  return (this==window&#63;document:this).querySelectorAll(selector);
}
var tetris={
  RN:20,//总行数
  CN:10,//总列数
  CSIZE:26,//每个格子的宽高都是26px
  OFFSET_X:15,//每个单元格的左侧都要加15px
  OFFSET_y:15,//每个单元格的上面都要加15px
  pg:null,//保存游戏主界面对象
  currShape:null,//专门保存正在移动的图形对象
  nextShape:null,//八、专门保存下一个图形
  interval:500,//每秒重绘一次==>下落的速度
  timer:null,
  wall:[],//六、保存所有停止的下落的方块
  state:1,//十、保存游戏当前状态
  STATE_RUNNING:1,//十、游戏正在运行
  STATE_GAMEOVER:0,//十、游戏结束
  STATE_PAUSE:2,//十、游戏暂停
  IMG_GAMEOVER:"img/game-over.png",
  IMG_PAUSE:"img/pause.png",
  SCORES:[0,10,50,80,200],//十三,要加的分数档位
  score:0,//十三、当前总分
  lines:0,//十三、当前总行数
  //十、为游戏添加不同状态的图片
  paintState:function(){//根据当前游戏状态，为游戏添加不同的图片
    var img=new Image();
    switch(this.state){
    //如果当前状态是STATE_GAMEOVER
    case this.STATE_GAMEOVER:
    //   img.src设置为IMG_GAMEOVER
      img.src=this.IMG_GAMEOVER;
      break;
    //如果当前状态是STATE_PAUSE
    case this.STATE_PAUSE:
    //   img.src设置为IMG_PAUSE
      img.src=this.IMG_PAUSE;
    }
    //将img追加到pg中
    this.pg.appendChild(img);
  },
  init:function(){
    this.pg=$(".playground")[0];
    //创建一个随机图形的对象存在currShape中
    this.currShape=this.randomShape();
    this.nextShape=this.randomShape();
    //六、将wall数组初始化为RN的空数组对象
    for(var i=0;i<this.RN;i++){
      this.wall[i]=[];
    }
    this.score=0;//十六、初始化
    this.lines=0;//十六、初始化
    this.state=1;//十六、初始化
    this.paint();
    //三、
    this.timer=setInterval(function(){
      //调用tetris的drop方法
      tetris.drop();
      //再调用tetris的paint方法;
      tetris.paint();
    },this.interval);
    //十一、
    document.onkeydown=function(){
      var e=window.event||arguments[0];
      switch(e.keyCode){
        case 37: tetris.moveL();break;//左
        case 39: tetris.moveR();break;//右
        case 40: tetris.drop();break;//下
        //十五步、
        case 38: tetris.rotateR();break;//上键控制右边旋转
        case 90: tetris.rotateL();break;//字母Z键控制控制左边旋转
        //十六步
        case 80: tetris.pause();break;//字母P键：暂停
        case 81: tetris.gameOver();break;//字母Q：结束游戏
        case 67: tetris.myContinue();break;//字母C，在暂停后有效：暂停后，继续游戏
        case 83: //游戏结束后，重新开始
          if(this.state==this.STATE_GAMEOVER){
            tetris.init();
          }//字母S键：重新开始游戏
      }
    }
  },//init的结束
  //十六、暂停，开始，继续、结束
  gameOver:function(){
    this.state=this.STATE_GAMEOVER;
    clearInterval(this.timer);
    this.timer=null;
    this.paint();
  },
  pause:function(){
    if(this.state==this.STATE_RUNNING){
      this.state=this.STATE_PAUSE;
    }
  },
  myContinue:function(){
    if(this.state==this.STATE_PAUSE){
      this.state=this.STATE_RUNNING;
    }
  },
  //十五、变形
  rotateR:function(){//按键上，向右旋转
    if(this.state==this.STATE_RUNNING){//十六
      this.currShape.rotateR();
      if(this.outOfBounds()||this.hit()){//验证不通过
        this.currShape.rotateL();
      }
    }
  },
  rotateL:function(){//按键Z，向左旋转
    if(this.state==this.STATE_RUNNING){
      this.currShape.rotateL();
      if(this.outOfBounds()||this.hit()){//验证不通过
        this.currShape.rotateR();
      }
    }
  },
  //十一、
  moveR:function(){
    this.currShape.moveR();
    if(this.outOfBounds()||this.hit()){//验证不通过
      this.currShape.moveL();
    }
  },
  moveL:function(){
    this.currShape.moveL();
    if(this.outOfBounds()||this.hit()){//验证不通过
      this.currShape.moveR();
    }
  },
  outOfBounds:function(){//检查当前图形是否越界
    //当前shape中任意一个单元格的col<0或>=CN
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(cells[i].col<0||cells[i].col>=this.CN){
        return true;
      }
    }
    return false;
  },
  hit:function(){//检查当前图形是否碰撞
  //当前shape中任意一个单元格在wall中相同位置有格
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(this.wall[cells[i].row][cells[i].col]){
        return true;
      }
    }
    return false;
  },
  //四、重绘所有的格子，分数等的方法
  paint:function(){
    //把所有的img格子删除，再重绘
        /*结尾的4个/<img(.*&#63;){4}>*/
    this.pg.innerHTML=this.pg.innerHTML.replace(/<img(.*&#63;)>/g,"");
    this.paintShape();
    this.paintWall();
    this.paintNext();
    //十三
    this.paintScore();
    this.paintState();//十、
  },
  //十三、计分
  paintScore:function(){//找到span元素
    //第一个span中放this.score
    $("span")[0].innerHTML=this.score;
    //第二个放this.lines
    $("span")[1].innerHTML=this.lines;
  },
  drop:function(){
    //判断能否下落
    if(this.state==this.STATE_RUNNING){//该行是第十六步加的
      if(this.canDrop()){
        this.currShape.drop();
      }else{//六、否则
        //六、如果不能下落，就将图形中每个cell，放入wall数组中
        this.landIntoWall();
        //十二、消行、并计分
        var ln=this.deleteLines();//消除并返回本次删除的行数
        //十三、计分
        this.score+=this.SCORES[ln];
        this.lines+=ln;
        //九、如果游戏没有结束才。。
        if(!this.isGameOver()){
          //七、将等待的nextShape，换到currShape
          this.currShape=this.nextShape;
          //七、
          this.nextShape=this.randomShape();
        }else{//十、否则，一级结束
          clearInterval(this.timer);
          this.timer=null;
          this.state=this.STATE_GAMEOVER;
          this.paint();//手动绘制一次
        }
      }
    }
  },
  //十二、消行，并计分
  deleteLines:function(){//检查wall中每一行是否要消除
    //遍历wall中每一行,定义lines变量存本次共删除的行数line
    for(var row=0,lines=0;row<this.RN;row++){
      //如果当前行是满的:isFull(row)
      if(this.isFull(row)){
        // 就删除当前行：
        this.deleteL(row);
        // 每删除一行，lines++
        lines++;
      }
    }
    return lines;
  },
  isFull:function(row){//判断指定行是否已满
    //取出wall中第row行，存在line变量中
    var line=this.wall[row];    
      //遍历line中每个cell
    for(var c=0;c<this.CN;c++){
      // 只要当前cell无效
      if(!line[c]){
        return false;
      }
    }//遍历结束后
    return true;
  },
  deleteL:function(row){//删除指定行，并将其之上所有的cell下移
    this.wall.splice(row,1);//只删除一行
    this.wall.unshift([]);//顶部压入一个新空行
    //从row行开始，向上遍历每一行
    for(var r=row;r>0;r--){
      //   从0开始遍历当前行每个格
      for(var c=0;c<this.CN;c++){
      //     如果当前格有效
        if(this.wall[r][c]){
        //       将当前格的row++
          this.wall[r][c].row++;
        }
      }
    }
  },
  //九、判断游戏是否结束
  isGameOver:function(){
    //获取nextShape中所有cell，保存在cells中
    var cells=this.nextShape.cells;
    //遍历cells中每个cell
    for(var i=0;i<cells.length;i++){
      //取出wall中和当前cell相同row，col位置的格子
      var cell=this.wall[cells[i].row][cells[i].col];
      //只要碰到有效的
      if(cell){
        return true;
      }
    }//for的结束
    return false;
  },
  //八、
  paintNext:function(){
    var cells=this.nextShape.cells;
    for(var i=0;i<cells.length;i++){
      //先将当前cell的row+1,存在r变量中
      var r=cells[i].row+1;
      //再将当前cell的col+11,存在c变量中
      var c=cells[i].col+11;
      var x=c*this.CSIZE+this.OFFSET_X;
      var y=r*this.CSIZE+this.OFFSET_y;
      var img=new Image();
      img.src=cells[i].img;
      img.style.left=x+"px";
      img.style.top=y+"px";
      this.pg.appendChild(img);
    }
  },
  //七、
  paintWall:function(){
    //七、遍历二维数组wall中每个格
    for(var r=0;r<this.RN;r++){
      for(var c=0;c<this.CN;c++){
        var cell=this.wall[r][c];
    //   如果当前cell有效
        if(cell){
          var x=cell.col*this.CSIZE+this.OFFSET_X;
          var y=cell.row*this.CSIZE+this.OFFSET_y;
          var img=new Image();
          img.src=cell.img;
          img.style.left=x+"px";
          img.style.top=y+"px";
          this.pg.appendChild(img);
        }
      }
    }
  },
  //六、把所有停止下落的方块放入wall中
  landIntoWall:function(){
    //遍历当前图形中每个cells
    // 每遍历一个cell
    // 就将cell放入wall中相同row，col的位置:this.wall[&#63;][&#63;]=&#63;
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      this.wall[cells[i].row][cells[i].col]=cells[i];
    }
  },
  //五、//判断是否继续可以下落
  canDrop:function(){
    //遍历当前currShape中的cells
    //   只要发现任意一个的cell的row==RN-1
    //   就返回false
    //   
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(cells[i].row==this.RN-1){
        return false;
      }//七、wall中，当前cell的下一行位置有效
      if(this.wall[cells[i].row+1][cells[i].col]){
        return false
      }
    }//遍历结束后
    //七、currShape中，任意一个cell的下方有wall中的cell
    return true;
  },
  //4、随机生成一种图形--二
  randomShape:function(){
    switch(parseInt(Math.random()*7)){
      case 0: return new O();
      case 1: return new L();
      case 2: return new J();
      case 3: return new S();
      case 4: return new Z();
      case 5: return new I();
      case 6: return new T();
    }
  },
  //3
  paintShape:function(){//3、专门绘制当前图形的方法
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      var x=cells[i].col*this.CSIZE+this.OFFSET_X;
      var y=cells[i].row*this.CSIZE+this.OFFSET_y;
      var img=new Image();
      img.src=cells[i].img;
      img.style.left=x+"px";
      img.style.top=y+"px";
      this.pg.appendChild(img);
    }
  },//paintShape的结束
}//tetris结束
window.onload=function(){
  tetris.init();
}
로그인 후 복사

2.shape.js

function Cell(row,col,img){
  this.row=row;
  this.col=col;
  this.img=img;
  //三下落
  if(!Cell.prototype.drop){
    Cell.prototype.drop=function(){
      this.row++;
    }
  }
  if(!Cell.prototype.moveR){//十一
    Cell.prototype.moveR=function(){
      this.col++;
    }
  }
  if(!Cell.prototype.moveL){//十一
    Cell.prototype.moveL=function(){
      this.col--;
    }
  }
}
//十四、下落的各种变化状态
function State(r0,c0,r1,c1,r2,c2,r3,c3){
  //第0个cell相对于参照cell的下标偏移量
  this.r0=r0;
  this.c0=c0;
  //第1个cell相对于参照cell的下标偏移量
  this.r1=r1;
  this.c1=c1;
  //第2个cell相对于参照cell的下标偏移量
  this.r2=r2;
  this.c2=c2;
  //第3个cell相对于参照cell的下标偏移量
  this.r3=r3;
  this.c3=c3;
}
function Shape(img,orgi){
  this.img=img;
  this.states=[];//十四、保存每个图形不同状态的数组
  this.orgi=orgi;//十四、以它为固定不变的参照点，去旋转变形，就是数组states的下标
  this.statei=0;//默认所有图形的最初状态都是0
  //三
  if(!Shape.prototype.drop){
    Shape.prototype.drop=function(){
      //遍历当前对象的cells中的每个cell对象
      //  调用当前cell对象的drop方法
      for(var i=0;i<this.cells.length;i++){
        this.cells[i].drop();
      }
    }
  }
  if(!Shape.prototype.moveR){//十一
    Shape.prototype.moveR=function(){
      //遍历当前对象的cells中的每个cell对象
      for(var i=0;i<this.cells.length;i++){
      //  调用当前cell对象的drop方法
        this.cells[i].moveR();
      }
    }
  }
  if(!Shape.prototype.moveL){//十一
    Shape.prototype.moveL=function(){
      //遍历当前对象的cells中的每个cell对象
      for(var i=0;i<this.cells.length;i++){
      //  调用当前cell对象的drop方法
        this.cells[i].moveL();
      }
    }
  }
  //十五
  if(!Shape.prototype.rotateR){
    Shape.prototype.rotateR=function(){
      //if(Object.getPrototypeOf(this)!=O.prototype){
      if(this.constructor!=O){
        this.statei++;
        this.statei>=this.states.length&&(this.statei=0);
        //获得下一个状态对象
        var state=this.states[this.statei];
        var orgr=this.cells[this.orgi].row;
        var orgc=this.cells[this.orgi].col;
        //遍历当前图形中的每个cell
        //按state中偏移量，设置每个cell的新位置
        for(var i=0;i<this.cells.length;i++){
          this.cells[i].row=orgr+state["r"+i];
          this.cells[i].col=orgc+state["c"+i];
        }//for的结束
      }//if的结束
    }//function的结束
  }//if的结束
  if(!Shape.prototype.rotateL){
    Shape.prototype.rotateL=function(){
      //if(Object.getPrototypeOf(this)!O.prototype){
      if(this.constructor!=O){
        this.statei--;
        this.statei<0&&(this.statei=this.states.length-1);
        //获得下一个状态对象
        var state=this.states[this.statei];
        var orgr=this.cells[this.orgi].row;
        var orgc=this.cells[this.orgi].col;
        //遍历当前图形中的每个cell
        //按照state中偏移量，设置每个cell的心位置
        for(var i=0;i<this.cells.length;i++){
          this.cells[i].row=orgr+state["r"+i];
          this.cells[i].col=orgc+state["c"+i];
        }//for的结束
      }//if的结束
    }//function的结束
  }//if的结束
}//function Shape(img,orgi)的结束
//二
function O(){//1
  Shape.call(this,"img/O.png");
  if(!Shape.prototype.isPrototypeOf(O.prototype)){
    Object.setPrototypeOf(O.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,4,this.img),new Cell(0,5,this.img),
    new Cell(1,4,this.img),new Cell(1,5,this.img)
  ];
}
function T(){//2
  Shape.call(this,"img/T.png",1);
  if(!Shape.prototype.isPrototypeOf(T.prototype)){
    Object.setPrototypeOf(T.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,4,this.img)
  ];
  //十四
  this.states[0]=new State(0,-1, 0,0, 0,1, 1,0);
  this.states[1]=new State(-1,0, 0,0, 1,0, 0,-1);
  this.states[2]=new State(0,1, 0,0, 0,-1, -1,0);
  this.states[3]=new State(1,0, 0,0, -1,0, 0,1);
            //  [0]  [1] [2] [3]
}
 
function I(){//3
  Shape.call(this,"img/I.png",1);
  if(!Shape.prototype.isPrototypeOf(I.prototype)){
    Object.setPrototypeOf(I.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(0,6,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 0,1, 0,2);
            //  [0]  [1] [2] [3]
  this.states[1]=new State(-1,0, 0,0, 1,0, 2,0);
}
function S(){//4
  Shape.call(this,"img/S.png",3);
  if(!Shape.prototype.isPrototypeOf(S.prototype)){
    Object.setPrototypeOf(S.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,4,this.img),new Cell(0,5,this.img),
    new Cell(1,3,this.img),new Cell(1,4,this.img)
  ];
  //十四
  this.states[0]=new State(-1,0, -1,1, 0,-1, 0,0);
  this.states[1]=new State(0,1, 1,1, -1,0, 0,0);
            //  [0]  [1] [2] [3]
}
function Z(){//5
  Shape.call(this,"img/Z.png",1);
  if(!Shape.prototype.isPrototypeOf(Z.prototype)){
    Object.setPrototypeOf(Z.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(1,4,this.img),new Cell(1,5,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 1,0, 1,1);
  this.states[1]=new State(-1,0, 0,0, 0,-1, 1,-1);
            //  [0]  [1] [2] [3]
}
function L(){//6
  Shape.call(this,"img/L.png",1);
  if(!Shape.prototype.isPrototypeOf(L.prototype)){
    Object.setPrototypeOf(L.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,3,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 0,1, 1,-1);
  this.states[1]=new State(-1,0, 0,0, 1,0, -1,-1);
  this.states[2]=new State(0,1, 0,0, 0,-1, -1,1);
  this.states[3]=new State(1,0, 0,0, -1,0, 1,1);
            //  [0]  [1] [2] [3]
}
function J(){//7
  Shape.call(this,"img/J.png",1);
  if(!Shape.prototype.isPrototypeOf(J.prototype)){
    Object.setPrototypeOf(J.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,5,this.img)
  ];
  this.states[0]=new State(-1,0, 0,0, 1,-1, 1,0);
  this.states[1]=new State(0,1, 0,0, -1,-1, 0,-1);
  this.states[2]=new State(1,0, 0,0, -1,1, -1,0);
  this.states[3]=new State(0,-1, 0,0, 1,1, 0,1);
            //  [0]  [1] [2] [3]
}
로그인 후 복사

최종 렌더링은 다음과 같습니다.

---------------------------------- --- -------------------> 삶을 위해 변화하고, 변화를 위해 창조하세요.

위 내용은 자바스크립트 코드를 기반으로 작성된 테트리스 웹 버전에 대해 편집자가 공유한 내용입니다. 모두가 좋아하길 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전 By DDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
더보기

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7469
15
Cakephp 튜토리얼
1376
52
Steam의 계정 이름 형식은 무엇입니까?
77
11
Win11 활성화 키 영구
48
19
NYT 연결 힌트와 답변
19
29
더보기
Related knowledge
내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? 내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? 브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? 브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? 소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Java의 컬렉션 프레임 워크를 효과적으로 사용하려면 어떻게해야합니까? Java의 컬렉션 프레임 워크를 효과적으로 사용하려면 어떻게해야합니까? Mar 13, 2025 pm 12:28 PM

이 기사는 Java의 컬렉션 프레임 워크의 효과적인 사용을 탐구합니다. 데이터 구조, 성능 요구 및 스레드 안전을 기반으로 적절한 컬렉션 (목록, 세트, ​​맵, 큐)을 선택하는 것을 강조합니다. 효율적인 수집 사용을 최적화합니다

초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 Mar 19, 2025 am 09:10 AM

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다 Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다 Mar 15, 2025 am 09:19 AM

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다. 파이 및 링 차트를 만듭니다 파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다. 파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이것은 비율이 0 인 모든 엔티티를 의미합니다

See all articles