今天突然想到可以改变背景色来实现动态效果
因为之前用的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中还是少了一样,就是射自己跟自己相交致死,这个我没弄,有兴趣的朋友要可以去搞搞..