貪吃蛇JQuery部分
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html> <head> <title>snake</title> <style> .square { width: 30px; height: 30px; } .border { background-color: grey; } .snake { background-color: red; } .in { background: #0f0; } .food { background: blue; } #btn{ float: left; position: absolute; left: 100px; top: 100px; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" align="center"> <tbody id="tbody"> </tbody> </table> <button id="btn" onclick="location.reload();">點我再來一次</button> <script src="jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //初始化遊戲背景 initTable(20,20); var foodArr = randomFood();//把蛇的食物放在一個數組裡 var timer; var snake = new Object(); snake.arr = [[1,1]]; snake.direction = "right"; //初始化一條蛇 for (var i = 0; i < snake.arr.length; i++) { snake.arr[i] $("#tbody").children().eq(snake.arr[i][0]).children().eq(snake.arr[i][1]).addClass("snake"); } timer = setInterval(function() { //分四個方向 每個方向三種情況 //向右移動時 if(snake.direction == "right") { if($("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).next().hasClass("border") || $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).next().hasClass("snake")) { window.clearInterval(timer); alert("嘻嘻，你死了喲，真是菜"); //如果碰到邊界或者自己的身體 遊戲結束 } else if ($("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).next().hasClass("food")) { snake.arr.unshift(foodArr); console.log(snake.arr); $("tbody").children().eq(foodArr[0]).children().eq(foodArr[1]).removeClass("food").addClass("snake"); foodArr = randomFood(); //通過判斷蛇身體是否有食物的樣式 } else { var arr = [snake.arr[0][0], snake.arr[0][1] + 1]; snake.arr.unshift(arr); $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).addClass("snake"); $("#tbody").children().eq(snake.arr[snake.arr.length - 1][0]).children().eq(snake.arr[snake.arr.length - 1][1]).removeClass("snake"); snake.arr.pop(); //在沒有其他情況下 按著這個方向一直移動 } //向左移動時 } else if(snake.direction == "left") { if($("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).prev().hasClass("border") || $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).prev().hasClass("snake")) { window.clearInterval(timer); alert("嘻嘻，你死了喲，真是菜"); } else if ($("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).prev().hasClass("food")) { snake.arr.unshift(foodArr); console.log(snake.arr); $("tbody").children().eq(foodArr[0]).children().eq(foodArr[1]).removeClass("food").addClass("snake"); foodArr = randomFood(); } else { var arr = [snake.arr[0][0], snake.arr[0][1] - 1]; snake.arr.unshift(arr); $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).addClass("snake"); $("#tbody").children().eq(snake.arr[snake.arr.length - 1][0]).children().eq(snake.arr[snake.arr.length - 1][1]).removeClass("snake"); snake.arr.pop(); } //向上移動時 } else if(snake.direction == "top") { if($("#tbody").children().eq(snake.arr[0][0]).prev().children().eq(snake.arr[0][1]).hasClass("border") || $("#tbody").children().eq(snake.arr[0][0]).prev().children().eq(snake.arr[0][1]).hasClass("snake")) { window.clearInterval(timer); alert("嘻嘻，你死了喲，真是菜"); } else if ($("#tbody").children().eq(snake.arr[0][0]).prev().children().eq(snake.arr[0][1]).hasClass("food")) { snake.arr.unshift(foodArr); console.log(snake.arr); $("tbody").children().eq(foodArr[0]).children().eq(foodArr[1]).removeClass("food").addClass("snake"); foodArr = randomFood(); } else { var arr = [snake.arr[0][0] - 1, snake.arr[0][1]]; snake.arr.unshift(arr); $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).addClass("snake"); $("#tbody").children().eq(snake.arr[snake.arr.length - 1][0]).children().eq(snake.arr[snake.arr.length - 1][1]).removeClass("snake"); snake.arr.pop(); } //向下移動時 } else if(snake.direction == "bottom") { if($("#tbody").children().eq(snake.arr[0][0]).next().children().eq(snake.arr[0][1]).hasClass("border") || $("#tbody").children().eq(snake.arr[0][0]).next().children().eq(snake.arr[0][1]).hasClass("snake")) { window.clearInterval(timer); alert("嘻嘻，你死了喲，真是菜"); } else if ($("#tbody").children().eq(snake.arr[0][0]).next().children().eq(snake.arr[0][1]).hasClass("food")) { snake.arr.unshift(foodArr); console.log(snake.arr); $("tbody").children().eq(foodArr[0]).children().eq(foodArr[1]).removeClass("food").addClass("snake"); foodArr = randomFood(); } else { var arr = [snake.arr[0][0] + 1, snake.arr[0][1]]; snake.arr.unshift(arr); $("#tbody").children().eq(snake.arr[0][0]).children().eq(snake.arr[0][1]).addClass("snake"); $("#tbody").children().eq(snake.arr[snake.arr.length - 1][0]).children().eq(snake.arr[snake.arr.length - 1][1]).removeClass("snake"); snake.arr.pop(); } } },100); //通過鍵盤上下左右來下達指令 $(document).on("keydown",function() { if (event.keyCode == 37) { if (snake.direction == "left" || snake.direction == "right") { return; }else { snake.direction = "left"; } }else if (event.keyCode == 38) { if (snake.direction == "top" || snake.direction == "bottom") { return; }else { snake.direction = "top"; } }else if (event.keyCode == 39) { if (snake.direction == "left" || snake.direction == "right") { return; }else { snake.direction = "right"; } }else if (event.keyCode == 40) { if (snake.direction == "top" || snake.direction == "buttom") { return; }else { snake.direction = "bottom"; } } }) //用隨機數來生成食物 要求在邊框內 通過while迴圈來排除食物出現在蛇身裡 function randomFood() { var x = Math.floor(Math.random()*20 + 1); var y = Math.floor(Math.random()*20 + 1); while(true) { if ($("#tbody").children().eq(x).children().eq(y).hasClass("snake")) { var x = Math.floor(Math.random()*20 + 1); var y = Math.floor(Math.random()*20 + 1); } else { $("#tbody").children().eq(x).children().eq(y).addClass("food"); var arr = []; arr.push(x); arr.push(y); return arr; } } } //初始化背景 注意邊框怎麼加！！！ function initTable(width,height) { for (var i = 1; i <= height + 2; i++) { var tr = $("<tr></tr>"); for (var j = 1; j <= width + 2; j++) { if (i == 1 || i == height + 2) { tr.append("<td class = 'border square'></td>"); } else { if (j == 1 || j == width + 2) { tr.append("<td class = 'border square'></td>") } else{ tr.append("<td class ='square '></td>") } } $("#tbody").append(tr); } } } </script> </body> </html>