簡單的貪吃蛇小遊戲,看完**保證你對這個遊戲沒有興趣哈哈
// 貪吃蛇:
// 鍵盤的方向鍵,控制蛇的方向,碰撞食物,實現增加長度的效果,撞到牆壁或自身,遊戲結束
// 分析:
// 地圖:提供邊界
// 食物:隨機出現,可以被碰撞(座標重複)
// 蛇:初始的固定長度,移動,改變方向,碰撞食物,碰撞牆,碰撞自己(座標重複)
class
mapcreateele()
px;height:
$px;background:
$;margin:0 auto;position:relative;border:solid 10px black;`
; document.body.
(this
.mapele);}
}class
food
createele()
px;height:
$px;background:
$;position:absolute;left:
$px;top:
$px;`
;// console.log(m.mapele);
m.mapele.
(this
.foodele);}
randompos()
}// 至少得有多個元素(蛇節)組成
// 每個元素都要有自己的標籤,位置,寬高,顏色
// 單個元素,使用物件包含所有資訊
// 所有元素怎麼辦?來個陣列,包裹起來
class
snake,,
];// 7-1.提前設定預設方向
this
.d =
"right"
;// 3.開始建立蛇節元素,設定樣式
this
.createele()
;}createele()
this
.body[i]
.ele.style.csstext =
`width:
$px;height:
$px;background:
$;position:absolute;left:
$px;top:
$px;`;}
// 找到蛇頭
this
.body[0]
.ele.innerhtml =
"0";
// 5.延遲之後,開始移動
settimeout((
)=>
,300);
}move()
// 7.第乙個元素根據預設方向,決定想哪走
switch
(this
.d)// 8.移動過程中,判斷是否撞到邊界,任意乙個邊界都不行if(
this
.body[0]
.x <0||
this
.body[0]
.y <0||
this
.body[0]
.x >
((m.w-
this
.w)/
this
.w)||
this
.body[0]
.y >
((m.h-
this
.h)/
this
.h))
// 9.移動過程中,判斷是否與食物的座標重複,如果重複if(
this
.body[0]
.x === f.x &&
this
.body[0]
.y === f.y)
)// 重新整理食物的座標
f.randompos()
;}// 10.移動過程中,判斷蛇頭的座標是否與某個任意乙個蛇節的座標重複
for(
var i=
1;i<
this
.body.length;i++)}
// 以上只是在修改座標,生效了麼?設定回去了麼?
// 走的過程中有可能吃到食物,增加乙個蛇節(元素),建立元素
// 11.所以,使用建立蛇節方法,重新設定蛇節的位置以及判斷是否需要建立新元素
this
.createele()
;}direct
(type)}}
function
random
(a,b)
function
randomcolor()
,$,$
)` }
var m =
newmap()
;var f =
newfood()
;// 為了測試,先用計時器,重複執行,看一看隨機效果
// setinterval(() => , 500);
var s =
newsnake()
;// 13.當按下鍵盤時,將按下的鍵盤的code值,傳給蛇的專屬處理方法
document.
onkeydown
=function
(eve)
效果:等一下哦,上一局的馬上重新整理完!!!
貪吃蛇小遊戲
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 ...
JS小遊戲貪吃蛇 詳細注釋
執行 框 貪吃蛇綠色食物 灰色毒品 藍色滑板 紅色剎車 最高分 0 tips ie element.innertext ff element.textcontent setattribute cellpadding 0 在ie中無效,正確寫法cellpadding 一不小心就犯錯了 ff中,使用繫結...
貪吃蛇遊戲(附原始碼)
貪吃蛇遊戲,現在還有很多bug。等待大家挑錯。難度 1最難,500最簡單。吃夠20個食物就可以過關了 呵呵。無聊時候玩玩吧 include include include include const int maxn 100 const int n 20 struct node int map ma...