實(shí)現(xiàn)思路
模擬出一個(gè)屏幕畔濒，在屏幕里進(jìn)行游戲操作侵状。這點(diǎn)的實(shí)現(xiàn)就是---在頁(yè)面上加一個(gè)18行10列的div塊趣兄，給這個(gè)div塊添加樣式.container.
限制方塊圖形只能在屏幕內(nèi)移動(dòng)和旋轉(zhuǎn)。就是定義一個(gè)函數(shù)check，取方塊圖形上下左右的4個(gè)最值點(diǎn)闯团，與容器的4個(gè)最值點(diǎn)進(jìn)行比較。
在move函數(shù)和rotate函數(shù)里面伐割，先調(diào)用check函數(shù)判斷移動(dòng)或旋轉(zhuǎn)后方塊圖形的4個(gè)最值坐標(biāo)會(huì)不會(huì)越出屏幕邊界，如果會(huì)直接返回false隔心，不去修改相對(duì)位置的坐標(biāo)或者修改shape數(shù)據(jù)白群。
如果不會(huì)越界，才去修改相對(duì)位置坐標(biāo)或把新的newShape數(shù)據(jù)覆蓋舊的shape數(shù)據(jù)硬霍，然后調(diào)用show方法把4個(gè)方塊的左上角點(diǎn)移動(dòng)到新的4個(gè)坐標(biāo)點(diǎn)帜慢。
概況工作就是添加一個(gè)check函數(shù)的定義，然后在move函數(shù)和rotate函數(shù)里面都調(diào)用一下check函數(shù)。check函數(shù)返回true表示沒(méi)越界粱玲，返回false表示越界躬柬。
注意：
容器和方塊的margin必須一致，因?yàn)樗鼈兊膍argin都是相對(duì)瀏覽器頁(yè)面的邊距（它們都是在DOM樹(shù)里面是同一層次抽减，方塊并非容器的子節(jié)點(diǎn)允青，所以方塊的margin不是距離容器的邊距。）
如果我們?nèi)萜鞯膍argin設(shè)置為1px;而方塊的margin設(shè)置為10px卵沉，那么容器在頁(yè)面的水平位置是1px-201px颠锉，而方塊在頁(yè)面的活動(dòng)范圍則是10px到210px之間，這樣就會(huì)導(dǎo)致方塊向左移動(dòng)會(huì)與最左側(cè)存在一點(diǎn)點(diǎn)間隔史汗，向右移動(dòng)會(huì)超出容器邊界一點(diǎn)點(diǎn)木柬。豎直的情況也是一樣。
小問(wèn)題分析及解決
這樣我們?cè)摴δ荛_(kāi)發(fā)完了淹办，不過(guò)我們刷新頁(yè)面眉枕，可以看到方塊圖形最上方和最左側(cè)可以與容器邊界重合，但是方塊圖形距離最右邊和最底部有1px的間隔怜森。
這是因?yàn)榉綁K的邊長(zhǎng)是19px速挑，加上每個(gè)方向兩個(gè)1px的間隔，實(shí)際上每個(gè)小方塊在頁(yè)面占據(jù)21px21px的空間副硅，只不過(guò)我們看到顏色填充的部分只有19px19px姥宝。
因?yàn)閙argin為1px，所以方塊在最左邊(0,top)在頁(yè)面上實(shí)際是(1,top)恐疲。每次移動(dòng)以左上角的坐標(biāo)右移20px像素腊满，可以移動(dòng)9次到第10列，所以水平方向上移動(dòng)范圍是0-180培己，對(duì)應(yīng)瀏覽器頁(yè)面上移動(dòng)范圍是1px-181px碳蛋。在第181px開(kāi)始繪制19px*19px的方塊，這樣在紅色方塊最右邊的距離是181+19=200px省咨。而容器最右側(cè)是1px+width=201px肃弟，所以可以看到方塊最右側(cè)與容器存在1px的間隔，豎直方向上同理零蓉。
解決方案是：既然方塊在瀏覽器頁(yè)面上水平最值是1px～200px,那么我們就設(shè)置容器水平最值為0px~201px,于是設(shè)置容器margin為0px笤受，width為201px；垂直方向同理敌蜂。
完成箩兽，代碼傳送門：https://github.com/xiaohuacc/snake/blob/index004/index004.html
