原生js實現2048小游戲
更新時間：2021年03月09日 08:03:50 作者：一個21歲的老同志
這篇文章主要為大家詳細介紹了原生js實現2048小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2048小游戲，供大家參考，具體內容如下
首先2048小游戲離不開16個格子，我們通過html和css創(chuàng)建好對應的標簽和樣式，然后開始js邏輯
<div id="box">//一個盒子里面16個小div <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> <div id="son"></div> </div>
設置對應的樣式： (僅供參考)
#box{
width: 450px;
height: 450px;
background-color: brown;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 1px solid #000;
margin: 100px auto;
border-radius: 10px;
}
div>div{
margin-top: 5px;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: bisque;
text-align: center;
line-height: 100px;
font-size: 40px;
}
效果如下：
然后真正的js部分真正開始了
先使用 css選擇器 獲取所有小格子的div
var divs = document.querySelectorAll('[id ==son]');
然后創(chuàng)建一個二維的數組 來接收這16個小格子div的dom對象
var arr = [[],[],[],[]];
var a = 0;
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
arr[i][j] = divs[a];
a++ ;
}
}
這就形成了:i 和 j 軸
這樣就便于我們后面的移動操作
現在我們寫一個在該16各種里隨機產生一個隨機數2和4 填入一個空格子里，我們后面在調用！
function sj(){ //產生隨機數
var a = Math.floor(Math.random() * 4);
var b = Math.floor(Math.random() * 4);
if(arr[a][b].innerHTML == ""){
if(Math.random()>0.5){
arr[a][b].innerHTML = 2;
}else{
arr[a][b].innerHTML = 4;
}
}else{ //如果該格子不為空我們在執(zhí)行函數
sj();
}
}
第二個就是要判斷游戲是否 結束時的函數：當格子你所有的值都不為空的時候結束游戲?。ê竺嬖谡{用）
function js(){ //游戲是否結束
var bool = true;
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
if(arr[i][j].innerHTML == ""){
bool = false;
}else{
}
}
}
if(bool){
alert("游戲結束");
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
arr[i][j] = null;
}
}
}
}
然后我們分別寫如按下上下左右鍵執(zhí)行的函數：
以按上鍵為例子：
①如果上面一個數為空，下面一個不為空上下值交換；
②如果上面一個為數字且和下面的相等，那么上面數 * 2 下面的改值為空。其他情況不變。
function downtop(){ //按上 執(zhí)行的函數
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
if(arr[i][j].innerHTML == "" && i<3 &&arr[i+1][j].innerHTML != ""){
arr[i][j].innerHTML = arr[i+1][j].innerHTML ;
arr[i+1][j].innerHTML = "";
downtop(); // 如果條件滿足就執(zhí)行
// 不滿足了就不會進入到if里了
}else if(i<3&&arr[i][j].innerHTML !="" && arr[i+1][j].innerHTML !="" &&arr[i][j].innerHTML == arr[i+1][j].innerHTML){
arr[i][j].innerHTML = 2*arr[i+1][j].innerHTML ;
arr[i+1][j].innerHTML = "";
}else{
}
}
}
}
同理只需要改變 （一些參數） 就完成另外3個鍵的邏輯：
function downbottom(){
for(var i=3 ;i > 0 ; i--){
for(var j=0 ;j < 4; j++){
if(arr[i-1][j].innerHTML != "" && i>0 &&arr[i][j].innerHTML == "" ){
arr[i][j].innerHTML = arr[i-1][j].innerHTML ;
arr[i-1][j].innerHTML = "";
downbottom();
}
else if(arr[i-1][j].innerHTML !=""&& arr[i][j].innerHTML !="" && i>0 &&arr[i-1][j].innerHTML == arr[i][j].innerHTML){
arr[i][j].innerHTML = 2*arr[i-1][j].innerHTML ;
arr[i-1][j].innerHTML = "";
}
}
}
}
function downleft(){
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
if(arr[i][j].innerHTML == "" && j<3 &&arr[i][j+1].innerHTML != ""){
arr[i][j].innerHTML = arr[i][j+1].innerHTML ;
arr[i][j+1].innerHTML = "";
downleft();
}else if( j<3&& arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j+1].innerHTML){
arr[i][j].innerHTML = 2*arr[i][j+1].innerHTML ;
arr[i][j+1].innerHTML = "";
}
}
}
}
function downright(){
for(var i=0 ;i < 4; i ++){
for(var j = 3 ;j > 0; j--){
if(j > 0 && arr[i][j].innerHTML == ""&&arr[i][j-1].innerHTML != ""){
arr[i][j].innerHTML = arr[i][j-1].innerHTML ;
arr[i][j-1].innerHTML = "";
downright();
}else if( j>0 && arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j-1].innerHTML){
arr[i][j].innerHTML = 2*arr[i][j-1].innerHTML ;
arr[i][j-1].innerHTML = "";
}
}
}
}
為不同的值添加不同的背景顏色：(可要可不要)
function color(){
for(var i=0 ;i < 4; i ++){
for(var j=0 ;j < 4; j++){
switch(arr[i][j].innerHTML){
case "": arr[i][j].style.backgroundColor = "bisque";break;
case "2": arr[i][j].style.backgroundColor = "red";break;
case "4": arr[i][j].style.backgroundColor = "orange";break;
case "8": arr[i][j].style.backgroundColor = "yellow";break;
case "16": arr[i][j].style.backgroundColor = "green";break;
case "32": arr[i][j].style.backgroundColor = "blue";break;
case "64": arr[i][j].style.backgroundColor = "#000";break;
case "128": arr[i][j].style.backgroundColor = "aqua";break;
case "256": arr[i][j].style.backgroundColor = "pink";break;
}
}
}
}
然后整個窗口設置鍵盤監(jiān)聽事件：
上 的keyCode： 38
下 的keyCode： 40
左 的keyCode：37
右 的keyCode： 39
沒按一次
①調用 對應方向的函數
②調用 隨機參數一個數的函數
③調用 判斷游戲是否結束的函數
④調用 不同的值不同元素的函數
⑤游戲開始調用2次（默認有2個）
window.onkeydown = function(e){
switch(e.keyCode){
case 37: downleft(); sj(); color(); js(); break; //左
case 38: downtop(); sj(); color(); js(); break; //上
case 39: downright(); sj(); color(); js(); break; //右
case 40: downbottom(); sj(); color(); js(); break; //下
}
}
sj(); //開局自動有默認的2個數
sj();
就完成了簡單的2048小游戲！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用jquery來在頁面加載時獲取頁面input控件中所有text控件并添加樣式,由于其他方式比較麻煩所以就想通過在頁面加載的時候將要改動的text找到并添加屬性，感興趣的你可以參考下，希望可以幫助到你2013-02-02
這篇文章主要介紹了IE中圖片的onload事件無效問題和解決方法,這是一個很經典的問題,其實只需要調換一下代碼順序即可解決,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了使用son_encode 給前端返回數據，結果順序不對，經debug調試，發(fā)現是json_encode 函數的問題,變成 " " + 數字即可,需要的朋友可以參考下2020-03-03
這篇文章主要為大家介紹了JS代碼計算LocalStorage容量的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文主要介紹了Javascript中的prototype與繼承，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了js實現簡單搖篩子小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了使用Bootstrap和Vue實現用戶信息的編輯刪除功能,需要的朋友可以參考下2017-10-10
Save a File Using a File Save Dialog Box
Save a File Using a File Save Dialog Box...2007-06-06
這篇文章主要介紹了微信小程序實現多選框功能及效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
下面小編就為大家?guī)硪黄狫S 日期與時間戮相互轉化的簡單實例。小編覺得挺不錯的， 現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06