`
zhouxianglh
  • 浏览: 267562 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript 写的一个贪吃蛇

JavaScript游戏CC++C# 
阅读更多

这几天闲来无事写的。

 

算是总结了一下这段时间以来学到的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 zhouxianglh  2010.06.08
var 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)[0]) {
			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 ++;//尾部标号+1
		if ($("#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;
		}
	}
}
分享到：
| jQuery 表格排序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript写的贪吃蛇游戏

    用JavaScript写的贪吃蛇游戏，键盘方向键控制方向，“+”键加速，"-"键减速。

    用javascript写的贪吃蛇

    贪食蛇 贪吃蛇 基础 很有意思

    原生JavaScript贪吃蛇小项目

    使用原生JavaScript 写一个贪吃蛇小项目，帮你快速学习JavaScript相关的碰撞检测方法。

    javascript开发贪吃蛇游戏

    将上述逻辑整合到一起，一个完整的JavaScript贪吃蛇游戏大致如下： ```javascript // 初始化 // ... document.addEventListener('keydown', (event) =&gt; { // ... }); function gameLoop() { // ... ...

    小游戏JavaScript面向对象编程贪吃蛇

    蛇可以通过继承一个基础的移动对象来实现，这个移动对象可以有一个`move()`方法，用于更新蛇的位置。同时，蛇还需要一个`grow()`方法，用于在吃掉食物后增加蛇的身体部分。 2. **Food** 对象：表示随机生成的食物，...

    JavaScript写贪吃蛇功能

    用纯JavaScript语言编写的贪吃蛇功能，同时还具有自动运行的观摩功能

    用JavaScript写的贪吃蛇游戏

    总结，JavaScript实现的贪吃蛇游戏是一个很好的学习项目，它涵盖了事件处理、数据结构、算法以及基本的动画制作。通过这样的实践，开发者可以深入理解JavaScript的运行机制，并提升编程能力。无论你是初学者还是有...

    javascript基于jQuery贪吃蛇

    javascript基于jquery写的贪吃蛇 没写死亡的那部分 仅供新手学习 操作方向键上下左右

    javascript 写的贪吃蛇游戏

    javascript 写的贪吃蛇游戏，内包括一个HTML DOM操作的小工具和贪吃蛇游戏的代码，注释很详细

    用javascript编写的贪吃蛇小游戏

    本文将详细介绍如何用JavaScript编写一个基本的贪吃蛇游戏。 首先，我们要理解游戏的基本逻辑。贪吃蛇游戏的核心是蛇的移动、食物的生成以及碰撞检测。蛇由一系列坐标点组成，每次移动时，蛇头会向一个方向移动一格...

    javascript贪吃蛇(源码)

    总的来说，JavaScript贪吃蛇游戏是一个很好的实践项目，它涵盖了JavaScript的基础语法、对象操作、事件处理以及基本的游戏逻辑。通过学习和理解这个游戏，你不仅能提高JavaScript编程技能，还能培养逻辑思维能力和...

    原生javascript写的贪吃蛇小游戏

    原生javascript写的贪吃蛇小游戏

    javascript贪吃蛇网页小游戏

    JavaScript贪吃蛇是一款基于网页的经典小游戏，利用JavaScript、jQuery等技术实现。JavaScript是浏览器端的主要脚本语言，负责处理游戏的逻辑和用户交互，而jQuery则简化了DOM操作和事件处理，让代码更加简洁易懂。 ...

    JavaScript贪吃蛇小游戏.zip

    JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...

    javascript期末项目-贪吃蛇.zip

    【标题】"javascript期末项目-贪吃蛇.zip"是一个基于JavaScript技术实现的期末项目，它构建了一个经典的小游戏——贪吃蛇。这个项目展示了开发者在JavaScript编程上的技能和对游戏逻辑的理解。 【描述】提到的“蛇...

    JavaScript写的贪吃蛇

    今天又无事可做了，突发奇想用原生JS写了个网页贪吃蛇，先把原始代码贴过来，有兴趣的童鞋可以把下面的代码保存成JS文件，自己引进网页试一下，有什么bug可以留言。

    基于JavaScript的贪吃蛇源码

    分享一个基于JavaScript的贪吃蛇游戏源码，纯手写，如果对我的代码有更好的建议，可以给我留言。

    javascript简易贪吃蛇

    - **数据结构**：蛇的身体由一系列坐标点组成，通常存储在一个数组中。食物位置也是一个坐标点。 3. **键盘控制** - **事件监听器**：使用`addEventListener`方法监听键盘事件，当用户按下方向键时，改变蛇的移动...

Magicbox
Global site tag (gtag.js) - Google Analytics