做一個貪食蛇小遊戲
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<style>
table {
width:80%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td{
width:2px;
}
</style>
</head><body>
<button id="btn"style="width:200px;height:50px;position:absolute;" onclick="h()">開始遊戲</button>
<div id="score"style="position:absolute;bottom:20px"></div>
<div id="main" style="width:100%;height:100%;">
<!--不可設為absolute才不會按按鍵滑動移幕 -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>先讓長寬相等
宣告變數
設定前進時的方向變數
思考方向
1.如何產生會前進的黑色方格
2.黑色方格的id = 蘋果的id時蛇的陣列長度+1
3.再次產生一個紅色方格，但不在蛇的身體上
4.如果蛇撞到邊界或自己身體遊戲結束
Last updated
Was this helpful?