當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【休闲游戏实战1】推箱子PC端小游戏（附源码）

發(fā)布時間：2025/3/15 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了【休闲游戏实战1】推箱子PC端小游戏（附源码）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

游戲鏈接：點擊打開鏈接

效果圖：

第100關(guān)有些難度，用了449步才過關(guān)（我用的是可跳關(guān)版的，直接玩的最后一關(guān)）

源碼解讀

源碼一共3個文件：index.html(游戲界面加載，核心功能)，js/mapdata100.js（100個16階矩陣，通過0,1,2,3,4分別對應(yīng)游戲中5個元素的圖片來定義每個地圖），image文件夾（存放游戲所需元素圖片）

源碼下載

沒積分的可以通過以下方式獲取源碼或留下郵箱或加我（QQ2743319061，微信DDZJ-ZXHY備注CSDN推箱子）獲取源碼

1. index.html

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Keywords" content="關(guān)鍵詞"><meta name="Description" content="描述"><title>HTML5 canvas小人推箱子小游戲</title><style>/*css樣式表的衣柜*//*表示所有控件。1)margin: 0px 就是上、下左、右、均外補白0個像素2)padding: 0px上、下左、右、均內(nèi)補白0個像素*/*{margin:0px;padding:0px;}body{overflow:hidden;/*隱藏溢出，鏈接 http://blog.csdn.net/hukaihe/article/details/51298665 */}.game{width:560px;margin:50px auto;}</style></head><body οnkeydοwn="doKeyDown(event)"><div class="game"><canvas id="canvas" width="560" height="560"></canvas><div id="msg"></div><input type="button" value="上一關(guān)" onClick="NextLevel(-1)"><input type="button" value="下一關(guān)" onClick="NextLevel(1)"><input type="button" value="重玩本關(guān)" onClick="NextLevel(0)"><input type="button" value="游戲說明" onClick="showHelp()"></div><script src="js/mapdata100.js">//調(diào)用100關(guān)的數(shù)據(jù)地圖，參見3.2 </script><script>var can = document.getElementById("canvas");var msg = document.getElementById("msg");var cxt = can.getContext("2d");var w = 35,h = 35;var curMap;//當(dāng)前的地圖var curLevel;//當(dāng)前等級的地圖var curMan;//初始化小人var iCurlevel = 0;//關(guān)卡數(shù)var moveTimes = 0;//移動了多少次//預(yù)加載所有圖片var oImgs = {"block" : "images/block.gif","wall" : "images/wall.png","box" : "images/box.png","ball" : "images/ball.png","up" : "images/up.png","down" : "images/down.png","left" : "images/left.png","right" : "images/right.png",}function imgPreload(srcs,callback){var count = 0,imgNum = 0,images = {};for(src in srcs){imgNum++;}for(src in srcs ){images[src] = new Image();images[src].onload = function(){//判斷是否所有的圖片都預(yù)加載完成if (++count >= imgNum){callback(images);}}images[src].src = srcs[src];}}var block,wall,box,ball,up,down,left,right;imgPreload(oImgs,function(images){//console.log(images.block);block = images.block;wall = images.wall;box = images.box;ball = images.ball;up = images.up;down = images.down;left = images.left;right = images.right;init();});//初始化游戲function init(){//InitMap();//DrawMap(levels[0]);initLevel();//初始化對應(yīng)等級的游戲showMoveInfo();//初始化對應(yīng)等級的游戲數(shù)據(jù)}//繪制地板function InitMap(){for (var i=0;i<16 ;i++ ){for (var j=0;j<16 ;j++ ){cxt.drawImage(block,w*j,h*i,w,h);}}}//小人位置坐標(biāo)function Point(x,y){this.x = x;this.y = y;}var perPosition = new Point(5,5);//小人的初始標(biāo)值//繪制每個游戲關(guān)卡地圖function DrawMap(level){for (var i=0;i<level.length ;i++ ){for (var j=0;j<level[i].length ;j++ ){var pic = block;//初始圖片switch (level[i][j]){case 1://繪制墻壁pic = wall;break;case 2://繪制陷進(jìn)pic = ball;break;case 3://繪制箱子pic = box;break;case 4://繪制小人pic = curMan;//小人有四個方向具體顯示哪個圖片需要和上下左右方位值關(guān)聯(lián)//獲取小人的坐標(biāo)位置perPosition.x = i;perPosition.y = j;break;case 5://繪制箱子及陷進(jìn)位置pic = box;break;}//每個圖片不一樣寬需要在對應(yīng)地板的中心繪制地圖cxt.drawImage(pic,w*j-(pic.width-w)/2,h*i-(pic.height-h),pic.width,pic.height)}}}//初始化游戲等級function initLevel(){curMap = copyArray(levels[iCurlevel]);//當(dāng)前移動過的游戲地圖curLevel = levels[iCurlevel];//當(dāng)前等級的初始地圖curMan = down;//初始化小人InitMap();//初始化地板DrawMap(curMap);//繪制出當(dāng)前等級的地圖}//下一關(guān)function NextLevel(i){//iCurlevel當(dāng)前的地圖關(guān)數(shù)iCurlevel = iCurlevel + i;if (iCurlevel<0){iCurlevel = 0;return;}var len = levels.length;if (iCurlevel > len-1){iCurlevel = len-1;}initLevel();//初始當(dāng)前等級關(guān)卡moveTimes = 0;//游戲關(guān)卡移動步數(shù)清零showMoveInfo();//初始化當(dāng)前關(guān)卡數(shù)據(jù)}//小人移動function go(dir){var p1,p2;switch (dir){case "up":curMan = up;//獲取小人前面的兩個坐標(biāo)位置來進(jìn)行判斷小人是否能夠移動p1 = new Point(perPosition.x-1,perPosition.y);p2 = new Point(perPosition.x-2,perPosition.y);break;case "down":curMan = down;p1 = new Point(perPosition.x+1,perPosition.y);p2 = new Point(perPosition.x+2,perPosition.y);break;case "left":curMan = left;p1 = new Point(perPosition.x,perPosition.y-1);p2 = new Point(perPosition.x,perPosition.y-2);break;case "right":curMan = right;p1 = new Point(perPosition.x,perPosition.y+1);p2 = new Point(perPosition.x,perPosition.y+2);break;}//若果小人能夠移動的話，更新游戲數(shù)據(jù)，并重繪地圖if (Trygo(p1,p2)){moveTimes ++;showMoveInfo();}//重繪地板InitMap();//重繪當(dāng)前更新了數(shù)據(jù)的地圖DrawMap(curMap);//若果移動完成了進(jìn)入下一關(guān)if (checkFinish()){alert("恭喜過關(guān)！！");NextLevel(1);}}//判斷是否推成功function checkFinish(){for (var i=0;i<curMap.length ;i++ ){for (var j=0;j<curMap[i].length ;j++ ){//當(dāng)前移動過的地圖和初始地圖進(jìn)行比較，若果初始地圖上的陷進(jìn)參數(shù)在移動之后不是箱子的話就指代沒推成功if (curLevel[i][j] == 2 && curMap[i][j] != 3 || curLevel[i][j] == 5 && curMap[i][j] != 3){return false;}}}return true;}//判斷小人是否能夠移動function Trygo(p1,p2){if(p1.x<0) return false;//若果超出地圖的上邊，不通過if(p1.y<0) return false;//若果超出地圖的左邊，不通過if(p1.x>curMap.length) return false;//若果超出地圖的下邊，不通過if(p1.y>curMap[0].length) return false;//若果超出地圖的右邊，不通過if(curMap[p1.x][p1.y]==1) return false;//若果前面是墻，不通過if (curMap[p1.x][p1.y]==3 || curMap[p1.x][p1.y]==5){//若果小人前面是箱子那就還需要判斷箱子前面有沒有障礙物(箱子/墻)if (curMap[p2.x][p2.y]==1 || curMap[p2.x][p2.y]==3){return false;}//若果判斷不成功小人前面的箱子前進(jìn)一步curMap[p2.x][p2.y] = 3;//更改地圖對應(yīng)坐標(biāo)點的值//console.log(curMap[p2.x][p2.y]);}//若果都沒判斷成功小人前進(jìn)一步curMap[p1.x][p1.y] = 4;//更改地圖對應(yīng)坐標(biāo)點的值//若果小人前進(jìn)了一步，小人原來的位置如何顯示var v = curLevel[perPosition.x][perPosition.y];if (v!=2)//若果剛開始小人位置不是陷進(jìn)的話{if (v==5)//可能是5 既有箱子又陷進(jìn){v=2;//若果小人本身就在陷進(jìn)里面的話移開之后還是顯示陷進(jìn)}else{v=0;//小人移開之后之前小人的位置改為地板}}//重置小人位置的地圖參數(shù)curMap[perPosition.x][perPosition.y] = v;//若果判斷小人前進(jìn)了一步，更新坐標(biāo)值perPosition = p1;//若果小動了返回true 指代能夠移動小人return true;}//判斷是否推成功//與鍵盤上的上下左右鍵關(guān)聯(lián)function doKeyDown(event){switch (event.keyCode){case 37://左鍵頭go("left");break;case 38://上鍵頭go("up");break;case 39://右箭頭go("right");break;case 40://下箭頭go("down");break;}}//完善關(guān)卡數(shù)據(jù)及游戲說明function showMoveInfo(){msg.innerHTML = "第" + (iCurlevel+1) +"關(guān) 移動次數(shù): "+ moveTimes;}//游戲說明var showhelp = false;function showHelp(){showhelp = !showhelp;if (showhelp){msg.innerHTML = "用鍵盤上的上、下、左、右鍵移動小人，把箱子全部推到小球的位置即可過關(guān)。箱子只可向前推，不能往后拉，并且小人一次只能推動一個箱子。";}else{showMoveInfo();}}//克隆二維數(shù)組function copyArray(arr){var b=[];//每次移動更新地圖數(shù)據(jù)都先清空再添加新的地圖for (var i=0;i<arr.length ;i++ ){b[i] = arr[i].concat();//鏈接兩個數(shù)組}return b;}</script><div style="text-align:center;"> <p>友情鏈接<a href="http://video.lnkjdx.com/" target="_blank">VIP視頻解析</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/2-2-200x300.jpg">支付寶天天領(lǐng)分10億紅包</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/2-1-207x300.jpg">支付寶新春送親友禮包最高90元</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/NZ7WBYFTLOEWAWRPWNY-198x300.jpg">支付寶打賞</a> <div class="jiathis_style" style="text-align:center;"><span class="jiathis_txt">分享到：</span><a class="jiathis_button_cqq">QQ好友</a><a class="jiathis_button_qzone">QQ空間</a><a class="jiathis_button_weixin">微信</a><a class="jiathis_button_tsina">新浪微博</a><a href="http://www.jiathis.com/share?uid=2158478" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a><a class="jiathis_counter_style"></a> </div> <script type="text/javascript"> var jiathis_config = {data_track_clickback:'true'}; </script> <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2158478" charset="utf-8"></script>  </p><div style="text-align:center;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1273018669'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1273018669%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script></div> </div> </body> </html> 2. js目錄下mapdata100.js下載

3.image文件夾圖片下載

總結(jié)

以上是生活随笔為你收集整理的【休闲游戏实战1】推箱子PC端小游戏（附源码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：我希望我一开始就知道的5个Python功
下一篇：别再学习框架了，看看这些让你起飞的计算机