2 lines
7.0 KiB
JavaScript
2 lines
7.0 KiB
JavaScript
import{_ as m}from"./index.CjrDwa0W.js";import{f as a,i as o,g as c,t as n,F as b,m as u,h as d,j as g,l as w}from"./vendor-vue.CmaRnji1.js";import"./vendor.DSdF8huI.js";import"./swiper.tg5sgs8j.js";const v={name:"Game2048App",data(){return{board:[],score:0,bestScore:0,gameOver:!1,won:!1,touchStartX:0,touchStartY:0}},computed:{flatBoard(){return this.board.flat()}},mounted(){this.loadBestScore(),this.initGame(),window.addEventListener("keydown",this.handleKeyPress),this.$el.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.$el.addEventListener("touchend",this.handleTouchEnd,{passive:!0})},beforeUnmount(){window.removeEventListener("keydown",this.handleKeyPress),this.$el.removeEventListener("touchstart",this.handleTouchStart),this.$el.removeEventListener("touchend",this.handleTouchEnd)},methods:{initGame(){this.board=Array(4).fill(null).map(()=>Array(4).fill(0)),this.score=0,this.gameOver=!1,this.won=!1,this.addRandomTile(),this.addRandomTile()},resetGame(){this.initGame()},loadBestScore(){const s=localStorage.getItem("game2048_best");this.bestScore=s?parseInt(s):0},saveBestScore(){this.score>this.bestScore&&(this.bestScore=this.score,localStorage.setItem("game2048_best",this.bestScore.toString()))},addRandomTile(){const s=[];for(let e=0;e<4;e++)for(let t=0;t<4;t++)this.board[e][t]===0&&s.push({row:e,col:t});if(s.length>0){const{row:e,col:t}=s[Math.floor(Math.random()*s.length)];this.board[e][t]=Math.random()<.9?2:4}},move(s){if(this.gameOver)return;const e=JSON.stringify(this.board);switch(s){case"up":this.moveUp();break;case"down":this.moveDown();break;case"left":this.moveLeft();break;case"right":this.moveRight();break}JSON.stringify(this.board)!==e&&(this.addRandomTile(),this.saveBestScore(),this.checkGameOver())},moveLeft(){for(let s=0;s<4;s++){let e=this.board[s].filter(t=>t!==0);for(let t=0;t<e.length-1;t++)e[t]===e[t+1]&&(e[t]*=2,this.score+=e[t],e[t]===2048&&(this.won=!0),e.splice(t+1,1));for(;e.length<4;)e.push(0);this.board[s]=e}},moveRight(){for(let s=0;s<4;s++){let e=this.board[s].filter(t=>t!==0);for(let t=e.length-1;t>0;t--)e[t]===e[t-1]&&(e[t]*=2,this.score+=e[t],e[t]===2048&&(this.won=!0),e.splice(t-1,1),t--);for(;e.length<4;)e.unshift(0);this.board[s]=e}},moveUp(){for(let s=0;s<4;s++){let e=[];for(let t=0;t<4;t++)this.board[t][s]!==0&&e.push(this.board[t][s]);for(let t=0;t<e.length-1;t++)e[t]===e[t+1]&&(e[t]*=2,this.score+=e[t],e[t]===2048&&(this.won=!0),e.splice(t+1,1));for(;e.length<4;)e.push(0);for(let t=0;t<4;t++)this.board[t][s]=e[t]}},moveDown(){for(let s=0;s<4;s++){let e=[];for(let t=0;t<4;t++)this.board[t][s]!==0&&e.push(this.board[t][s]);for(let t=e.length-1;t>0;t--)e[t]===e[t-1]&&(e[t]*=2,this.score+=e[t],e[t]===2048&&(this.won=!0),e.splice(t-1,1),t--);for(;e.length<4;)e.unshift(0);for(let t=0;t<4;t++)this.board[t][s]=e[t]}},checkGameOver(){for(let s=0;s<4;s++)for(let e=0;e<4;e++)if(this.board[s][e]===0)return;for(let s=0;s<4;s++)for(let e=0;e<4;e++){const t=this.board[s][e];if(e<3&&t===this.board[s][e+1]||s<3&&t===this.board[s+1][e])return}this.gameOver=!0,this.saveBestScore()},handleKeyPress(s){const e={ArrowUp:"up",ArrowDown:"down",ArrowLeft:"left",ArrowRight:"right",w:"up",s:"down",a:"left",d:"right"};e[s.key]&&(s.preventDefault(),this.move(e[s.key]))},handleTouchStart(s){this.touchStartX=s.touches[0].clientX,this.touchStartY=s.touches[0].clientY},handleTouchEnd(s){const e=s.changedTouches[0].clientX-this.touchStartX,t=s.changedTouches[0].clientY-this.touchStartY,h=50;Math.abs(e)>Math.abs(t)?Math.abs(e)>h&&this.move(e>0?"right":"left"):Math.abs(t)>h&&this.move(t>0?"down":"up")},getTileClass(s){return s?{2:"bg-[#eee4da] text-[#776e65]",4:"bg-[#ede0c8] text-[#776e65]",8:"bg-[#f2b179] text-white",16:"bg-[#f59563] text-white",32:"bg-[#f67c5f] text-white",64:"bg-[#f65e3b] text-white",128:"bg-[#edcf72] text-white",256:"bg-[#edcc61] text-white",512:"bg-[#edc850] text-white",1024:"bg-[#edc53f] text-white",2048:"bg-[#edc22e] text-white"}[s]||"bg-[#3c3a32] text-white":"bg-[#cdc1b4]"},getTileStyle(s){if(!s)return{};let e="24em";return s>=1e3&&(e="18em"),s>=1e4&&(e="14em"),{fontSize:e}}}},x={class:"w-full h-full rounded-[44em] overflow-hidden flex flex-col items-center justify-center bg-[#faf8ef] p-[3%]"},p={class:"w-full h-[12%] flex items-center justify-between px-[2%]"},S={class:"flex gap-[8em]"},y={class:"bg-[#bbada0] rounded-[6em] px-[12em] py-[6em] text-center"},k={class:"text-[16em] font-bold text-white"},_={class:"bg-[#bbada0] rounded-[6em] px-[12em] py-[6em] text-center"},T={class:"text-[16em] font-bold text-white"},G={class:"w-[95%] aspect-square bg-[#bbada0] rounded-[12em] p-[2%] mt-[3%]"},j={class:"w-full h-full grid grid-cols-4 grid-rows-4 gap-[2%] rounded-[2em]"},B={key:0,class:"absolute inset-0 bg-black/50 flex items-center justify-center rounded-[44em]"},C={class:"bg-white rounded-[16em] p-[24em] text-center"},E={class:"text-[24em] font-bold text-[#776e65] mb-[12em]"},L={class:"text-[14em] text-[#776e65] mb-[16em]"},O={class:"w-full h-[25%] flex flex-col items-center justify-center mt-[3%]"},A={class:"grid grid-cols-3 gap-[8em] mt-[8em]"};function M(s,e,t,h,l,i){return d(),a("div",x,[o("div",p,[e[8]||(e[8]=o("div",{class:"text-[32em] font-bold text-[#776e65]"},"2048",-1)),o("div",S,[o("div",y,[e[6]||(e[6]=o("div",{class:"text-[10em] text-[#eee4da] uppercase"},"Score",-1)),o("div",k,n(l.score),1)]),o("div",_,[e[7]||(e[7]=o("div",{class:"text-[10em] text-[#eee4da] uppercase"},"Best",-1)),o("div",T,n(l.bestScore),1)])])]),o("div",G,[o("div",j,[(d(!0),a(b,null,u(i.flatBoard,(r,f)=>(d(),a("div",{key:f,class:w(["rounded-[0.5em] flex items-center justify-center font-bold transition-all duration-100",i.getTileClass(r)]),style:g(i.getTileStyle(r))},n(r||""),7))),128))])]),l.gameOver?(d(),a("div",B,[o("div",C,[o("div",E,n(l.won?"You Win!":"Game Over!"),1),o("div",L,"Score: "+n(l.score),1),o("button",{onClick:e[0]||(e[0]=(...r)=>i.resetGame&&i.resetGame(...r)),class:"bg-[#8f7a66] text-white px-[20em] py-[10em] rounded-[8em] text-[14em] font-bold hover:bg-[#9f8b77] transition-colors"},"Play Again")])])):c("",!0),o("div",O,[o("button",{onClick:e[1]||(e[1]=(...r)=>i.resetGame&&i.resetGame(...r)),class:"bg-[#8f7a66] text-white px-[2em] py-[0.5em] rounded-[0.5em] text-[14em] font-bold hover:bg-[#9f8b77] transition-colors"},"New Game"),o("div",A,[e[9]||(e[9]=o("div",null,null,-1)),o("button",{onClick:e[2]||(e[2]=r=>i.move("up")),class:"bg-[#8f7a66] text-white w-[2em] h-[2em] rounded-[0.5em] text-[18em] font-bold hover:bg-[#9f8b77]"},"↑"),e[10]||(e[10]=o("div",null,null,-1)),o("button",{onClick:e[3]||(e[3]=r=>i.move("left")),class:"bg-[#8f7a66] text-white w-[2em] h-[2em] rounded-[0.5em] text-[18em] font-bold hover:bg-[#9f8b77]"},"←"),o("button",{onClick:e[4]||(e[4]=r=>i.move("down")),class:"bg-[#8f7a66] text-white w-[2em] h-[2em] rounded-[0.5em] text-[18em] font-bold hover:bg-[#9f8b77]"},"↓"),o("button",{onClick:e[5]||(e[5]=r=>i.move("right")),class:"bg-[#8f7a66] text-white w-[2em] h-[2em ] rounded-[0.5em] text-[18em] font-bold hover:bg-[#9f8b77]"},"→")])])])}const N=m(v,[["render",M],["__scopeId","data-v-98147b7f"]]);export{N as default};
|