<
!doctype
html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
document
<
/title
>
<
/head
>
<
body
>
<
/body
>
<
script
>//
貪吃蛇：//
鍵盤的方向鍵，控制蛇的方向，碰撞食物，實現增加長度的效果，撞到牆壁或自身，遊戲結束//
分析：/
/地圖：提供邊界//
食物：隨機出現，可以被碰撞（座標重複）//
蛇：初始的固定長度，移動，改變方向，碰撞食物，碰撞牆，碰撞自己（座標重複）
class
mapcreateele()
px;height:$px;
background:$
;margin:
0auto
;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(
vari=1
;i<
this
.body
.length;i
++)}
//以上只是在修改座標，生效了麼？設定回去了麼？//
走的過程中有可能吃到食物，增加乙個蛇節（元素），建立元素//
11.所以，使用建立蛇節方法，重新設定蛇節的位置以及判斷是否需要建立新元素
this
.createele()
;}direct
(type)}
}function
random(a
,b)function
randomcolor()
,$,$
)`}varm=
newmap()
;varf=
newfood()
;//為了測試，先用計時器，重複執行，看一看隨機效果//
setinterval((
)=>
,500);
vars
=new
snake()
;//13.
當按下鍵盤時，將按下的鍵盤的code值，傳給蛇的專屬處理方法
document
.onkeydown
=function
(eve)/
/因為後期要做不允許掉頭的效果//
所以，採取當前方法：兩個分支處理方向
簡單的貪吃蛇遊戲實現
貪吃蛇功能實現 1 定義貪吃蛇遊戲棋盤圖 2 初始化棋盤 3 輸出棋盤所在資訊 3 選擇遊戲難度 4 隨機產生食物 5 更新遊戲動態 6 設定遊戲相應的操作 7 列印遊戲結果 實現 include include include include include include include usi...
js 實現貪吃蛇遊戲效果
用div模擬遊戲畫面範圍，食物，以及貪吃蛇。限定食物出現的時機 為隨機出現。俺不能超出畫面範圍。限定貪吃蛇遊走範圍 限定遊戲規則 1，貪吃蛇，超出畫面範圍遊戲結束。2，貪吃蛇，撞到自己遊戲結束。class map createele px height px background margin 0 ...
js編寫簡單的貪吃蛇遊戲
css tdtable js window.onload function function snake 將tr放到tbody中 將tbody放入table中 ota.cellspacing 1 約定一下所有的顏色 黑邊框 333 大背景 ccc 紅點背景red 555蛇身的顏色 eee蛇頭的顏色 ...