時(shí)間：2023-09-12 16:24:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-12 16:24:02 來源：網(wǎng)站運(yùn)營
制作2048小游戲（html、css、JS）：簡約的小游戲的制作主要由以下思路結(jié)構(gòu)：
在線咨詢
<body> <div id="header"> <h1 class="title1">2048</h1> <h3 class="title2">Created by Cheng Xiao Gang</h3> <div class="wrapper"> <div class="score-wrapper"> <span id="txt">score:</span> <span id="score">0</span> </div> <div class="newgame-wrapper"> <a href="javascript:newgame()" id="newGame">New Game</a> </div> </div> </div> <div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div></body>#header{ width: 100%; margin: 0 auto; text-align: center;}#header .title1{ font: bold 50px Arial; color:#776e65; margin:0 auto;}#header .title2{ font:normal 18px Arial; margin:10px auto; padding-left:20%;}#header .wrapper{ display:flex; justify-content:space-between; width:500px; margin:0 auto;}#header .score-wrapper{ width:100px; background-color:#8f7a66; padding:6px; border-radius:6px;}#header .score-wrapper #txt{ color:#d2c1c1;}#header .score-wrapper #score{ color:#fff; font-size:30px; vertical-align:middle;}#header .newgame-wrapper #newGame{ width:100px; display:block; background-color:#8f7a66; text-decoration:none; padding:13px; border-radius:6px; color:#fff; font:bold 15px Arial;}#header .newgame-wrapper #newGame:hover{ background-color:#bdac9c;}function init(){ //初始化單元格位置(下層單元格) for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ var gridCell=$('#grid-cell-'+i+'-'+j); gridCell.css('top',getPosTop(i,j)); gridCell.css('left',getPosLeft(i,j)); } } //初始化數(shù)組 for(var i=0;i<4;i++){ nums[i]=new Array(); hasConflicted[i]=new Array(); for(var j=0;j<4;j++){ nums[i][j]=0; hasConflicted[i][j]=false; //false表示未曾疊加過，true表示已經(jīng)疊加過 } } //動(dòng)態(tài)創(chuàng)建上層單元格并初始化 updateView(); score=0; updateScore(score);}當(dāng)點(diǎn)擊重新開始后，產(chǎn)生隨機(jī)數(shù)。建立該獨(dú)立函數(shù)用于每次移動(dòng)時(shí)都會產(chǎn)生隨機(jī)數(shù)，且要求每次的隨機(jī)數(shù)都出現(xiàn)在空白處，避免與原有數(shù)值重合。function generateOneNumber(){ //判斷是否還有空間，如果沒有空間則直接返回 if(noSpace(nums)){ return; } //隨機(jī)一個(gè)位置 var count=0; var temp=new Array(); for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ if(nums[i][j]==0){ temp[count] = i*4+j; // 1*4+3=7 ------> 7/4=1 7%4=3 count++; } } } var pos=Math.floor(Math.random()*count); //[0,1) * 6 = [0,5] var randx=Math.floor(temp[pos]/4); var randy=Math.floor(temp[pos]%4); //隨機(jī)一個(gè)數(shù)字 var randNum=Math.random()<0.5?2:4; //在隨機(jī)位置上顯示隨機(jī)數(shù)字 nums[randx][randy]=randNum; showNumberWithAnimation(randx,randy,randNum);}2.滑動(dòng)組合function canMoveLeft(nums){ for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(nums[i][j]!=0){ if(nums[i][j-1]==0 || nums[i][j-1]==nums[i][j]){ return true; } } } } return false;}當(dāng)左邊數(shù)值和需要移動(dòng)的數(shù)值相同時(shí)，這時(shí)需要疊加組合。if(nums[i][k]==nums[i][j] && noBlockHorizontal(i,k,j,nums) && !hasConflicted[i][k]){ showMoveAnimation(i,j,i,k); nums[i][k]+=nums[i][j]; nums[i][j]=0; //統(tǒng)計(jì)分?jǐn)?shù) score+=nums[i][k]; updateScore(score); hasConflicted[i][k]=true; //已經(jīng)疊加 break;}簡約的游戲少不了動(dòng)畫效果的真實(shí)性，需要建立從起始點(diǎn)到末端的動(dòng)畫以及延時(shí)效果。//通過動(dòng)畫顯示移動(dòng)function showMoveAnimation(fromx,fromy,tox,toy){ var numberCell=$('#number-cell-'+fromx+'-'+fromy); numberCell.animate({ top:getPosTop(tox,toy), left:getPosLeft(tox,toy) }, 200);}文章主要描述重要代碼，下方有成品文件，解壓后將index1.html放入瀏覽器即可。關(guān)鍵詞：游戲
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
