摘要:本文首發(fā)于我的個(gè)人推箱子小游戲步驟解析本文代碼已經(jīng)放在了上面了里面也進(jìn)行了很詳細(xì)的代碼注釋,可以下來,在本地運(yùn)行一下看看。分為兩個(gè)判斷條件一個(gè)是推箱子,一個(gè)是不推箱子自然移動(dòng),否則不移動(dòng)皮卡丘。
前言
推箱子小游戲大家肯定都玩過,之所以寫這篇文章,是覺得這個(gè)小游戲足夠簡單好理解,大家看完文章之后,自己也能花上半天功夫敲出一個(gè)推箱子小游戲來,如果喜歡的話可以點(diǎn)波贊,或者關(guān)注一下,希望本文可以幫到大家。
本文首發(fā)于我的個(gè)人blog:obkoro1.comdemo:推箱子小游戲 步驟解析:
本文代碼已經(jīng)放在了github上面了,里面也進(jìn)行了很詳細(xì)的代碼注釋,可以copy下來,在本地運(yùn)行一下看看。
1. 渲染地圖html結(jié)構(gòu):
html結(jié)構(gòu)十分簡單,只要弄一堆div,來放置地圖的class就可以了,我這里初始化了12*9個(gè)div,地圖里最多九行高度。 這些div都是同樣大小,地圖渲染出來區(qū)別的只是顏色的不同。
地圖函數(shù):
var box=$(".box div"); //地圖使用的div集合 function create(){ //創(chuàng)建地圖函數(shù) box.each(function(index){ //index的數(shù)量是固定的,是box div下面div的數(shù)量 // 每次創(chuàng)建地圖初始化div box.eq(index).removeClass(); }); box.each(function(index,element){ //循環(huán)整個(gè)div的數(shù)量 二維數(shù)組里數(shù)量不夠的 默認(rèn)為空白 //level為關(guān)卡數(shù) 根據(jù)關(guān)卡渲染地圖 builder為二維數(shù)組,為地圖關(guān)卡 if(builder[level][index]){ //過濾0 box.eq(index).addClass("type"+builder[level][index]); } }); box.eq(origin[level]).addClass("pusher"); //推箱人 皮卡丘位置 } //第一關(guān)的地圖長這樣(下面只是栗子,不是代碼),0代表不可抵達(dá)區(qū)域,1代表目標(biāo)(要被推到的地方), //2代表普通路徑(可以走的),3代表墻,4代表箱子 [0,0,0,0,3,3,3,0,0,0,0,0, 0,0,0,0,3,1,3,0,0,0,0,0, 0,0,0,0,3,2,3,3,3,3,0,0, 0,0,3,3,3,4,2,4,1,3,0,0, 0,0,3,1,2,4,2,3,3,3,0,0, 0,0,3,3,3,3,4,3,0,0,0,0, 0,0,0,0,0,3,1,3,0,0,0,0, 0,0,0,0,0,3,3,3,0,0,0,0]2. 捕獲鍵盤事件,判斷是否可以移動(dòng)
使用$(document).keydown()jqery事件,捕獲鍵盤事件。
捕獲鍵盤事件,上下左右以及wsad。
$(document).keydown(function (e) { var key=e.which; switch(key){ //col 的值為12,上下移動(dòng)要12個(gè)div為一個(gè)周期 //方向鍵上或者w case 87: case 38: move(-col);//判斷移動(dòng)函數(shù) break; //方向鍵下或者s case 83: case 40: move(col); break; //方向鍵左或者a case 65: case 37: move(-1); break; //方向鍵右或者d case 68: case 39: move(1); break; } setTimeout(win,500); //按鍵之后調(diào)判斷是否過關(guān) });
判斷是否可以移動(dòng)。
分為兩個(gè)判斷條件:一個(gè)是推箱子,一個(gè)是不推箱子 自然移動(dòng),否則不移動(dòng)皮卡丘。
function move(step){ //是否移動(dòng)判斷 // 分為兩個(gè)判斷條件一個(gè)是推箱子,一個(gè)是不推箱子 自然移動(dòng)。 否則不移動(dòng)皮卡丘 //step 上下是12個(gè)div一個(gè)周期,左右是1個(gè)div positin是皮卡丘的原來位置 var pikaqiu1=box.eq(position);//皮卡丘現(xiàn)在的地方 var pikaqiu2=box.eq(position+step);//皮卡丘要去的下一個(gè)地方 var pushBox=box.eq(position+step*2);//箱子要去的下一個(gè)地方 if(!pikaqiu2.hasClass("type4")&&( pikaqiu2.hasClass("type1")||pikaqiu2.hasClass("type2"))){ //自然移動(dòng) //判斷:如果下一個(gè)div的class不包含type4(箱子),并且 下一個(gè)div含有type1(目標(biāo)位置),或者type2(普通路徑) //這一步和下一步判斷是否有type4的原因是普通路徑會(huì)變成有type4的路徑,這時(shí)候就會(huì)出現(xiàn)問題 pikaqiu1.removeClass("pusher"); //移除當(dāng)前皮卡丘 pikaqiu2.addClass("pusher");//移動(dòng)皮卡丘到下一個(gè)位置 position=position+step;//增加position值 } else if((pikaqiu2.hasClass("type4"))&&(!pushBox.hasClass("type4"))&&(pushBox.hasClass("type1")|| pushBox.hasClass("type2")) ) { //推箱子 //如果下一個(gè)div的class包含type4(箱子)并且 不包含重疊type4(箱子) 并且 包含class type1(目標(biāo)位置)或者 包含type2(空路) pikaqiu2.removeClass("type4");//移除當(dāng)前箱子 pikaqiu1.removeClass("pusher");//移除當(dāng)前皮卡丘 pushBox.addClass("type4");//移動(dòng)箱子到下一個(gè)位置 pikaqiu2.addClass("pusher").addClass("type2");// //本來是type4 移除之后,這里沒有class了,要變成普通路徑 position=position+step;//增加position值 } }3.勝利判斷:
每次移動(dòng)都要調(diào)用這個(gè)勝利判斷。
function win(){ //勝利條件判斷 if($(".type1.type4").length===goal){ //推的箱子與關(guān)卡設(shè)置通過箱子的數(shù)量對(duì)比 if(level<9) { alert("666,挑戰(zhàn)下一關(guān)吧--OBKoro1"); level++; //關(guān)卡+1 goal = goalList[level]; position = origin[level]; create(); }else { alert("厲害啊 大佬 通關(guān)了都"); } } }代碼地址、demo地址 結(jié)語
本文到這里就結(jié)束了,喜歡的話,趕緊自己去敲一個(gè)出來,希望本文可以幫助大家發(fā)散思維。
最后:如需轉(zhuǎn)載,請(qǐng)放上原文鏈接并署名。碼字不易,感謝支持!本人寫文章本著交流記錄的心態(tài),寫的不好之處,不撕逼,但是歡迎指點(diǎn)。然后就是希望看完的朋友點(diǎn)個(gè)喜歡,也可以關(guān)注一下我。
個(gè)人blog and 掘金個(gè)人主頁
以上2018.1.7
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90761.html
?王者農(nóng)藥皮膚圖片獲取!? 一、前言二、環(huán)境準(zhǔn)備三、具體實(shí)現(xiàn)1、所有英雄信息獲取2、分析圖片url3、具體實(shí)現(xiàn)4、結(jié)果 四、最后 一、前言 ??王者榮耀大家都玩過吧,沒玩過的也應(yīng)該聽說過,作為時(shí)下最火的手機(jī)MOBA游戲,咳咳,好像跑題了。我們今天的重點(diǎn)是爬取王者榮耀所有英雄的所有皮膚! 二、環(huán)境準(zhǔn)備 編輯器:pycharm 用到的庫:requests、lxml 三、具體實(shí)現(xiàn) 1、所有...
摘要:因?yàn)槊總€(gè)格子在游戲開始的時(shí)候都是空著的狀態(tài),而在玩家與電腦進(jìn)行游戲中是要輸入符號(hào)的,所以我們還要定義一個(gè)型的二維數(shù)組,并初始化為。函數(shù)聲明打印棋盤初始化數(shù)組玩家下棋二維數(shù)組進(jìn)行函數(shù)傳參時(shí)可以不用寫行數(shù)電腦下棋判斷是否勝利定義一個(gè)二維數(shù)組。 三子棋是大家小時(shí)候和同桌在紙上都玩過的簡單小游戲,這...
摘要:看完本文有收獲請(qǐng)轉(zhuǎn)發(fā)分享給更多的人共享之家入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)入群基于打造的一款別踩白板小游戲背景顏色 背景簡介別踩白板這個(gè)游戲相信大家都玩過,這個(gè)是基于HTML5打造的簡單小游戲,在PC端和移動(dòng)端都能夠運(yùn)行,適應(yīng)多種平臺(tái),今天我們使用原生JS搭配JQuery構(gòu)建這個(gè)小游戲--別踩白板。一、思路分析整體頁面是一個(gè)大的矩形,...
閱讀 1416·2021-10-08 10:05
閱讀 3060·2021-09-26 10:10
閱讀 883·2019-08-30 15:55
閱讀 504·2019-08-26 11:51
閱讀 441·2019-08-23 18:10
閱讀 3849·2019-08-23 15:39
閱讀 658·2019-08-23 14:50
閱讀 767·2019-08-23 14:46