HTML5推箱子實現

2021-07-15 04:51:02 字數 2239 閱讀 1690

結果圖

首先建立canvas

id="canvas"

width="400"

height="400">

瀏覽器不相容

canvas>

body>

第一步:畫二維陣列地圖0表示平地 1表示牆 2表示小人 3表示箱子 4表示目標

var gamemap1=[

[1,1,1,1,1,1,1,1,1,1],

[1,1,1,0,0,0,0,4,1,1],

[1,1,1,1,0,0,1,1,1,1],

[1,4,0,0,0,0,0,0,0,1],

[1,0,0,0,1,2,0,0,0,1],

[1,0,0,0,1,0,0,0,0,1],

[1,0,0,0,1,0,3,0,0,1],

[1,0,0,0,3,3,0,0,0,1],

[1,0,0,0,0,4,0,0,0,1],

[1,1,1,1,1,1,1,1,1,1]

];

var block=new image();//0

block.src="img/block.gif";

var wall=new image();//1

wall.src="img/wall.png";

var man=new image();//2

man.src="img/down.png";

var box=new image();//3

box.src="img/box.png";

var target=new image();//4

target.src="img/ball.png";

var completedbox=new image();//5

completedbox.src="img/comp_box.png";

第三步:初始化

window.onload=function()

/** * 地圖初始化

*/function initmap(gamemap)

ctx.drawimage(pic,w*j,h*i,pic.width,pic.height);}}

}

第四步:新增鍵盤事件

//body繫結鍵盤事件

onkeydown="dokeydown(event)">

id="canvas"

width="400"

height="400" >

瀏覽器不相容

canvas>

body>

實現dokeydown(event)方法

/**

* 鍵盤事件處理

*@param e

*/function dokeydown(e)

}

第五步:實現物件移動

/**

* 移動物件

*@param obj

*@param originx

*@param originy

*@param newx

*@param newy

*/function move(obj,originx,originy,newx,newy)

第六步實現上下左右移動向下移動為例:

/**

* 向下移動

*/function godown()else

if(gamemap[i+1][j]==3)else

if(gamemap[i+2][j]==4)}}

向上,向左,向右同理。

第七步:判斷勝利

/**

* 判斷勝利

*/function checkfinish()}}

return

true;

}

QT版推箱子實現步驟以及功能說明

原始碼在我的另外一篇文章裡有介紹本章只是簡要介紹 1.根據使用者選定的地 件開啟地圖 2.將地圖儲存到地圖資料陣列中 3.載入以及 資源 4.地圖元素繪製陣列申請記憶體並完善 5.繪製地圖元素 6.布局 7.新增撤銷快捷鍵 ctrl z 8.去邊緣 空地 9.不要忘記了遊戲操作 撤銷 10.新增滑鼠...

C實現推箱子

推箱子遊戲編寫思路總結 1.顯示遊戲地圖 2.顯示小人移動的方向 3.移動小人 第一 簡單的介面輸出時可以用指標陣列,指標陣列map中含十個指標map 0 map 1 map 9 分別是這是個字串的起始位址 char map row 但最後改變位置時不太方便,還是使用c以二維陣列輸出比較簡潔。第二 ...

C 控制台遊戲 推箱子 實現人不能撞牆

思路 1 再定義兩個變數,用於存放玩家的座標的備份 值 2 在地圖模組中,把玩家的座標賦給玩家的備份,對當前座標進行備份。3 因為在地圖模組中,按下enter鍵移動後,玩家的座標會根據方向隨之改變。所以先檢測玩家是否撞牆 當玩家的值等於牆的值 把現在玩家的值賦值給之前備份的座標,實現玩家座標不在根據...