創建畫布，驗證瀏覽器相容性我就省去了，也很簡單網上有代碼。 然就是蛇對象 食物 移動 控制方向 吃到食物 吃到自己 基本功能大概就是這樣。可能還不算完美，後面有時間繼續優化一下！ ...
創建畫布，驗證瀏覽器相容性我就省去了，也很簡單網上有代碼。
var canctx = document.getElementById("can");
var ctx =canctx.getContext("2d");
然就是蛇對象
var snake={ arrx:[100,110,120],//預設橫坐標和長度（數組長度就是蛇的預設長度） arry:[200,200,200],//預設縱坐標 movedirection:2,//上下左右方向（0是左，1是上，2是右，3是下。預設往右） behavior:function () { ctx.fillStyle="red"; for(var i=0;i<this.arrx.length;i++) { ctx.fillRect(this.arrx[i], this.arry[i], 10, 10); } } }
食物
var food={ x:10, y:10, show:function () { //隨機在畫布中生成食物 var getx=Math.floor(Math.random()*391),gety=Math.floor(Math.random()*391); this.x = getx%10==0?getx:Math.floor(getx/10)*10; this.y = gety%10==0?gety:Math.floor(gety/10)*10; chack(this.x,this.y); ctx.fillStyle="#fff"; ctx.fillRect(this.x,this.y,10,10); } }
移動
//繪製移動的蛇 function DrawSnake() { if(snake.movedirection==2){//往右跑 if(snake.arrx[snake.arrx.length-1]==canctx.width-10){//最後一個蛇身體(蛇是由一個一個的10*10的正方形構成)的x坐標等於畫布寬度減10就說明撞牆了 died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1] + 10);//x坐標累加10（數組裡添加新的坐標,蛇的移動就是添加新的坐標在最後一位刪除第一個坐標） snake.arry.push(snake.arry[snake.arry.length - 1]);//y坐標不變 } }else if(snake.movedirection==0){//往左跑 if(snake.arrx[snake.arrx.length-1]==0){ died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1] - 10); snake.arry.push(snake.arry[snake.arry.length - 1]); } }else if(snake.movedirection==1){//往上跑 if(snake.arry[snake.arry.length-1]==0){ died(); }else{ snake.arrx.push(snake.arrx[snake.arrx.length - 1]); snake.arry.push(snake.arry[snake.arry.length - 1] - 10); } }else {//往下跑 if(snake.arry[snake.arry.length - 1] == canctx.height-10) { died(); } else { snake.arrx.push(snake.arrx[snake.arrx.length - 1]); snake.arry.push(snake.arry[snake.arry.length - 1] + 10); } } EatFood(); ctx.fillStyle="red"; for(var i=0;i<snake.arrx.length;i++) { ctx.fillRect(snake.arrx[i], snake.arry[i], 10, 10); } EatSelf(snake.arrx[snake.arrx.length - 1],snake.arry[snake.arry.length - 1]); ctx.clearRect(snake.arrx[0],snake.arry[0],10,10); snake.arrx.splice(0,1); snake.arry.splice(0,1); }
控制方向
//控制方向 function Controldirection(e) { switch(e.keyCode){ case 37://左 snake.movedirection=0; DrawSnake(); break; case 39://右 snake.movedirection=2; DrawSnake(); break; case 38://上 snake.movedirection=1; DrawSnake(); break; case 40://下 snake.movedirection=3; DrawSnake(); break; } }
吃到食物
//吃到食物 function EatFood() { if(snake.movedirection==0||snake.movedirection==1){//向左或向上時 //蛇頭(坐標最後一個值)的x、y坐標和食物的x、y坐標相等 //蛇移動的方向不同，判斷條件也不同（自己可以在紙上先畫出蛇在不同方向與食物接觸的時候的x、y坐標的對應關係是怎麼樣的來確認判斷條件） if(snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){ if(snake.movedirection==0) {//吃到食物後添加數組的長度 snake.arrx.unshift(snake.arrx[0]+10); snake.arry.unshift(snake.arry[0]); food.show(); }else{ snake.arrx.unshift(snake.arrx[0]); snake.arry.unshift(snake.arry[0] + 10); food.show(); } } }else{//向右或向下時 if(snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){ if(snake.movedirection==1) { snake.arrx.unshift(snake.arrx[0] - 10); snake.arry.unshift(snake.arry[0]); food.show(); }else{ snake.arrx.unshift(snake.arrx[0]); snake.arry.unshift(snake.arry[0]-10); food.show(); } } } }
吃到自己
//吃到自己 function EatSelf(x,y) { for(var i=0;i<snake.arrx.length-1;i++) { if(snake.movedirection==0) {//向左 //條件和吃到食物類似就是判斷舌頭的坐標和身體的左邊，同理不同方向移動時條件也是不一樣的 if (snake.arry[i] == y && x-snake.arrx[i] == 10) { died(); } }else if(snake.movedirection==1){//向上 if (snake.arrx[i] == x && y-snake.arry[i] == 10) { died(); } }else if(snake.movedirection==2){//向右 if (snake.arry[i] == y && snake.arrx[i]-x == 10) { died(); } }else{//向下 if (snake.arrx[i] == x && snake.arry[i]-y == 10) { died(); } } } }
//停止計時器事件和移除方向事件 function died() { alert("你掛了！"); clearInterval(snakemove); document.removeEventListener("keydown", Controldirection); return; }
document.addEventListener("keydown", Controldirection);
food.show();
snake.behavior();
var snakemove =setInterval(function () {
DrawSnake();
},300);
基本功能大概就是這樣。可能還不算完美，後面有時間繼續優化一下！
