失业在家，做几个小游戏看看
玩法：按键盘的上下左右操作
2048.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2048小游戏</title> </head> <style> html,body{ width: 100%; height: 100%; overflow: hidden; color: #776e65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; } #game{ display: flex; flex-wrap: wrap; width: 400px; background: #bbada0; padding: 10px; border-radius:10px; justify-content: space-between; } .item{ background: rgba(238, 228, 218, 0.35); width: 90px; height: 90px; display: block; text-align: center; line-height: 90px; font-size: 35px; margin-bottom: 10px; } .item.active{ background: #eee4da; } </style> <body> <div id="game"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> <script> const rect=new Array(16).fill(0); function getRandomNum(){ return Math.random()>0.7?4:2 } function getRandomIndex(){ const emptyArr=[] for(let i=0;i<16;i++){ if(!rect[i]){ emptyArr.push(i) } } const n1=0|Math.random()*emptyArr.length const n2=getRandomNum() rect[emptyArr[n1]]=n2 console.log(emptyArr[n1],n2) } const childNodes=document.querySelectorAll("#game .item") function render(){ for(let i=0;i<16;i++){ const num=rect[i] if(num){ childNodes[i].textContent=num childNodes[i].classList.add('active') }else{ childNodes[i].textContent='' childNodes[i].classList.remove('active') } } } getRandomIndex() getRandomIndex() render() document.addEventListener('keydown',function (event){ if(event.keyCode===38){ up() } if(event.keyCode===40){ down() } if(event.keyCode===37){ left() } if(event.keyCode===39){ right() } }) function up(){ let has=false //移动 for(let x=0;x<4;x++){ const prelist=[] const list=[] let preV=0 for(let y=0;y<4;y++){ const v=rect[y*4+x] prelist.push(v) if(v){ if(preV===v){ list[list.length-1]=2*v preV=0 }else{ list.push(v) preV=v } } } for(let y=0;y<4;y++){ if(!list[y]){ list[y]=0 } rect[y*4+x]=list[y] } console.log(prelist,list) if(prelist.join(',')!==list.join(',')){ has=true } } if(has){ getRandomIndex() render() } } function down(){ let has=false for(let x=0;x<4;x++){ const prelist=[] const list=[] let preV=0 for(let y=3;y>=0;y--){ const v=rect[y*4+x] prelist.push(v) if(v){ if(preV===v){ list[list.length-1]=2*v preV=0 }else{ list.push(v) preV=v } } } for(let i=0;i<4;i++){ if(!list[i]){ list[i]=0 } rect[(3-i)*4+x]=list[i] } if(prelist.join(',')!==list.join(',')){ has=true } } if(has){ getRandomIndex() render() } } function left(){ let has=false for(let y=0;y<4;y++){ const prelist=[] const list=[] let preV=0 for(let x=0;x<4;x++){ const v=rect[y*4+x] prelist.push(v) if(v){ if(preV===v){ list[list.length-1]=2*v preV=0 }else{ list.push(v) preV=v } } } for(let i=0;i<4;i++){ if(!list[i]){ list[i]=0 } rect[y*4+i]=list[i] } if(prelist.join(',')!==list.join(',')){ has=true } } if(has){ getRandomIndex() render() } } function right(){ let has=false for(let y=0;y<4;y++){ const prelist=[] const list=[] let preV=0 for(let x=3;x>=0;x--){ const v=rect[y*4+x] prelist.push(v) if(v){ if(preV===v){ list[list.length-1]=2*v preV=0 }else{ list.push(v) preV=v } } } for(let i=0;i<4;i++){ if(!list[i]){ list[i]=0 } rect[y*4+3-i]=list[i] } if(prelist.join(',')!==list.join(',')){ has=true } } if(has){ getRandomIndex() render() } } </script> </html>