原生JS實現貪吃蛇專案，附原始碼下載！
阿新 • • 發佈：2019-01-03
運行於谷歌瀏覽器。主要是利用了函式的封裝思想，把每一個小功能分別封裝在一個函式中，大大提高了程式碼的可擴充套件性！！提高了程式碼的可維護性！！！提高了程式碼的可閱讀性！！！專案要求：1：有邊界，碰到邊界就game over。2：獵物沒3秒增加一個，而且位置隨機產生。3：吃一個獵物自身就增加一個元素。4：按上下左右控制移動方向，按空格決定暫停和前進。
實現思路：主要是一開始就把實現的功能封裝在了一個先函式中去了，所以後續的功能增加就比較容易了。1：先畫出了邊界，就是實現了設定邊界的函式。2：實現判斷按鍵功能和根據按下的鍵盤決定移動的方向，實現了上下左右的移動功能。順便實現了按下相反方向的鍵不起作用。避免了掉頭自己吃自己。3：實現了獵物的隨機生成功能，可以自動新增獵物:4：判斷是否吃到了獵物。5：實現吃一個長一個功能，當吃一個類物是就把蛇的自身增加一個元素（都儲存在陣列中了，就是增加一個數組元素）。6：因為增加了蛇的長度，所以就得移動每一個的元素的位置。7：實現了是否吃到自己的功能。8：最後實現了暫停功能。
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
#divWallId{width: 1000px;height: 600px; background-color: navajowhite;border: 3px #000 solid;}
#divSnId{width: 10px;height: 10px; background-color: darkblue; position: absolute;top:300px; left: 500px;}
</style>
</head>
<body>
<div id="divWallId">
<div id="divSnId"></div>
</div>
</body>
<script type="text/javascript">
var divSn = document.getElementById("divSnId");
var divWall = document.getElementById("divWallId");
//存放生成獵物
var arrFood = [];
var arr = [divSn]; // 儲存每個元素
var direction = "top"; // 預設向上移動
var flagStop = true;
var preDire = null;
var prePreDir = "top";
// 總時鐘！！
var timerSn = setInterval( main,10);
//隨機生成獵物的時鐘
var timerRan = setInterval(random,1000);
// main 函式
function main(){
//console.log(divSn.offsetTop+" "+divSn.offsetLeft);
keyPressMove(direction);
isEat()
changeLoaction();
border();
isEatIt();
}
//判斷是否吃到自己
function isEatIt(){
for(var i=2;i<arr.length;i++){
if(Math.abs(divSn.offsetTop-arr[i].offsetTop)<=0 && Math.abs(divSn.offsetLeft-arr[i].offsetLeft)<=0){
alert("GeeeeeAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
}
//判斷是否吃掉
function isEat(){
for(var i=0;i<arrFood.length;i++){
if(Math.abs(divSn.offsetTop-arrFood[i].offsetTop)<=10 && Math.abs(divSn.offsetLeft-arrFood[i].offsetLeft)<=10){
//呼叫函式 長大
changeBiger(i);
// 移除food
divWall.removeChild(arrFood[i]);
// 移除陣列中元素
arrFood.splice(i,1);
// 每個元素位置變化；
}
}
}
// 設定邊界
function border(){
if(divSn.offsetTop-divWall.offsetTop<=0 || divSn.offsetTop+10-(divWall.offsetTop+divWall.offsetHeight)>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
if(divSn.offsetLeft-divWall.offsetLeft<=0 || divSn.offsetLeft+10-divWall.offsetLeft-divWall.offsetWidth>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
//隨機生成獵物
function random(){
var foodTop = Math.floor(Math.random()*590)+3+"px";
var foodLeft = Math.floor(Math.random()*990)+3+"px";
var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "red";
subFood.style.position = "absolute";
subFood.style.top = foodTop;
subFood.style.left = foodLeft;
divWall.appendChild(subFood);
arrFood.push(subFood);
}
// 移動每一個元素的位置
function changeLoaction(){
for(var i=arr.length-1;i>0;i--){
arr[i].style.top= arr[i-1].offsetTop+"px";
arr[i].style.left = arr[i-1].offsetLeft+"px";
}
}
// 吃一個長一個
function changeBiger(num){
var arrLen = arr.length;
var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "darkblue";
subFood.style.position = "absolute";
subFood.style.top = arrFood[num].offsetTop+"px";
subFood.style.left = arrFood[num].offsetLeft+"px";
// 新增到陣列中
arr.push(subFood);
divWall.appendChild(subFood);
//alert(arr.length);
}
//判斷按鍵
document.onkeydown = function (event){
switch(event.keyCode){
case 37:{
if(direction!="right"){
direction = "left";
}
break;
}
case 38:{
if(direction!="bottom"){
direction = "top";
}
break;
}
case 39:{
if(direction!="left"){
direction = "right";
}
break;
}
case 40:{
if(direction!="top"){
direction = "bottom";
}
break;
}
case 32:{
if(direction!="space"){
preDire = direction;
}
direction = "space";
break;
}
}
}
// 暫停功能
document.onkeypress = function (event){
if(event.keyCode==32){
if(flagStop == true){
clearInterval(timerSn);
clearInterval(timerRan);
flagStop = false;
//alert(flagStop);
}else{
// 總時鐘！！
direction = preDire;
//alert(direction);
timerSn = setInterval( main,10);
timerRan =setInterval(random,1000);
flagStop = true;
}
}
}
// 根據按下的鍵盤決定移動的方向
function keyPressMove(fangXiang){
//alert(fangXiang)
//console.log(divSn.offsetTop+" "+divSn.offsetLeft);
switch(fangXiang){
case "top":{
divSn.style.top = divSn.offsetTop-1+"px";
break;
}
case "left":{
divSn.style.left = divSn.offsetLeft-1+"px";
break;
}
case "right":{
divSn.style.left = divSn.offsetLeft+1+"px";
break;
}
case "bottom":{
divSn.style.top = divSn.offsetTop+1+"px";
break;
}
}
}
</script>
</html>
