纯 JS 贪吃蛇完整版

以前在论坛发布过一个版本的 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;       //速度递增值注意:值必须大于等于1function $(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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

CSDN 字符限制，代码排版空格去掉了，大家另存排版吧呵呵
可以啊！！！lz不错哦、、、、我就是想写一些这个小游戏！但有不知从何下手。。
                  lz能否指教小弟一二啊。。
                           。
一直不知道JS做的贪吃蛇是怎么实现的，网上的原理讲得我云里雾里呵呵，楼主的方法很适合我这种小白呀，昨天在楼主的基础上写了个完全兼容的，去了几个小BUGhttp://topic.csdn.net/u/20110602/18/f0e5339b-e3df-4007-a152-c2fc10ef4018.html欢迎楼主多多更新，我好学习学习~~
Chrome下有BUG吃几个之后，蛇分成了两半，就不动了

纯 JS 贪吃蛇 完整版

解决方案 »

纯 JS 贪吃蛇完整版