今天突然想到可以改變背景色來實現動態效果
因爲之前用的C#.GUI 繪畫過貪喫蛇，所以就試做用js做 了一個
類似的東東，（最近也是在學js......）
好了，我們先來看看運行效果吧：
界面大概就這樣了，很難看，我知道 ，我審美都畸形的..呵呵呵 ，這不是關鍵
再看看js代碼：
<script src="../JS/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//*
//背景顏色 BackColor
//蛇的顏色 SnakeColor
//食物的顏色 FoodColor
var BackColor = "#CCF";
var SnakeColor="#000";
var FoodColor = "red";
var speed = 100;//移動速度
var Are_X = 40, Are_Y = 40;
var snake = new Array();
var pos_y = 1,pos_x = 7;//Snake的頭的位值 x=7,y=1
var snakelength = 5; //Snake的長
var ini_length=5;//蛇的初始長度'
var keynum = 39; //記錄當前的方向
var timer = null;
var food_Exit = false;//食物是否喫掉 喫掉爲false
var food_pos=null;//記錄食物產生的當前位置
$(document).ready(function () {
CreateGrid();
ini_snake();
Random_Food();
$("body").bind("keypress", function (event) {
if (timer == null) {
timer = setInterval("Snake()", speed);
}
var key = event.keyCode;
if (key == 0) {
key = event.which;
}
if (key >= 37 & key <= 40) {
//控制方向
if (Math.abs(key - keynum) == 1) {
keynum = key;
}
else {
if (keynum == 37 & key != 39)
keynum = key;
if (keynum == 40 & key != 38) {
keynum = key;
}
}
}
});
});
//用計時器移動snake
function Snake() {
switch (keynum) {
case 37:
Move_left();
paintsnake();
break;
case 38:
Move_up();
paintsnake();
break;
case 39:
Move_right();
paintsnake();
break;
case 40:
Move_down();
paintsnake();
break;
}
}
//初始化一條小蛇
function ini_snake() {
$("#mySnaketable tr td").css("background-color", BackColor);
for (var i = 0; i < snakelength; i++) {
var head = $("#mySnaketable tr td").get(pos_y * 40 + pos_x - i);
head.style.background = SnakeColor;
snake[i] = pos_y.toString() + "," + (pos_x - i).toString();
}
}
function paintsnake() {
$("#mySnaketable tr td").css("background-color", BackColor);
for (var i = 0; i < snakelength; i++) {
var y = parseInt(snake[i].split(',')[0]);
var x = parseInt(snake[i].split(',')[1]);
if (y >= 40 || x >= 40 || y < 0 || x < 0) {
alert("Game Over! 您得：" + (snakelength - ini_length).toString()+"分- -！");
Ini_Data();
break;
}
var tr = $("#mySnaketable tr");
tr[y + 1].cells[x].style.background = SnakeColor;
//畫出食物來
if (food_Exit == true) {
var y = parseInt(food_pos.split(',')[0]);
var x = parseInt(food_pos.split(',')[1]);
var tr = $("#mySnaketable tr");
tr[y + 1].cells[x].style.background =FoodColor;
}
}
}
//初始化數據
function Ini_Data() {
clearInterval(timer);
snake = new Array();
snakelength = 5; //Snake的長
keynum = 39; //記錄當前的方向
ini_snake();
Random_Food();
timer = null;
}
//改變蛇節點座標
function Init_AllDot() {
for (var i = snakelength - 1; i > 0; i--) {
snake[i] = snake[i - 1];
}
}
//向右移動
function Move_right() {
Init_AllDot();
var y = parseInt(snake[0].split(',')[0]);
var x = parseInt(snake[1].split(',')[1]);
snake[0] = y.toString() + "," + (x + 1).toString();
if (snake[0] == food_pos) {
snakelength += 1;
food_Exit = false;
//喫掉食物，產生下一個食物
food_pos = null;
Random_Food();
}
}
//向下移動
function Move_down() {
Init_AllDot();
var y = parseInt(snake[0].split(',')[0]);
var x = parseInt(snake[1].split(',')[1]);
snake[0] = (y + 1).toString() + "," + (x).toString();
if (snake[0] == food_pos) {
snakelength += 1;
food_Exit = false;
//喫掉食物，產生下一個食物
food_pos = null;
Random_Food();
}
}
//向上移動
function Move_up() {
Init_AllDot();
var y = parseInt(snake[0].split(',')[0]);
var x = parseInt(snake[1].split(',')[1]);
snake[0] = (y - 1).toString() + "," + (x).toString();
if (snake[0] == food_pos) {
snakelength += 1;
food_Exit = false;
//喫掉食物，產生下一個食物
food_pos = null;
Random_Food();
}
}
//向左移動
function Move_left() {
Init_AllDot();
var y = parseInt(snake[0].split(',')[0]);
var x = parseInt(snake[1].split(',')[1]);
snake[0] = (y).toString() + "," + (x - 1).toString();
if (snake[0] == food_pos) {
snakelength += 1;
food_Exit = false;
//喫掉食物，產生下一個食物
food_pos = null;
Random_Food();
}
}
//產生隨即食物
function Random_Food() {
while (true) {
var rx = Math.floor(Math.random() * (Are_X - 1) + 1);
var ry = Math.floor(Math.random() * (Are_Y - 1) + 1);
var pos = ry.toString() + "," + rx.toString();
if (!isUse(pos)) {
var tr = $("#mySnaketable tr");
tr[ry + 1].cells[rx].style.background = FoodColor;
food_pos = pos;
food_Exit = true;
break;
}
}
}
function isUse(pos) {
for (var i = 0; i < snake.length; i++) {
if (snake[i] == pos) {
return true;
}
}
return false;
}
function CreateGrid() {
$("body").append("<div id='mySnakediv' align='center' style='padding:50px;'></div>");
$("#mySnakediv").append("<table id='mySnaketable' cellpadding='1' cellspacing='1' border='5' style='border-collapse: collapse;border-color: Gray;border-style:ridge;'></table>");
// $("#mySnaketable").addClass("tb");
$("#mySnaketable").append("<tr><th colspan='40' align='center' style='background-color:Blue'>40*40的格子</th></tr>");
for (var i = 0; i < 40; i++) {
$("#mySnaketable").append("<tr id='" + i + "'></tr>");
for (var j = 0; j < 40; j++) {
$("#" + i.toString()).append("<td style='width: 10px;height: 10px;border-color:Silver;border-style:ridge;'></td>");
}
}
}
</script>自己還寫了一點點css,小小的控制一下樣式：
HTML代碼倒沒寫什麼
js中還是少了一樣，就是射自己跟自己相交致死，這個我沒弄，有興趣的朋友要可以去搞搞..