纯 JS 贪吃蛇 完整版

雨0_o辰 2011-05-30 03:09:54
以前在论坛发布过一个版本的 JS 贪吃蛇，当时没想到会上首页，随意发了一下，之前版本不在网站上了，特此发布一个完整的，保存后缀.html 的就可以看了，供大家休闲娱乐吧，谈不上什么技术，上班随意搞的，有 BUG ，网页兼容性也没搞，懒得搞了，编码大体思路就是，在一张坐标图中分别定义蛇身的头部尾部，两个函数控制头部尾部，变换背景色，出现移动的效果，就这些了，稍微动动脑子就可以写出来的。
今天我生日呵呵，还下雨了，祝自己生日快乐吧。。。





<!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>

<title>无标题页</title>

<style type="text/css">

.line

{

    width: 500px;

}

.c

{

    clear: both;

}

</style>

<script type="text/javascript" language="javascript">

//--------------------------------

//----制作者：   ║LZ↗雨辰║

//--制作时间：   2010年5月21日

//--制作用时：   8小时

//--------QQ：   349078113

//--------------------------------



var key = 39;     //键值 39右键 37左键 38上建 下键40

var trailId = ''; //记录头部ID

var tailId = '';  //记录尾部ID

var tailArray = new Array();      //ID 拆分的数组

var randomL = 20; //随机数 左ID

var randomR = 30; //随机数 右ID

var foodCount = 5;//食物数量

var count = 0;    //食物累计

var times = 200;  //行进速度

var timeSpace = 10;       //速度递增值 注意:值必须大于等于1



function $(id) {

    return document.getElementById(id);

}



function run() {     //程序入口

    d();    //程序主体

    r();

    $('txtTime').value = times;     //行进速度显示

}



function r() {       //食物随机函数

    var randomID = '';



    randomL = Math.floor(Math.random() * 52 + 1);

    randomR = Math.floor(Math.random() * 48 + 1);



    if (count < foodCount) {

randomID = randomL + '_' + randomR;



if ($(randomID).style.background == 'white' && $(randomID).title == '') {

    $(randomID).style.background = 'black';

    $(randomID).title = '0';

    count++;

}



    }

}



function d() {

    var left = 0;

    var right = 0;

    var up = 0;

    var down = 0;



    var oId = '';



    tailArray = tailId.split('_');  //0 为左边(-1 上 +1 下) 1 为右边(-1 左 +1 右)尾部ID拆分

    //alert(tailId);

    //------------------------------到此尾部开始



    left = Number(tailArray[1]) - 1;

    if (left >= 1) {  //左边预算

var id = tailArray[0] + '_' + left;



if ($(id).style.background != 'white' && $(id).title == '') {//0 食物 

    oId = id;

}

    }

    right = Number(tailArray[1]) + 1;

    if (right <= 50) {//右边预算

var id = tailArray[0] + '_' + right;



if ($(id).style.background != 'white' && $(id).title == '') {//0 食物 

    oId = id;

}

    }

    up = Number(tailArray[0]) - 1;

    if (up >= 1) {    //上边预算

var id = up + '_' + tailArray[1];



if ($(id).style.background != 'white' && $(id).title == '') {//0 食物 

    oId = id;

}

    }

    down = Number(tailArray[0]) + 1;

    if (down <= 55) {   //下边预算

var id = down + '_' + tailArray[1];



if ($(id).style.background != 'white' && $(id).title == '') {//0 食物 

    oId = id;

}

    }

    //alert(tailId);

    $(tailId).style.background = 'white'; //将先前尾部变色

    tailId = oId; //记录预算尾部ID



    //------------------------------到此尾部结束

    //------------------------------到此头部开始



    tailArray = trailId.split('_');  //0 为左边(-1 上 +1 下) 1 为右边(-1 左 +1 右)头部ID拆分



    if (key == 37) {//左

left = Number(tailArray[1]) - 1;

if (left >= 1) {  //左边预算

    var id = tailArray[0] + '_' + left;



    if ($(id).style.background == 'white' && $(id).title == '') {//0 食物 

$(id).style.background = 'black';

$(id).title = '';

trailId = id;

    } else if ($(id).style.background == 'black' && $(id).title == '0') {

var ids = tailArray[0] + '_' + (left - 1);

$(id).style.background = 'black';

$(id).title = '';

$(ids).style.background = 'black';

$(ids).title = '';

trailId = ids;

count--;

//times -= timeSpace;

times = times > timeSpace ? times - timeSpace : timeSpace;

    } else {

$('butNewStart').style.display = 'block';

alert('Game Over !');

times = 600000;

    }

} else {

    $('butNewStart').style.display = 'block';

    alert('Game Over !');

    times = 600000;

}

    } else if (key == 38) {//上

up = Number(tailArray[0]) - 1;

if (up >= 1) {    //上边预算

    var id = up + '_' + tailArray[1];



    if ($(id).style.background == 'white' && $(id).title == '') {//0 食物 

$(id).style.background = 'black';

$(id).title = '';

trailId = id;

    } else if ($(id).style.background == 'black' && $(id).title == '0') {

var ids = (up - 1) + '_' + tailArray[1];

$(id).style.background = 'black';

$(id).title = '';

$(ids).style.background = 'black';

$(ids).title = '';

trailId = ids;

count--;

//times -= timeSpace;

times = times > timeSpace ? times - timeSpace : timeSpace;

    } else {

$('butNewStart').style.display = 'block';

alert('Game Over !');

times = 600000;

    }

} else {

    $('butNewStart').style.display = 'block';

    alert('Game Over !');

    times = 600000;

}

    } else if (key == 39) {//右

right = Number(tailArray[1]) + 1;

if (right <= 50) {//右边预算

    var id = tailArray[0] + '_' + right;



    if ($(id).style.background == 'white' && $(id).title == '') {//0 食物 

$(id).style.background = 'black';

$(id).title = '';

trailId = id;

    } else if ($(id).style.background == 'black' && $(id).title == '0') {

var ids = tailArray[0] + '_' + (right + 1);

$(id).style.background = 'black';

$(id).title = '';

$(ids).style.background = 'black';

$(ids).title = '';

trailId = ids;

count--;

//times -= timeSpace;

times = times > timeSpace ? times - timeSpace : timeSpace;

    } else {

$('butNewStart').style.display = 'block';

alert('Game Over !');

times = 600000;

    }

} else {

    $('butNewStart').style.display = 'block';

    alert('Game Over !');

    times = 600000;

}

    } else if (key == 40) {//下

down = Number(tailArray[0]) + 1;

if (down <= 55) {   //下边预算

    var id = down + '_' + tailArray[1];



    if ($(id).style.background == 'white' && $(id).title == '') {//0 食物 

$(id).style.background = 'black';

$(id).title = '';

trailId = id;

    } else if ($(id).style.background == 'black' && $(id).title == '0') {

var ids = (down + 1) + '_' + tailArray[1];

$(id).style.background = 'black';

$(id).title = '';

$(ids).style.background = 'black';

$(ids).title = '';

trailId = ids;

count--;

//times -= timeSpace;

times = times > timeSpace ? times - timeSpace : timeSpace;

    } else {

$('butNewStart').style.display = 'block';

alert('Game Over !');

times = 600000;

    }

} else {

    $('butNewStart').style.display = 'block';

    alert('Game Over !');

    times = 600000;

}

    }

    //------------------------------到此头部结束



    setTimeout('run()', times);

}



//开始 初始位置

function Start(id1, id2, id3) {



    trailId = id3;

    tailId = id1;

    times = 200;

    key = 39;

    count = 0;



    $(id1).style.background = 'black';

    $(id2).style.background = 'black';

    $(id3).style.background = 'black';



    $('txtTime').value = times;

    $('butStart').disabled = 'false';



    run();

}



//重新开始

function newStart() {

    $('butNewStart').style.display = 'none';



    for (var i = 1; i <= 55; i++) {

for (var j = 1; j <= 50; j++) {

    $(i + '_' + j).style.background = 'white';

    $(i + '_' + j).title = '';

}

    }

    Start('1_1', '1_2', '1_3');

}



function jumpPage() {

    if (event.keyCode == 37) {//左

if (key != 39) {

    key = 37;

}

    }

    if (event.keyCode == 38) {//上

if (key != 40) {

    key = 38;

}

    }

    if (event.keyCode == 39) {//右

if (key != 37) {

    key = 39;

}

    }

    if (event.keyCode == 40) {//下

if (key != 38) {

    key = 40;

}

    }

}

document.onkeydown = jumpPage;



    </script>

<script type="text/javascript" language="javascript">

//构建地图

function InitMap() {

    var span;

    var divId;

    var cssLine = "line";

    var c = "";

    for (var i = 1; i <= 55; i++) {



span = document.createElement('div');

divId = "div" + i;

span.setAttribute('id', divId);

span.setAttribute('class', cssLine);



for (var j = 1; j <= 50; j++) {



    c += "<div id='" + i + "_" + j + "' style='height: 10px; width: 10px; background: white; float: left; font-size: 0;'></div>";



}

c += "<div class='c'></div>";

span.innerHTML = c;

document.getElementById('divMap').appendChild(span);

c = "";

    }

}

    </script>

</head>

<body>

<div style="width: 700px; margin: 0 auto;">

<div id="divMap" style="width: 501px; border: 1px silver solid; float: left;">

</div>

<div style="float: left; width: 194px;">

<input id="butStart" type="button" value="开始游戏" onclick="Start('1_1','1_2','1_3');" />

<input id="butNewStart" type="button" value="重新开始" style="display: none;" onclick="newStart();" />

<br />

<br />

行进速度：<input id="txtTime" name="txtTime" type="text" style="color: Red;" />

<br />

<br />

</div>

<div style="float: left; width: 194px;">

贪吃蛇>>>游戏说明：

</div>

<br />

<br />

<div style="float: left; width: 194px; font-size: 13px;">

1."行进速度"为递减 值越小越快。<br />

2.操作方式为键盘 上 (↑) 下 (↓) 左 (←) 右 (→) 控制方向。<br />

3.游戏提示"Game Over !"如果想继续挑战，<label style="color: Red;">点击"重新开始"游戏。</label><br />

<label style="color: Red;">

4.目前此游戏版本只支持 IE 浏览器。</label><br />

</div>

<div style="clear: both;">

</div>

</div>

<script type="text/javascript" language="javascript">InitMap();</script>

</body>

</html>
...全文
451 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
mengnanleo 2011-06-03
  • 打赏
  • 举报
 回复
一直不知道JS做的贪吃蛇是怎么实现的，网上的原理讲得我云里雾里

呵呵，楼主的方法很适合我这种小白呀，昨天在楼主的基础上写了个完全兼容的，去了几个小BUG

http://topic.csdn.net/u/20110602/18/f0e5339b-e3df-4007-a152-c2fc10ef4018.html

欢迎楼主多多更新，我好学习学习~~
北门清燕 2011-06-03
  • 打赏
  • 举报
 回复
好强大 这都可以啊 哎 自叹不如啊
freemangod 2011-06-03
  • 打赏
  • 举报
 回复
当蛇成直角向上运动时，尾巴是如何判断该转弯了呢？
楼主很强大。
clarck_913 2011-06-03
  • 打赏
  • 举报
 回复
现在发现，不是由于吃方块造成的死掉

而是因为按键盘太快，造成了蛇不动了
clarck_913 2011-06-03
  • 打赏
  • 举报
 回复
可以确定

出现一个方块后

让蛇在方块下面一行 从右向左走，走过方块所在的位置，然后快速按上、左

在蛇吃掉方块之后，就不动了
clarck_913 2011-06-03
  • 打赏
  • 举报
 回复
Chrome下有BUG

吃几个之后，蛇分成了两半，就不动了
henrycomein 2011-06-03
  • 打赏
  • 举报
 回复
强大，接分。。
mumubangditu 2011-05-31
  • 打赏
  • 举报
 回复
神马东东？真牛
KeepMoving 2011-05-31
  • 打赏
  • 举报
 回复
不错！挺强的！
失去乐山贼 2011-05-31
  • 打赏
  • 举报
 回复
学习，祝LZ生日快乐。
仲少_帆 2011-05-31
  • 打赏
  • 举报
 回复
可以啊！！！lz不错哦、、、、我就是想写一些这个小游戏！但有不知从何下手。。
lz能否指教小弟一二啊。。
。。。。。。。。。。。。。。。。
ted 2011-05-31
  • 打赏
  • 举报
 回复
楼主生日快乐，谢谢分享~
henrycomein 2011-05-31
  • 打赏
  • 举报
 回复
祝贺祝贺，谢谢分享
曹西 2011-05-31
  • 打赏
  • 举报
 回复
传说中的NB
乌鸦不会飞 2011-05-31
  • 打赏
  • 举报
 回复
祝LZ生日快乐。。
代码取走了。
谢谢啊。。
llyy112233 2011-05-30
  • 打赏
  • 举报
 回复
祝楼主生日快乐！
阳明 to life 2011-05-30
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 slowhand 的回复:]
祝楼主生日快乐！
[/Quote]
++
mark 学习
MarkZar 2011-05-30
  • 打赏
  • 举报
 回复
又见牛人
showenxxx 2011-05-30
  • 打赏
  • 举报
 回复
恩 nb！
linxisheng 2011-05-30
  • 打赏
  • 举报
 回复
生日快乐！
加载更多回复（6）
javascript贪吃蛇完整版(源码)
主要是对javascript贪吃蛇完整版(源码)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
javascript版贪吃蛇
javascript版贪吃蛇 注释完整！
jquery网页版贪吃蛇
学习jQuery后，编写一个简单的贪吃蛇小游戏。注释完整，代码结构清晰。
Java版贪吃蛇毕业论文完整版(附带源码地址).doc
Java版贪吃蛇毕业论文完整版(附带源码地址).doc
网页版贪吃蛇游戏.rar
本资源为一套精心制作的网页版贪吃蛇游戏的源代码，采用HTML、CSS和JavaScript进行开发。该源码设计简洁，功能完善，能够在浏览器中直接运行，为玩家带来经典且富有挑战性的贪吃蛇游戏体验。 技术栈说明： HTML：构建游戏的基本框架，包括游戏界面、菜单、得分板等元素。 CSS：负责游戏的样式设计，美化游戏界面，调整游戏元素的布局和颜色，提升游戏的视觉吸引力。 JavaScript：实现游戏的核心逻辑，包括控制贪吃蛇的移动、食物的生成、碰撞检测、得分计算等功能，确保游戏的流畅运行和可玩性。 源码特点： 经典玩法：完美还原贪吃蛇的经典玩法，让玩家重温童年回忆。 易于上手：简洁直观的操作方式，玩家只需使用键盘W、A、S、D键即可控制贪吃蛇的移动。 高度可定制：源码结构清晰，方便开发者根据需求进行扩展和修改，增加新的功能或调整游戏难度。 使用方法： 解压“网页版贪吃蛇源码.rar”文件，获取完整的源代码文件夹。 将源代码文件夹放置在你的网站根目录下，确保HTML、CSS和JS文件能够正确引用。 通过浏览器访问放置源码的网页地址，即可开始体验网页版贪吃蛇游戏。
JavaScript

87,902

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章