JavaScript 写的一个贪吃蛇
这几天闲来无事写的。算是总结了一下这段时间以来学到的jQuery 和 JavaScript .偏向地用到了JavaScript 自定义对象.JavaScript 的"基于对象"到底是个什么东西?一直没搞明白.
HTML 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>蛇</title><script type="text/javascript" src="js/jquery-1.4.1.js"></script><script type="text/javascript" src="js/snake.js"></script><link href="css/snake.css" rel="stylesheet" type="text/css" /></head><body><div id="panel"></div><a id="info" href="http://zhouxianglh.iteye.com/"></a></body></html> CSS 代码:
@CHARSET "UTF-8";.snack {background-color: #3C0;}.floor {background-color: #999;}.food {background-color: #FC0;}a:link,a:hover,a:visited{color: #F0F;text-decoration: none;} JavaScript 代码:
//贪吃蛇 isw2 zhouxianglh2010.06.08var gamePanel = null;var gameDriver = null;var runPath = 1;//1左,2右,3上,4下指令方向var snackrunPath = runPath;//蛇跑的方向//开始游戏$(document).ready(function(){gameStart();});//游戏开始function gameStart(){gamePanel =new panelSnack();gamePanel.init();gameDriver = setInterval("gameRun();", gamePanel.time);}//游戏运行一次function gameRun() {gamePanel.snakeObj.run();}//游戏结束function gameStop(){clearTimeout(gameDriver);//结束定时器}//蛇的键盘控制function keyControl(keyCode) {if (keyCode == 39 && snackrunPath != 2) {//左runPath = 1;} else if (keyCode == 37 && snackrunPath != 1) {//右runPath = 2;} else if (keyCode == 38 && snackrunPath != 4) {//上runPath = 3;} else if (keyCode == 40 && snackrunPath != 3) {//下runPath = 4;}}//面板function panelSnack(){this.rowNum = 20;//行this.conNum = 20;//列this.cellSize = 20;//大小this.snakeObj = null;//蛇this.time= 300;//定时器this.totalFood=0;//显示的食物数量//判断物体this.is = function(testX, testY) {var id="c" + testX + "_" + testY;if (null == $("#"+id)) {return "null";//撞墙} else if ($("#"+id).attr("class") == "floor") {return "normal";//正常} else if ($("#"+id).attr("class")== "snack") {return "body";//自己} else if ($("#"+id).attr("class") == "food") {return "food";//食物}};//随机食物this.createFood = function () {var randomX;var randomY;{randomX = Math.floor(Math.random() * this.conNum);randomY = Math.floor(Math.random() * this.rowNum);}while($("#c" + randomX + "_" + randomY).attr("class")=="floor")//随机食物$("#c" + randomX + "_" + randomY).attr("class","food");this.totalFood ++;//食物数量$("#info").text("吃第"+(this.totalFood-1)+"块肉了!");};//初始化this.init = function(){var pWidth = this.conNum * this.cellSize;var pHeight = this.rowNum * this.cellSize;var pTop = ($(document).height() - pHeight) / 2;var pLeft = ($(document).width() - pWidth) / 2;$("#panel").html("");//清空panel Div//设置panel Div样式$("#panel").css({left:pLeft + "px", top:pTop + "px", width:pWidth + "px", height:pHeight + "px", position:"fixed"});//设置单元格for (var r = 0; r < this.rowNum; r++) {for (var c = 0; c < this.conNum; c++) {var cellStyle = "style=\"left: " + c * this.cellSize + "px; top: " + r * this.cellSize + "px; width: " + this.cellSize + "px; height: " + this.cellSize + "px; position: absolute;\"";var cellClass = " class='floor'";var cellId = "id=\"c" + c + "_" + r + "\"";var cellHtml = "<div "+ cellId + cellStyle + cellClass + "></div>";$("#panel").append(cellHtml);}}this.snakeObj = new snake(0,0,2,0,this);//初始化蛇this.snakeObj.init();//初始化蛇}}//蛇function snake(snakeTailX, snakeTailY, snakeHeadX, snakeHeadY,panelSnack) {this.headTitle = snakeHeadX;//头标号this.tailTitle = snakeTailX;//尾标号//初始化蛇this.init = function(){//初始化蛇for(var i = snakeTailX;i <= snakeHeadX;i ++){$("#c" + i + "_" + snakeTailY).attr("class","snack");$("#c" + i + "_" + snakeTailY).attr("title",parseInt(i));}//添加食物panelSnack.createFood();//添加事件$(document).ready(function () {//键盘事件$(document).keydown(function(event){keyControl(event.keyCode)});})}//蛇运行this.run = function () {snackrunPath = runPath;//设置蛇跑的方向if (snackrunPath == 1) {snakeHeadX += 1;} else if (snackrunPath == 2) {snakeHeadX -= 1;} else if (snackrunPath == 3) {snakeHeadY -= 1;} else if (snackrunPath == 4) {snakeHeadY += 1;}var result = panelSnack.is(snakeHeadX,snakeHeadY);if (result == "normal") {this.tailForward();//尾部向前this.headForward();//头部向前移动} else if (result == "food") {this.headForward();//头部向前移动//添加食物panelSnack.createFood();} else if (result == "body") {gameStop();alert("吃到自己了哈!F5刷新重来.");} else if (result == "null") {gameStop();alert("小青它撞死了!F5刷新重来.");}};//头部向前移动this.headForward = function(){$("#c" + snakeHeadX + "_" + snakeHeadY).attr("class","snack");$("#c" + snakeHeadX + "_" + snakeHeadY).attr("title",parseInt(++this.headTitle));}//尾部向前移动this.tailForward = function (){$("#c" + snakeTailX + "_" + snakeTailY).attr("class","floor");//尾巴切掉this.tailTitle ++;//尾部标号+1if ($("#c" + (snakeTailX + 1) + "_" + snakeTailY).attr("title") == this.tailTitle) {snakeTailX += 1;}else if ($("#c" + (snakeTailX - 1) + "_" + snakeTailY).attr("title") == this.tailTitle) {snakeTailX -= 1;}else if ($("#c" + snakeTailX + "_" + (snakeTailY - 1)).attr("title") == this.tailTitle) {snakeTailY -= 1;}else if ($("#c" + snakeTailX + "_" + (snakeTailY + 1)).attr("title") == this.tailTitle) {snakeTailY += 1;}}}
页:
[1]