【休閒遊戲 實戰1】推箱子PC端小遊戲（附原始碼）
效果圖：
第100關有些難度，用了449步才過關（我用的是可跳關版的，直接玩的最後一關）
原始碼解讀
原始碼一共3個檔案：index.html(遊戲介面載入，核心功能)，js/mapdata100.js（100個16階矩陣，通過0,1,2,3,4分別對應遊戲中5個元素的圖片來定義每個地圖），image資料夾（存放遊戲所需元素圖片）
原始碼下載
沒積分的可以通過以下方式獲取原始碼或留下郵箱或加我（QQ2743319061，微信DDZJ-ZXHY備註CSDN推箱子）獲取原始碼
1. index.html
2. js目錄下mapdata100.js下載<!doctype html><!--聲明當前文件為html文件--> <html lang="en"><!--語言為英語--> <head><!--頭部--> <meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼--> <meta name="Keywords" content="關鍵詞"> <meta name="Description" content="描述"> <title>HTML5 canvas小人推箱子小遊戲</title> <style>/*css樣式表的衣櫃*/ /*表示所有控制元件。 1)margin: 0px 就是上、下左、右、均外補白0個畫素 2)padding: 0px上、下左、右、均內補白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 onkeydown="doKeyDown(event)"><!--身體--> <div class="game"> <canvas id="canvas" width="560" height="560"></canvas> <div id="msg"></div> <input type="button" value="上一關" onClick="NextLevel(-1)"> <input type="button" value="下一關" onClick="NextLevel(1)"> <input type="button" value="重玩本關" onClick="NextLevel(0)"> <input type="button" value="遊戲說明" onClick="showHelp()"> </div> <script src="js/mapdata100.js">//呼叫100關的資料地圖，參見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;//當前的地圖 var curLevel;//當前等級的地圖 var curMan;//初始化小人 var iCurlevel = 0;//關卡數 var moveTimes = 0;//移動了多少次 //預載入所有圖片 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(){ //判斷是否所有的圖片都預載入完成 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();//初始化對應等級的遊戲 showMoveInfo();//初始化對應等級的遊戲資料 } //繪製地板 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); } } } //小人位置座標 function Point(x,y){ this.x = x; this.y = y; } var perPosition = new Point(5,5);//小人的初始標值 //繪製每個遊戲關卡地圖 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://繪製陷進 pic = ball; break; case 3://繪製箱子 pic = box; break; case 4://繪製小人 pic = curMan;//小人有四個方向 具體顯示哪個圖片需要和上下左右方位值關聯 //獲取小人的座標位置 perPosition.x = i; perPosition.y = j; break; case 5://繪製箱子及陷進位置 pic = box; break; } //每個圖片不一樣寬 需要在對應地板的中心繪製地圖 cxt.drawImage(pic,w*j-(pic.width-w)/2,h*i-(pic.height-h),pic.width,pic.height) } } } //初始化遊戲等級 function initLevel(){ curMap = copyArray(levels[iCurlevel]);//當前移動過的遊戲地圖 curLevel = levels[iCurlevel];//當前等級的初始地圖 curMan = down;//初始化小人 InitMap();//初始化地板 DrawMap(curMap);//繪製出當前等級的地圖 } //下一關 function NextLevel(i){ //iCurlevel當前的地圖關數 iCurlevel = iCurlevel + i; if (iCurlevel<0) { iCurlevel = 0; return; } var len = levels.length; if (iCurlevel > len-1) { iCurlevel = len-1; } initLevel();//初始當前等級關卡 moveTimes = 0;//遊戲關卡移動步數清零 showMoveInfo();//初始化當前關卡資料 } //小人移動 function go(dir){ var p1,p2; switch (dir) { case "up": curMan = up; //獲取小人前面的兩個座標位置來進行判斷小人是否能夠移動 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; } //若果小人能夠移動的話，更新遊戲資料，並重繪地圖 if (Trygo(p1,p2)) { moveTimes ++; showMoveInfo(); } //重繪地板 InitMap(); //重繪當前更新了資料的地圖 DrawMap(curMap); //若果移動完成了進入下一關 if (checkFinish()) { alert("恭喜過關！！"); NextLevel(1); } } //判斷是否推成功 function checkFinish(){ for (var i=0;i<curMap.length ;i++ ) { for (var j=0;j<curMap[i].length ;j++ ) { //當前移動過的地圖和初始地圖進行比較，若果初始地圖上的陷進引數在移動之後不是箱子的話就指代沒推成功 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; } //若果判斷不成功小人前面的箱子前進一步 curMap[p2.x][p2.y] = 3;//更改地圖對應座標點的值 //console.log(curMap[p2.x][p2.y]); } //若果都沒判斷成功小人前進一步 curMap[p1.x][p1.y] = 4;//更改地圖對應座標點的值 //若果小人前進了一步，小人原來的位置如何顯示 var v = curLevel[perPosition.x][perPosition.y]; if (v!=2)//若果剛開始小人位置不是陷進的話 { if (v==5)//可能是5 既有箱子又陷進 { v=2;//若果小人本身就在陷進裡面的話移開之後還是顯示陷進 }else{ v=0;//小人移開之後之前小人的位置改為地板 } } //重置小人位置的地圖引數 curMap[perPosition.x][perPosition.y] = v; //若果判斷小人前進了一步，更新座標值 perPosition = p1; //若果小動了 返回true 指代能夠移動小人 return true; } //判斷是否推成功 //與鍵盤上的上下左右鍵關聯 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; } } //完善關卡資料及遊戲說明 function showMoveInfo(){ msg.innerHTML = "第" + (iCurlevel+1) +"關 移動次數: "+ moveTimes; } //遊戲說明 var showhelp = false; function showHelp(){ showhelp = !showhelp; if (showhelp) { msg.innerHTML = "用鍵盤上的上、下、左、右鍵移動小人，把箱子全部推到小球的位置即可過關。箱子只可向前推，不能往後拉，並且小人一次只能推動一個箱子。"; }else{ showMoveInfo(); } } //克隆二維陣列 function copyArray(arr){ var b=[];//每次移動更新地圖資料都先清空再新增新的地圖 for (var i=0;i<arr.length ;i++ ) { b[i] = arr[i].concat();//連結兩個陣列 } 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">支付寶天天領分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> <!-- JiaThis Button BEGIN --> <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> <!-- JiaThis Button END --> </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>
相關推薦
【休閒遊戲 實戰1】推箱子PC端小遊戲（附原始碼）
效果圖：第100關有些難度，用了449步才過關（我用的是可跳關版的，直接玩的最後一關）原始碼解讀原始碼一共3個檔案：index.html(遊戲介面載入，核心功能)，js/mapdata100.js（100個16階矩陣，通過0,1,2,3,4分別對應遊戲中5個元素的圖片來定義每
【機器學習演算法-python實現】KNN-k近鄰演算法的實現（附原始碼）
下載地址 kNN演算法及例項原始碼實現#coding=utf-8 ''' Created on Sep 16, 2010 kNN: k Nearest Neighbors Input: inX: vector to compare to existing dataset (1xN)
【策略研究】跨品種價差套利策略（附原始碼）
跨品種價差套利簡介 套利原理 通俗地講，就是兩個合約相關性很好，突然市場出了一個bug，破壞了兩個合約之間的平衡狀態，進場套利；等待市場回覆，平倉出場。即均值回覆思想。 價差套利 價差套利的前提是做出商品期貨品種間同一月份的價格之間的價差，並且畫出價差的時
SSD目標檢測(1)：圖片+視訊內的物體定位（附原始碼）
一、SSD用於圖片物體的定位與檢測 SSD原理介紹這一篇部落格對我的幫助比較大，很詳細的介紹了SSD原理，送給大家做了解 1、下載SSD框架原始碼 1.1
【機器學習入門——1】Python 開發環境的安裝 Python（x，y）及Pycharm
在學習機器學習的過程中，我們必不可少的要敲寫一些程式碼。在機器學習領域中用到的語言主要有Matlab、Python、R等語言，由於自身接觸到的環境原因我主要選著Matlab及Pyt
【學會Matlab走遍天下】如何畫正弦餘弦曲線和（學習筆記）
常用命令： clc %清屏 clear + 變數 %將變數擦除 註釋符：% 矩陣建立 邏輯語法 sum=0;i=1; while(i<=100) sum=sum+i;i=i+1; sum
Flutter | Json自動反序列化——json_serializable（附原始碼） 【3】
轉載自：https://www.jianshu.com/p/b307a377c5e8 前言 Google推出flutter這樣一個新的高效能跨平臺（Android，ios）快速開發框架之後，被業界許多開發者所關注。我在接觸了flutter之後發現這個確實是一個好東西，好東西
【Java入門提高篇】Day34 Java容器類詳解（十五）WeakHashMap詳解
public class WeakHashMapTest { public static void main(String[] args){ testWeakHashMap(); } private static void testWeakHashMap
【Kaggle-MNIST之路】兩層的神經網路Pytorch（改進版）（二）
簡述 基於我的上一篇文章改進。 其實就是把損失函式調整了一下。 從CrossEntroyLoss到MultiMarginLoss。 得分：0.81 排名：2609 程式碼 import panda
【資料結構與演算法】Huffman樹&&Huffman編碼（附完整原始碼）
出處：http://blog.csdn.net/ns_code/article/details/19174553 Huffman Tree簡介 赫夫曼樹（Huffman Tree），又稱最優二叉樹，是一類帶權路徑長度最短的樹。假設有n個權值{w1,
【拔刀吧TensorFlow】Ubuntu16.04系統安裝問題總結（已更新）
重大更新！！！！！ 因為You do not appear to be using the NVIDIA X driver. 這樣的報錯，感覺雖然安裝了nvidia驅動，但是並沒有呼叫起來驅動，遂決定再次重做系統。這次重做的步驟如下： 1. 重做系統。 2. 重啟之後發現可以雙屏顯示，解析度正
【TensorFlow】Numpy常用函式彙總（附原始碼）
以下內容是我在學習Numpy時，寫的例項，每一個模組都可以執行，並比較不同函式之間的差別。import numpy as np#dtype 定義numpy的儲存型別（np.int np.float）,預設是64'''#定義矩陣格式'''
【Android 熱修復與外掛化 一】帶你入門Android外掛化（附demo）
本文為博主Colin原創文章，歡迎轉載。 https://blog.csdn.net/colinandroid/article/details/79431502 一. 背景 Android外掛化作為每個合格的Android程式設計師都必須會的技術，被各大廠廣泛使用。隨著各大廠對
【CG物理模擬系列】流體模擬--粒子法之SPH（程式碼講解）
#include "sph_system.h" #include "sph_header.h" SPHSystem::SPHSystem() { max_particle=30000; num_particle=0; kernel=0.04f; mass=0.02f; //初始化空間大小，並計算
【分享】分享一個基於SSH實現的簡單學生選課系統（附原始碼）
歡迎關注微信賬號：java那些事：csh624366188.每天一篇java相關的文章 java交流工作群1: 77800592（已滿） java交流學生群2：234897635（已滿） java交流工作群3：94507287 java交流工作群4: 272265434 我的郵箱：
【策略研究】海龜交易法則（附原始碼）
海龜交易法則簡介 什麼是海龜交易法則？ 1983年年中，著名的商品投機家理查德.丹尼斯與他的老友比爾.埃克哈特進行了一場辯論，這場辯論是關於偉大的交易員是天生造就還是後天培養的。理查德相信，他可以教會人們成為偉大的交易員。比爾則認為遺傳和天性才是決定因素。
【OCP題庫-12c】最新CUUG OCP 071考試題庫（70題）
values mman ble ans delete best cau save first 70、(31-2)choose the best answer: View the Exhibit and examine the structure of the Book ta
【OCP題庫-12c】最新CUUG OCP 071考試題庫（69題）
sel query dual 試題 owin ans lua The select 69、(31-1)choose the best answer: Evaluate the following query: SELECT INTERVAL ‘300‘ MONTH, INT
【OCP題庫-12c】最新CUUG OCP 071考試題庫（71題）
試題 nts 考試題庫 point choose com ued transacti mit 71、(32-18) choose three Which three statements indicate the end of a transaction? (Choose
【OCP題庫-12c】最新CUUG OCP 071考試題庫（72題）
reg ive answer statement splay and ren 考試 display 72、View the exhibit for the structure of the STUDENTand FACULTYtables. STUDENT Name Nul