<!Document html>
<html lang="=en">
<head>
<meta charset='utf-8'>
<title>貪喫蛇</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.title{
text-align: center;
margin: 10px 0;
}
#main{
width: 800px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
#main .left{
width: 600px;
height: 400px;
float: left;
position: relative;
}/*隨機的事物通過position定位了*/
#main .right{
width: 200px;
height: 100%;
float: left;
border-left: 1px solid red;
box-sizing: border-box;
text-align: center;
}
#main .right h2{
margin: 10px auto;
text-align: center;
}
#main .right h2 #score{
color: red;
}
#main .right button{
width: 100px;
height: 30px;
font-size: 20px;
margin-top: 30px;
border: 0;
border-radius: 5px;
background-color: pink;
color: green;
}
.food{
background-color: black;
}
.snake{
background-color: darkgreen;
}
</style>
</head>
<body>
<h2 class="title">貪喫蛇</h2>
<div id="main">
<div class="left"></div>
<div class="right">
<h2 class="status">請點擊開始</h2>
<h2>分數：<span id="score">0</span></h2>
<button id='btn'>開始</button>
</div>
</div>
</body>
<script type="text/javascript">
// 設置自定義的遊戲參數
var snake_length = 3; // 正整數，增加額外的蛇身體。0就是最小的3段，1就是額外增加1段。
var wall_snake = true; // 開啓撞擊蛇身
var wall = true; // 開啓撞牆
// 獲取變量
var map = document.getElementsByClassName('left')[0];
var status = document.getElementsByClassName('status');
var scoreBox = document.getElementById('score');
var btn = document.getElementById('btn');
// 初始化
init();
// 初始化方法
function init() {
// 獲取地圖的跨度和高度
this.map_width = parseInt(getComputedStyle(map).width);
this.map_height = parseInt(getComputedStyle(map).height);
// 初始化成績和界面
this.score = 0;
scoreBox.innerHTML = this.score;
btn.innerHTML = "開始";
// 食物的高度和寬度
this.food_width = 20;
this.food_height = 20;
// 食物的位置，先定義在左上角看看樣子，之後再搞隨機位置
// this.food_X = 0;
// this.food_Y = 0;
food(); // 生成食物
// 初始化蛇身
this.snake_width = 20;
this.snake_height = 20;
// 下面是一個3段的蛇，第一個參數是水平位置，第二個參數是垂直位置，但三個參數是是否是頭部
// 最後發現第三個參數並沒有用
this.snake_body = [[2, 0, true], [1, 0, false], [0, 0, false]];
// 追加額外的蛇身
if (typeof snake_length === 'number' && snake_length%1 === 0) {
// 綜合上面的2個條件，可以判斷snake_length是一個整數
for (var i=0; i<snake_length; i++) {
this.snake_body.push([0, 0, false]);
}
}
// 蛇移動的方向
this.direction = 'right';
snake(); // 生成蛇身
}
// 點擊按鈕
btn.onclick = function () {
if (this.innerHTML==="開始"){
start_game();
this.innerHTML = "暫停";
} else {
pause_game();
this.innerHTML = "開始";
}
};
// 開始遊戲
function start_game() {
status.innerHTML = "遊戲運行中";
this.snakeMove = setInterval(move, 100);
// 綁定鍵盤按下的事件
bindKeyDown();
}
// 鍵盤按下的事件
function bindKeyDown() {
window.onkeydown = function (ev) {
// status.innerHTML = ev.keyCode;
var code = ev.keyCode; // 獲取按鍵
switch (code){
case 37:
if (this.direction === 'up' || this.direction === 'down') {
this.direction = 'left';
}
break;
case 38:
if (this.direction === 'left' || this.direction === 'right'){
this.direction = 'up';
}
break;
case 39:
if (this.direction === 'up' || this.direction === 'down'){
this.direction = 'right';
}
break;
case 40:
if (this.direction === 'left' || this.direction === 'right'){
this.direction = 'down';
}
break;
case 32:
// 我這裏還希望開始遊戲後，可以用空格控制暫停和開始
btn(); // 前面的按鈕事件沒寫
break;
}
}
}
// 生成蛇身
function snake() {
// 用for循環遍歷數組，將每一段作爲一個div然後添加
for(var i=0; i<this.snake_body.length; i++){
// 創建蛇身
var snakeBox = document.createElement('div');
// 高度和寬度
snakeBox.style.width = this.snake_width+"px";
snakeBox.style.height = this.snake_height+"px";
// 定位
snakeBox.style.position = 'absolute';
// 位置
snakeBox.style.top = this.snake_body[i][1]*this.snake_width+"px";
snakeBox.style.left = this.snake_body[i][0]*this.snake_height+"px";
// 設置一個類名，然後css給這個類定義樣式
snakeBox.className = "snake";
// 追加到map中
map.appendChild(snakeBox);
}
}
// 生成食物
function food() {
// 創建食物
var foodBox = document.createElement('div');
foodBox.style.width = this.food_width+"px";
foodBox.style.height = this.food_height+"px";
// 食物的位置
this.food_X = Math.floor(Math.random()*this.map_width/this.food_width); // 0~29之間
this.food_Y = Math.floor(Math.random()*this.map_height/this.food_height);
foodBox.style.position = 'absolute';
foodBox.style.top = this.food_Y*this.food_height+"px"; // 隨機數乘以寬度
foodBox.style.left = this.food_X*this.food_width+"px";
// 設置一個類名，然後css給這個類定義樣式
foodBox.className = "food";
// 將食物追加到map中
map.appendChild(foodBox);
}
// 蛇移動的方法
function move() {
// 從尾端開始，數組裏的後一個值用數組的前一個值替代
for(var i=this.snake_body.length-1; i>0; i--){
this.snake_body[i][0] = this.snake_body[i-1][0];
this.snake_body[i][1] = this.snake_body[i-1][1];
}
// 根據方法來操作
switch (this.direction){
case 'left':
this.snake_body[0][0] -= 1;
break;
case 'right':
this.snake_body[0][0] += 1;
break;
case 'up':
this.snake_body[0][1] -= 1;
break;
case 'down':
this.snake_body[0][1] += 1;
break;
}
// 數組最前的那個值，就是蛇頭
// this.snake_body[0][0] += 1;
// 判斷蛇頭喫食物
if (this.snake_body[0][0]===this.food_X && this.snake_body[0][1]===this.food_Y){
// status.innerHTML = "喫到食物了"
clearBox("food"); // 移除食物
food(); // 生成新的食物
// 增加分數，先把下面這句加到最上面的獲取變量裏
// var scoreBox = document.getElementById('score');
// 在去初始化函數init()裏，加一條初始化分數變量
// this.score = 0;
this.score += 1;
scoreBox.innerHTML = this.score;
// 增加蛇身長度
// var snake_end = this.snake_body[this.snake_body.length-1]; // 這個是錯誤的
var snake_end = Array.from(this.snake_body[this.snake_body.length-1]); // 這裏需要深copy
this.snake_body.push(snake_end);
}
// 判斷撞牆
wall && (
this.snake_body[0][0]<0 || this.snake_body[0][0]>=this.map_width/this.snake_width ||
this.snake_body[0][1]<0 || this.snake_body[0][1]>=this.map_height/this.snake_height
) && game_over();
// 判斷撞到蛇身
if (wall_snake) {
for (var i=1; i<this.snake_body.length; i++) {
this.snake_body[i][0] === this.snake_body[0][0] &&
this.snake_body[i][1] === this.snake_body[0][1] &&
game_over();
}
}
// 重新生成蛇，才能在頁面上有變化
// 先移除原有的蛇身體
clearBox('snake'); // 這個方法可以複用，只有要清除食物的時候也能用到
// 然後繪製新的蛇身
snake();
}
// 遊戲結束的方法
function game_over() {
status.innerHTML = "Game Over";
clearInterval(this.snakeMove);
alert("遊戲結束\n分數："+this.score);
clearBox('snake');
clearBox('food');
init();
}
// 清除Box
function clearBox(class_name) {
var box = document.getElementsByClassName(class_name);
while(box.length){
map.removeChild(box[0]);
}
}
// 暫停遊戲
function pause_game() {
// 暫停遊戲就是清除定時器
status.innerHTML = "遊戲暫停...";
clearInterval(this.snakeMove);
}
</script>
</html>
javascript開發的貪喫蛇小遊戲(純js代碼）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章