為了學習canvas，寫了這個小遊戲貪吃蛇供自己和大家學習
github:
play on:
遊戲截圖：
前言：
為了方便載入轉移，我把整個js都寫在了html裡，為了方便閱讀，將函式結構在html裡清晰地分開，
並在**裡有足夠注釋。
函式結構如下：
|----script其中碰到的問題與解決：一、滑鼠事件問題canvas 中無法實現內部事件的新增和刪除，準確的來說，在canvas就是一張單純的畫布，整個canvas才能做dom中的事件操作|----definations
|----global snake variables
|----global canvas variables
|----global panel variables
|----global stage variables
|----global game status variables
|----init functions
|----initpanel
|----initbuttons
|----initstage
|----initcanvas
|----initmaps
|----snakenode
|----initsnake
|----producesingle
|----init
|----draw funcitons
|----drawscore
|----drawbutton
|----drawbuttons
|----drawsnake
|----drawsingle
|----drawstage
|----draw
|----action functions
|----movesnake
|----main
|----event functions
|----keydown
|----getoffsetposition
|----determinebutton
|----mousemove
|----clickbutton
|----debounce
|----bind
|----pause
|----start
|----restart
|----died
|----rock and roll
|----init()
|----main()
如果想在canvas中實現內部click或mousemove等事件，有兩種方案來實現：
1、用四周邊界來確定：
2、使用canvasapi中的ispointinpath方法：
二、繪製問題
在我原先的版本中我是將整個物件操作和物件繪製設定成乙個interval來實現在，在後來的編寫中就發現這樣做會很死板，如果想新增或改動一些功能，則要對整個**進行修改甚至在這種模型下無法實現。
最後還是將繪製和操作分離開來：
setinterval(function該遊戲中的event functions(),1000/60) //每秒重繪60次
原理：物件事件來改變物件的屬性，而繪製則是用物件屬性來繪製，兩個邏輯各司其職，互不干預。
優點：整體程式邏輯會更清晰，更方便後續功能的新增和修改。
the end
canvas實現貪吃蛇
效果圖ps 這個只是思路，詳細可看 注釋 一 先把蛇畫出來 定義一下蛇的結構，用乙個陣列儲存一堆矩形，包含蛇頭 紅 和蛇身 灰 畫蛇 初始狀態 二 蛇能動 重點 蛇移動方式 自始至終都只有蛇頭在動 需要乙個儲存方向的變數 direction 根據方向進行移動，一次移動乙個格 根據按鍵改方向 三 隨機...
用pathon寫貪吃蛇（二）
之前已經寫出了牆，現在要要把小蛇寫出來，這裡的小蛇是那種長度不變的，僅會隨著鍵盤敲轉變方向。在根據鍵盤敲下的按鍵轉變方向時，如果是直接掉頭的方式，比如小蛇在向前走，但直接向後方轉，這顯然是無法做到的，所以對於這樣的命令，我們認為它是無效的。後乙個點獲得前乙個點的座標，蛇頭根據按鍵轉變方向 towar...
canvas 繪製貪吃蛇遊戲
分數記錄 let fraction 0 定義貪吃蛇的組成，方塊物件 class block 畫方法 draw 蛇類 class snake draw move if this.direction left if this.direction up if this.direction down 增加頭...