sailqi
- 浏览: 21205 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
1、游戏说明
1) 用户可自定义贪食蛇行走速度（数字越大速度越快）及阻挡物个数（随机生成）。
2) 按“回车键”或“开始游戏”按钮开始游戏。
3) 按“方向键”控制贪食蛇行走方向。
4) 按“空格”或“开始/暂停游戏”按钮开始/暂停游戏。
2、效果图
3、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>
<link href="css/snake.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/snake.js"></script>
</head>
<body>
<div class="operate">
<div id="start">
贪食蛇速度：
<select id="speed" style="width:100px;">
<option value="10" >1</option>
<option value="8" >2</option>
<option value="6" selected="selected" >3</option>
<option value="4" >4</option>
<option value="2" >5</option>
</select>
<br /><br />
阻挡物个数：<input type="text" value="5" id="wall" style="width:100px;" />
<br /><br />
<input type="button" onclick="startGame();" value="开始游戏" />
</div>
<div id="restart" style="display:none;">
<input type="button" id="pause" onclick="pauseGame();" value="暂停游戏" />
<input type="button" onclick="restartGame();" value="重新开始" />
</div>
<div id="result"></div>
<div class="tip">
<hr />
<ul>
<li><div class="tip_color" style="background:red;"></div><span class="tip_font">蛇头</span></li>
<li><div class="tip_color" style="background:green;"></div><span class="tip_font">蛇体</span></li>
<li><div class="tip_color" style="background:#660000;"></div><span class="tip_font">食物</span></li>
<li><div class="tip_color" style="background:#6699FF;"></div><span class="tip_font">阻挡物</span></li>
<br /><br />
<li><span class="tip_short"><b>游戏操作说明：</b></span></li>
<li><span class="tip_short">1.用户可自定义贪食蛇行走速度（数字越大速度越快）及阻挡物个数（随机生成）。</span></li>
<li><span class="tip_short">2.按“回车键”或“开始游戏”按钮开始游戏。</span></li>
<li><span class="tip_short">3.按“方向键”控制贪食蛇行走方向。</span></li>
<li><span class="tip_short">4.按“空格”或“开始/暂停游戏”按钮开始/暂停游戏。</span></li>
</ul>
</div>
</div>
</body>
</html>
4、js
// 游戏名称：贪食蛇
// 作者：Sailqi
// 版本：1.0
// 日期：2011-09-22
var ground_rows = 60;//场地行数
var ground_columns = 60;//场地列数
var ground_width = 600;//场地宽度
var ground_height = 600;//场地高度
var x_step = ground_width / ground_columns;
var y_step = ground_height / ground_rows;
var points = new Array();//各点坐标数组
var snake = new Array();//贪食蛇各点数据
var refreshTimer = 200;//贪食蛇速度
var snakeHeadColor = "red";//蛇头颜色
var snakeColor = "green";//贪食蛇颜色
var foodColor = "#660000";//食物颜色
var wallColor = "#6699FF";//墙壁颜色
var groundObj;//场地JQuery对象
//行走方向 1左 2上 3右 4下
var direction = 3;
var pre_direction = direction;
var isStart = false;
var isPause = false;
//方块信息对象
function point(row, column, id, type){
this.row = row;
this.column = column;
this.id = id;
this.type = type;//1空方块，2墙，3蛇体，4食物
}
$(document).ready(function(){
document.onkeydown = keydown;
init();
});
//开始游戏
function startGame(){
//生成食物
groundObj.append(createRandomBlock(4));
//生成初始化贪食蛇
var snakeP;
snakeP = points[1][1];
snakeP.type = 3;
snake.push(snakeP);
groundObj.append(createBlock(snakeP));
//速度
refreshTimer = parseInt($("#speed").val()) * 50;
//阻挡物
var wallNum = parseInt($("#wall").val());
for(k = 0; k < wallNum; k++){
groundObj.append(createRandomBlock(2));
}
isStart = true;
$("#start").hide();
$("#restart").show();
timer();
}
//重新开始
function restartGame(){
location.reload();
}
//暂停/继续游戏
function pauseGame(){
isPause = !isPause;
if(isPause){
$("#pause").val("继续游戏");
} else{
$("#pause").val("暂停游戏");
}
}
//初始化数据、界面
function init(){
$("body").append('<div id="ground" style="width:' + ground_width + 'px;height:' + ground_height + 'px;"></div>');
groundObj = $("#ground");
//场地各点坐标
var max_x = ground_columns + 1;
var max_y = ground_rows + 1;
for(i = 0; i <= max_x; i++){
points[i] = new Array();
for(j = 0; j <= max_y; j++){
if( i == 0 || i == max_x || j == 0 || j == max_y){//四周围墙
points[i][j] = new point(i, j, "point" + i + "_" + j, 2);
groundObj.append(createBlock(points[i][j]));
} else{
points[i][j] = new point(i, j, "point" + i + "_" + j, 1);
}
}
}
}
//创建实际方块
//p 方块信息
function createBlock(p){
var blockColor = "";
if(p.type == 2){//墙壁
blockColor = wallColor;
} else if(p.type == 3){//蛇体
blockColor = snakeColor;
} else if(p.type == 4){//食物
blockColor = foodColor;
}
var left = x_step * (p.column - 1);
var top = y_step * (p.row - 1);
var blockHtml = '<div id="' + p.id
+ '" style="width:' + x_step + 'px;'
+ 'height:' + y_step + 'px;'
+ 'background:' + blockColor + ';'
+ 'left:' + left + 'px;'
+ 'top:' + top + 'px;'
+ '"></div>';
return blockHtml;
}
//随机生成方块
function createRandomBlock(type){
var i = Math.floor(Math.random() * ground_columns + 1);
var j = Math.floor(Math.random() * ground_rows + 1);
var pt = points[i][j];
//判断该位置是否已被占用
if(pt.type != 1)
return createRandomBlock(type);
pt.type = type;
return createBlock(pt);
}
//获取前进方向方块信息
function getBlock(){
var current = snake[snake.length-1];
var next;
var row = 0, column = 0;
switch(direction){
case 1://左
row = current.row;
column = current.column - 1;
break;
case 2://上
row = current.row - 1;
column = current.column;
break;
case 3://右
row = current.row;
column = current.column + 1;
break;
case 4://下
row = current.row + 1;
column = current.column;
break;
default:
return;
}
next = points[row][column];
return next;
}
//蛇头颜色替换
function changeColor(){
var snakeLength = snake.length;
if(snakeLength > 1){
$("#" + snake[snake.length-2].id).get(0).style.background = snakeColor;
}
$("#" + snake[snake.length-1].id).get(0).style.background = snakeHeadColor;
}
//刷新贪食蛇长度、位置
function refreshSnake(next){
switch(next.type){
//前面是空方块
case 1:
//移除尾部方块
var tail = snake.shift();
tail.type = 1;
$("#" + tail.id).remove();
//新增头部方块
next.type = 3;
snake.push(next);
groundObj.append(createBlock( next));
changeColor();
break;
//前面是墙
case 2:
isStart = false;
break;
//前面是蛇本身
case 3:
if(Math.abs(direction - pre_direction) == 2){
direction = pre_direction;
break;
}
isStart = false;
break;
//前面是食物
case 4:
//移除食物方块
$("#" + next.id).remove();
//新增头部方块
next.type = 3;
snake.push(next);
groundObj.append(createBlock(next));
//重新生成食物
groundObj.append(createRandomBlock(4));
changeColor();
break;
}
}
function showResult(){
var score = snake.length;
var result = "游戏结束！<br />您的成绩为：" + snake.length + "分。<br />";
if(score < 6) result +="等级：差";
else if(score >= 6 && score < 15) result += "等级：及格";
else if(score >= 15 && score < 30) result += "等级：良好";
else if(score >= 30 && score < 40) result += "等级：优秀";
else if(score >= 40 && score < 50) result += "等级：牛人";
else if(score >= 50 && score < 60) result += "等级：神人";
else if(score >=60 && score < 70) result += "等级：立地成佛";
else if(score >=70) result += "等级：无人能及";
$("#result").html(result);
}
//定时器
function timer(){
if(!isPause){
if(isStart){
refreshSnake(getBlock());
} else{
showResult();
return;
}
}
setTimeout("timer();", refreshTimer);
}
//监听键盘（方向键）
function keydown(evt)
{
var evt = evt || event;
var currKey = evt.keyCode || evt.which || evt.charCode;
if(currKey == 13 || currKey == 32 || (currKey > 36 && currKey < 41))
{
pre_direction = direction;
switch(currKey)
{
//回车键
case 13:
if(!isStart){
startGame();
}
break;
//空格键
case 32:
isPause = !isPause;
break;
//左方向键
case 37:
direction = 1;
break;
//上方向键
case 38:
direction = 2;
break;
//右方向键
case 39:
direction = 3;
break;
//下方向键
case 40:
direction = 4;
break;
//其它
default:
break;
};
}
}
5、css
@charset "utf-8";
/* CSS Document */
div{
position: absolute;
}
/*场地*/
#ground{
margin-left: 200px;
margin-top: 50px;
}
.operate{
width: 300px;
height: 600px;
margin-left: 900px;
margin-top: 40px;
border: 1px solid #6699FF;
padding: 10px 10px 10px 10px;
}
/*用户自定义、控制面板*/
#start, #restart{
margin-top:20px;
margin-left: 20px;
}
/*结果显示*/
#result{
margin-top:100px;
color: #FF0000;
font-size: 20px;
font-weight: bold;
text-align: center;
width:280px;
height: 100px;
}
/*游戏说明*/
.tip{
margin-top:200px;
}
.tip ul, .til ul li{
list-style: none;
margin-top: 30px;
padding-left: 20px;
width:280px;
}
/*方块*/
.tip_color{
width:15px;
height:15px;
}
/*方块颜色说明*/
.tip_font{
width:50px;
margin-left: 30px;
overflow: scroll;
}
/*快捷键*/
.tip_short{
height:20px;
line-height: 23px;
}
/*水平线*/
hr{
color: #6699FF;
}
6、源代码已打包，见附件Snake.zip。
分享到：
发表评论
相关推荐
贪食蛇游戏通常使用主循环（main loop）来实现。这个循环不断地检测用户输入、更新游戏状态、绘制屏幕，直到游戏结束。一个简单的游戏循环可能如下所示： ```javascript function gameLoop() { // 检测用户输入 /...
【标题】"JS版贪食蛇"所涉及的知识点主要集中在JavaScript编程语言上，这是一个经典的使用JavaScript实现的网页游戏。JavaScript是一种广泛应用于Web开发的脚本语言，它主要用于客户端的网页交互，使得网页具有动态...
在本项目中，我们主要探讨如何使用JavaScript语言来制作一款经典的贪食蛇游戏。JavaScript是一种广泛应用于网页开发的脚本语言，它允许开发者在浏览器端动态地修改网页内容，实现丰富的交互效果。在这个项目中，我们...
《贪食蛇游戏的JavaScript实现详解》 贪食蛇，这款经典的像素级游戏，自诞生以来就深受广大玩家喜爱。本文将深入解析一个基于JavaScript实现的贪食蛇游戏，通过分析压缩包中的四个文件——my.css、说明.htm、my....
总结来说，"html5魅族首页贪食蛇游戏特效"是一个结合了HTML5 Canvas、JavaScript和CSS3的实例，展示了如何使用这些技术创建一个互动性强、视觉效果好的网页游戏。开发者可以从中学到HTML5的核心特性和实际应用，对于...
《JS实现贪食蛇游戏详解》 贪食蛇游戏，作为一个经典的休闲娱乐游戏，自诞生以来就深受玩家喜爱。在现代网页技术日益发达的今天，使用JavaScript（JS）编写贪食蛇游戏，不仅可以锻炼编程技能，还能让我们更好地理解...
该游戏是通过原生js和jquery来实现的，贪食蛇和背景是table标签来实现的，食物为背景图片，蛇头随方向改变而改变；无需下载依赖，下载解压即可运行。 能学到什么： jquery的一些方法以及原生js的部分基础使用等。 ...
JavaScript与Html5 Canvas结合，使得贪食蛇游戏具有了实时响应和交互性。 文件列表中的"贪食蛇"可能代表的就是包含游戏界面和JavaScript代码的Html文件，这个文件通过引用JavaScript脚本来实现游戏功能。在浏览器中...
先不多说先上图 下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用...贪食蛇</title> <style> .map { width: 800px; height: 600px; background-color: #ccc;
本项目以"简单创意的html5贪食蛇小游戏代码"为主题，将介绍如何使用HTML5、CSS3和JavaScript来构建一个在线版本的贪食蛇游戏。 首先，我们需要理解HTML5中的Canvas元素。Canvas是HTML5中用于绘制图形的一个二维绘图...
在这个“简易贪食蛇游戏”中，我们主要关注的是游戏的基本结构和实现方式。 首先，我们要了解贪食蛇游戏的基本原理。游戏的核心是一个二维网格，蛇在其中移动，吃食物并增长。当蛇头碰到自己的身体或游戏边界时，...
**JS版贪食蛇**是一种基于JavaScript编程语言和jQuery库实现的经典游戏——贪食蛇。在网页环境中，这种实现方式让玩家可以在浏览器上直接玩到这个熟悉的小游戏。以下将详细解析JS版贪食蛇的实现原理和相关知识点。 ...
在这个项目中，我们将探讨如何使用HTML、CSS以及JavaScript这三个核心的Web技术来实现一个跨平台的贪食蛇游戏。 首先，我们需要理解HTML（HyperText Markup Language）的作用。HTML是网页的基础结构，用于定义页面...
【标题】中的“网页模板——用JS编写的贪食蛇游戏 代码分享”表明这是一个使用JavaScript编程语言实现的贪食蛇游戏的源代码分享。贪食蛇游戏是一种经典的像素级游戏，玩家通过控制蛇的移动来吃食物，每次吃食物后蛇...
通过以上步骤，我们可以创建一个完整的网页版贪食蛇游戏。这个过程将涵盖JavaScript的基础编程技巧，以及实际项目开发中的许多重要概念。在实践中，你还可以探索更高级的主题，如游戏物理引擎、AI算法或网络多人对战...
【标题】"基于html5实现的魅族首页贪食蛇游戏特效源码.zip"揭示了这个压缩包包含的是一款使用HTML5技术制作的魅族首页上的贪食蛇游戏的源代码。HTML5是现代网页开发的基石，它引入了许多新特性，如Canvas画布、Web ...
4. **方向和坐标系统**：贪食蛇游戏使用坐标系统来定位蛇的位置，四个基本方向（上、下、左、右）控制蛇的移动。 5. **碰撞检测**：游戏需要检测蛇是否碰到边界或者自己的身体，这通常通过比较蛇的各个部分与边界或...