react實現貪吃蛇小遊戲

之前看別人寫小遊戲覺得很厲害，正好最近閒來無聊，就寫了個入門級的小遊戲，貪吃蛇。

當你開始實現的時候，會發現其實並沒有你想的那麼難。下面進入正題。

專案原始碼見：

1. 首先畫出背景

2. 然後初始化初始蛇的位置，蛇為黑色，食物為紅色

renderbackground() 

let trs = ;
for (let i = 0; i < size.row; i++) else if (value === 1) )
} else if (value === 2) )}}
trs.push()
}return ;
}// 獲取在方塊中蛇以及食物的顯示
getsnack = (c, r) => = this.state;
for (let s in snake) 
// 如果這個點是食物，則返回2
if (food.x === c && food.y === r) 
} // 如果這個點什麼都不是返回0
return 0;
}

// 定時自己移動

timer = () => .bind(this), 600);
this.setstate()
}

componentdidmount() )

} else if (keycode === 38 || keycode === 87) )
} else if (keycode === 39 || keycode === 68) )
} else if (keycode === 40 || keycode === 83) )
} }.bind(this);
// 初次渲染的時候開啟定時
this.timer();
}

6. 蛇的每個部分統一行走，轉換方向時，後乙個按照前乙個的軌跡進行行走

7. 超過邊界時，重新開始

move = (dir) =>  = this.state;

let first = 
let last = {};
// move
if (dir === direction.up) else if (dir === direction.down) else if (dir === direction.left) else if (dir === direction.right) 
// 撞到自己
let _snake = snake.filter(item => item.x === first.x && item.y === first.y)
if (first.y > size.col - 1 || first.y < 0 || first.x < 0 || first.x > size.row - 1 || _snake.length > 0) 
let eat = false;
// 吃到食物
if (first.x === food.x && first.y === food.y) 
this.showfood();
} // 蛇整體動起來
for (let s in snake) ;
snake[s].x = first.x;
snake[s].y = first.y;
first = next_first;
} // 吃到食物之後蛇變長
if (eat) 
this.setstate()
}

// 暫停

pause = () => )
}

// 開始

handlestart = () => = this.state;
if (status === 'pause') 
}

// 顯示新的食物

showfood = () => 
//每次顯示新的食物意味著吃了上乙個食物，加1分
let score = this.state.score + 1; 
this.setstate(, score })
}

// 重新開始

handlerestart = () => ],
food: ,
dir: direction.right,
interval: 2,
status: 'start',
score: 0
}) this.timer()
}

貪吃蛇小遊戲實現

index.html style.css mapindex.js tools.js 自呼叫函式傳入window的目的，是讓變數可以被壓縮 防止undefined重新命名，也可以被壓縮 function window,undefined 暴露tools給window window.tools tool...

貪吃蛇小遊戲

1 doctype html 2 html 3 head 4 title snake title 5head 6 body style text align center margih 100px background color aaaaaa 7 canvas id canv width 400 ...

java swing 實現貪吃蛇小遊戲

if i 1 radomg jpanel.getgraphics radomg.setcolor color.red 建立乙個蛇執行緒 drawsnak snakt new drawsnak snakt.start snakg jpanel.getgraphics snakg.setcolor co...