用Table做了个"贪吃蛇"，有兴趣的来看看

harryCom 2005-03-23 06:49:10
<body></body>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
-- Author: Harry
-- Date : 03/23/2005
-- Function: 游戏"贪吃蛇"
-- Email: harrychen66@126.com
-- Remark: 由cell的status1和status2属性来决定哪些单元格是蛇,哪些是食物
*/
var r = 20; // 表格的行数
var c = 20; // 表格的列数
// r和c值越大初始化的时间会越长
var cWidth = 5; // 单元格的宽度
var arr = new Array(); // 用来放蛇的数组
var initLen = 5; // 蛇的初始长度
var left = 37, up = 38, right = 39, down = 40;
var tb = null; // 蛇爬动的table
var cellList = null;
var forward = right; // 蛇爬动的方向
var foodInterval = 1000; // 出现食物的时间间隔
var snakeColor = "#333333"; // 蛇的颜色
var foodColor = "#ff0000"; // 食物的颜色
var speed = 150; // 蛇每爬一个单元格所需要的时间,单位:毫秒
document.body.onload = function(){
fCreateTable(); // 建立一个给蛇爬行的table
initPara(); // 初始化单元格的属性
fMoveTimer(); // 开始爬行
fAddFoodTimer(); // 随机出现一个食物
}
// 由用户按下不同的四个方向建来重新赋值变量forward
document.onkeydown = function(){
switch(event.keyCode){
case left:
if(forward == left || forward == right) return; else forward = left; break;
case right:
if(forward == left || forward == right) return; else forward = right; break;
case up:
if(forward == up || forward == down) return; else forward = up; break;
case down:
if(forward == up || forward == down) return; else forward = down; break;
}
}
function fCreateTable(){
var tb = document.createElement("<table cellspacing=0 cellpadding=0>");
tb.style.border = "1px solid #cccccc";
tb.id = "myTb0";
for(var i=0;i<r;i++){
var row = tb.insertRow(i);
for(var j=0;j<c;j++){
var cell = row.insertCell(j)
cell.innerHTML = "";
cell.style.width = cWidth + "px";
cell.style.height = cWidth + "px";
}
}
document.body.appendChild(tb);
}
// 初始化单元格,将所有的cell加两个属性status1和status2,并赋值false, 并将其中的一些cell的status1改为true, 成为蛇成员
function initPara(){
tb = document.getElementById("myTb0")
cellList = tb.getElementsByTagName("TD");
for(var i=0;i<cellList.length;i++){
cellList[i].status1 = false;
cellList[i].status2 = false;
}
for(var i=0;i<initLen;i++){
arr[i] = tb.rows[1].cells[initLen-i-1];
arr[i].status1 = true;
}
}
// 根据移动的方向, 加入蛇的新成员, 同时去掉最后一个成员,就形成"移动"
function fMoveNext(){
var row = arr[0].parentElement.rowIndex;
var cell = arr[0].cellIndex;
var newRow = 0, newCell = 0;
if(forward == right) {newRow = row;newCell = cell+1}
if(forward == left) {newRow = row;newCell = cell-1}
if(forward == up) {newRow = row-1;newCell = cell}
if(forward == down) {newRow = row+1;newCell = cell}
if(newRow == r || newRow <0 || newCell == c || newCell <0){
fFail();
return;
}
var nextEl = document.getElementById("myTb0").rows[newRow].cells[newCell]

// 下一个cell是蛇的成员
if(nextEl.status1){
fFail();
return;
}
// 下一个cell是食物
if(nextEl.status2){
nextEl.status2 = false;
fAddFoodTimer();
fConnChild();
}
nextEl.status1 = true;
nextEl.bgColor = snakeColor;
arr.unshift(nextEl); // 增加新成员
arr[arr.length-1].status1 = false;
arr[arr.length-1].bgColor = "#ffffff";
arr.pop(); // 去掉最后一个成员
}

// 吃掉一个食物后, 再最后增加一个新成员
function fConnChild(){
var newEl = null;
var row = arr[arr.length-1].parentElement.rowIndex;
var cell = arr[arr.length-1].cellIndex;

// 增加的顺序优先:左,右,上,下
if(cell>0 && newEl == null) newEl = (!tb.rows[row].cells[cell-1].status1)?tb.rows[row].cells[cell-1]:null;
if(cell<(c-1) && newEl == null) newEl = (!tb.rows[row].cells[cell+1].status1)?tb.rows[row].cells[cell+1]:null;
if(row>0 && newEl == null) newEl = (!tb.rows[row-1].cells[cell].status1)?tb.rows[row-1].cells[cell]:null;
if(row<(r-1) && newEl == null) newEl = (!tb.rows[row+1].cells[cell].status1)?tb.rows[row+1].cells[cell]:null;

newEl.status1 = true;
newEl.bgColor = snakeColor;
arr.push(newEl);
}
function fMoveTimer(){
t = window.setInterval("fMoveNext()",speed);
}

function fFail(){
window.clearInterval(t);
alert("fail.");
}
function fAddFoodTimer(){
window.setTimeout("fAddFood()",foodInterval);
}

// 用递归方法随机出现食物
function fAddFood(){
var foodObj = tb.rows[Math.round(Math.random()*(r-1))].cells[Math.round(Math.random()*(c-1))];
// 如果是蛇的成员就继续找食物
if(foodObj.status1){
fAddFood();
}else{
foodObj.status2 = true;
foodObj.bgColor = foodColor;
}
}
//-->
</SCRIPT>
...全文
334 35 打赏 收藏 转发到动态 举报
写回复
用AI写文章
35 条回复
切换为时间正序
请发表友善的回复…
发表回复
wxylvmnn 2005-03-25
  • 打赏
  • 举报
 回复
真的是你自己写的？

厉害！
gu1dai 2005-03-25
  • 打赏
  • 举报
 回复
有意思，支持。。。
dbLenis 2005-03-25
  • 打赏
  • 举报
 回复
我试了一下，真是太棒了，比专业的游戏版本好玩多了，我想最主要的是楼主太赋有有成就感了
本人不太喜欢玩游戏，但是用JAVASCRIPT编出来的就比其他专业的好玩多了，就是因为有这种交互式玩法，真让人羡慕楼主的技术，太高了……
harryCom 2005-03-25
  • 打赏
  • 举报
 回复
这个游戏不算很复杂吧? 发现原来有更加简单的方法,不需要用数组保存蛇,只需要增加两个变量保存蛇头和蛇尾就够了.
现在正在想通过用htc重构table对象,实现一些更复杂的功能或者简化一些操作,例如在cell增加一个row的属性就不需要每次通过parentElement.rowIndex来找它的行数,到时候打算用这种table做个excel模拟器,因为之前写过一段时间的excel vba,如果可能在table的基础上建造如excel application的sheet,range,cell,row,column等对象,那么功能会更加强大...
freejump 2005-03-24
  • 打赏
  • 举报
 回复
好贴子啊，我顶：）
LCKKING 2005-03-24
  • 打赏
  • 举报
 回复
//在 IDOICAN(酷酷す旋风)的基础上增加了吃食物会加速
<body></body>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
--Author:Harry
--Date :03/23/2005
--Function:游戏"贪吃蛇"
--Email:harrychen66@126.com
--Remark:由cell的status1和status2属性来决定哪些单元格是蛇,哪些是食物
*/
var r = 20;//表格的行数
var c = 20;//表格的列数
// r和c值越大初始化的时间会越长
var cWidth = 5;//单元格的宽度
var arr = new Array();//用来放蛇的数组
var initLen = 5;//蛇的初始长度
var left = 37, up = 38, right = 39, down = 40;
var tb = null;// 蛇爬动的table
var cellList = null;
var forward = right;//蛇爬动的方向
var foodInterval = 1000;// 出现食物的时间间隔
var snakeColor = "#333333";//蛇的颜色
var foodColor = "#ff0000";// 食物的颜色
var speed = 150;//蛇每爬一个单元格所需要的时间,单位:毫秒
var t;//蛇移动的记时器
function startSnake(){
if(startsnake.value=="重新开始"){
document.body.removeChild(tb);
forward=right;
}
fCreateTable();// 建立一个给蛇爬行的table
initPara();// 初始化单元格的属性
fMoveTimer();// 开始爬行
fAddFoodTimer();// 随机出现一个食物
}
// 由用户按下不同的四个方向建来重新赋值变量forward
document.onkeydown = function(){
switch(event.keyCode){
case left:
if(forward == left || forward == right) return; else forward = left; break;
case right:
if(forward == left || forward == right) return; else forward = right; break;
case up:
if(forward == up || forward == down) return; else forward = up; break;
case down:
if(forward == up || forward == down) return; else forward = down; break;
}
}
function fCreateTable(){
var tb = document.createElement("<table cellspacing=0 cellpadding=0>");
tb.style.border = "1px solid #cccccc";
tb.id = "myTb0";
for(var i=0;i<r;i++){
var row = tb.insertRow(i);
for(var j=0;j<c;j++){
var cell = row.insertCell(j)
cell.innerHTML = "";
cell.style.width = cWidth + "px";
cell.style.height = cWidth + "px";
}
}
document.body.appendChild(tb);
}
// 初始化单元格,将所有的cell加两个属性status1和status2,并赋值false, 并将其中的一些cell的status1改为true, 成为蛇成员
function initPara(){
tb = document.getElementById("myTb0")
cellList = tb.getElementsByTagName("TD");
for(var i=0;i<cellList.length;i++){
cellList[i].status1 = false;
cellList[i].status2 = false;
}
for(var i=0;i<initLen;i++){
arr[i] = tb.rows[1].cells[initLen-i-1];
arr[i].status1 = true;
}
}
// 根据移动的方向, 加入蛇的新成员, 同时去掉最后一个成员,就形成"移动"
function fMoveNext(){
var row = arr[0].parentElement.rowIndex;
var cell = arr[0].cellIndex;
var newRow = 0, newCell = 0;
if(forward == right) {newRow = row;newCell = cell+1}
if(forward == left) {newRow = row;newCell = cell-1}
if(forward == up) {newRow = row-1;newCell = cell}
if(forward == down) {newRow = row+1;newCell = cell}
if(newRow == r || newRow <0 || newCell == c || newCell <0){
fFail();
return;
}
var nextEl = document.getElementById("myTb0").rows[newRow].cells[newCell]

// 下一个cell是蛇的成员
if(nextEl.status1){
fFail();
return;
}
// 下一个cell是食物
if(nextEl.status2){
nextEl.status2 = false;
fAddFoodTimer();
fConnChild();
if(speed>30){//吃一个食物，速度就增加
speed-=10;
//重新设置记时器
clearTimeout(t);
fMoveTimer();
}
}
nextEl.status1 = true;
nextEl.bgColor = snakeColor;
arr.unshift(nextEl);// 增加新成员
arr[arr.length-1].status1 = false;
arr[arr.length-1].bgColor = "#ffffff";
arr.pop();// 去掉最后一个成员
}

// 吃掉一个食物后, 再最后增加一个新成员
function fConnChild(){
var newEl = null;
var row = arr[arr.length-1].parentElement.rowIndex;
var cell = arr[arr.length-1].cellIndex;

// 增加的顺序优先:左,右,上,下
if(cell>0 && newEl == null)newEl = (!tb.rows[row].cells[cell-1].status1)?tb.rows[row].cells[cell-1]:null;
if(cell<(c-1) && newEl == null)newEl = (!tb.rows[row].cells[cell+1].status1)?tb.rows[row].cells[cell+1]:null;
if(row>0 && newEl == null)newEl = (!tb.rows[row-1].cells[cell].status1)?tb.rows[row-1].cells[cell]:null;
if(row<(r-1) && newEl == null)newEl = (!tb.rows[row+1].cells[cell].status1)?tb.rows[row+1].cells[cell]:null;

newEl.status1 = true;
newEl.bgColor = snakeColor;
arr.push(newEl);
}
function fMoveTimer(){
t = window.setInterval("fMoveNext()",speed);
}

function fFail(){
window.clearInterval(t);
startsnake.value="重新开始"
alert("fail.");
}
function fAddFoodTimer(){
window.setTimeout("fAddFood()",foodInterval);
}

// 用递归方法随机出现食物
function fAddFood(){
var foodObj = tb.rows[Math.round(Math.random()*(r-1))].cells[Math.round(Math.random()*(c-1))];
// 如果是蛇的成员就继续找食物
if(foodObj.status1){
fAddFood();
}else{
foodObj.status2 = true;
foodObj.bgColor = foodColor;
}
}
//-->
</SCRIPT>
<input type="button" name="startsnake" value="开始" onClick="startSnake()">
IDOICAN 2005-03-24
  • 打赏
  • 举报
 回复
//改进了一下，可以“重新开始”了，不用死了就刷页面了
//----------------------------------
<body></body>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
--Author:Harry
--Date :03/23/2005
--Function:游戏"贪吃蛇"
--Email:harrychen66@126.com
--Remark:由cell的status1和status2属性来决定哪些单元格是蛇,哪些是食物
*/
var r = 20;//表格的行数
var c = 20;//表格的列数
// r和c值越大初始化的时间会越长
var cWidth = 5;//单元格的宽度
var arr = new Array();//用来放蛇的数组
var initLen = 5;//蛇的初始长度
var left = 37, up = 38, right = 39, down = 40;
var tb = null;// 蛇爬动的table
var cellList = null;
var forward = right;//蛇爬动的方向
var foodInterval = 1000;// 出现食物的时间间隔
var snakeColor = "#333333";//蛇的颜色
var foodColor = "#ff0000";// 食物的颜色
var speed = 150;//蛇每爬一个单元格所需要的时间,单位:毫秒
function startSnake(){
if(startsnake.value=="重新开始"){
document.body.removeChild(tb);
forward=right;
}
fCreateTable();// 建立一个给蛇爬行的table
initPara();// 初始化单元格的属性
fMoveTimer();// 开始爬行
fAddFoodTimer();// 随机出现一个食物
}
// 由用户按下不同的四个方向建来重新赋值变量forward
document.onkeydown = function(){
switch(event.keyCode){
case left:
if(forward == left || forward == right) return; else forward = left; break;
case right:
if(forward == left || forward == right) return; else forward = right; break;
case up:
if(forward == up || forward == down) return; else forward = up; break;
case down:
if(forward == up || forward == down) return; else forward = down; break;
}
}
function fCreateTable(){
var tb = document.createElement("<table cellspacing=0 cellpadding=0>");
tb.style.border = "1px solid #cccccc";
tb.id = "myTb0";
for(var i=0;i<r;i++){
var row = tb.insertRow(i);
for(var j=0;j<c;j++){
var cell = row.insertCell(j)
cell.innerHTML = "";
cell.style.width = cWidth + "px";
cell.style.height = cWidth + "px";
}
}
document.body.appendChild(tb);
}
// 初始化单元格,将所有的cell加两个属性status1和status2,并赋值false, 并将其中的一些cell的status1改为true, 成为蛇成员
function initPara(){
tb = document.getElementById("myTb0")
cellList = tb.getElementsByTagName("TD");
for(var i=0;i<cellList.length;i++){
cellList[i].status1 = false;
cellList[i].status2 = false;
}
for(var i=0;i<initLen;i++){
arr[i] = tb.rows[1].cells[initLen-i-1];
arr[i].status1 = true;
}
}
// 根据移动的方向, 加入蛇的新成员, 同时去掉最后一个成员,就形成"移动"
function fMoveNext(){
var row = arr[0].parentElement.rowIndex;
var cell = arr[0].cellIndex;
var newRow = 0, newCell = 0;
if(forward == right) {newRow = row;newCell = cell+1}
if(forward == left) {newRow = row;newCell = cell-1}
if(forward == up) {newRow = row-1;newCell = cell}
if(forward == down) {newRow = row+1;newCell = cell}
if(newRow == r || newRow <0 || newCell == c || newCell <0){
fFail();
return;
}
var nextEl = document.getElementById("myTb0").rows[newRow].cells[newCell]

// 下一个cell是蛇的成员
if(nextEl.status1){
fFail();
return;
}
// 下一个cell是食物
if(nextEl.status2){
nextEl.status2 = false;
fAddFoodTimer();
fConnChild();
}
nextEl.status1 = true;
nextEl.bgColor = snakeColor;
arr.unshift(nextEl);// 增加新成员
arr[arr.length-1].status1 = false;
arr[arr.length-1].bgColor = "#ffffff";
arr.pop();// 去掉最后一个成员
}

// 吃掉一个食物后, 再最后增加一个新成员
function fConnChild(){
var newEl = null;
var row = arr[arr.length-1].parentElement.rowIndex;
var cell = arr[arr.length-1].cellIndex;

// 增加的顺序优先:左,右,上,下
if(cell>0 && newEl == null)newEl = (!tb.rows[row].cells[cell-1].status1)?tb.rows[row].cells[cell-1]:null;
if(cell<(c-1) && newEl == null)newEl = (!tb.rows[row].cells[cell+1].status1)?tb.rows[row].cells[cell+1]:null;
if(row>0 && newEl == null)newEl = (!tb.rows[row-1].cells[cell].status1)?tb.rows[row-1].cells[cell]:null;
if(row<(r-1) && newEl == null)newEl = (!tb.rows[row+1].cells[cell].status1)?tb.rows[row+1].cells[cell]:null;

newEl.status1 = true;
newEl.bgColor = snakeColor;
arr.push(newEl);
}
function fMoveTimer(){
t = window.setInterval("fMoveNext()",speed);
}

function fFail(){
window.clearInterval(t);
startsnake.value="重新开始"
alert("fail.");
}
function fAddFoodTimer(){
window.setTimeout("fAddFood()",foodInterval);
}

// 用递归方法随机出现食物
function fAddFood(){
var foodObj = tb.rows[Math.round(Math.random()*(r-1))].cells[Math.round(Math.random()*(c-1))];
// 如果是蛇的成员就继续找食物
if(foodObj.status1){
fAddFood();
}else{
foodObj.status2 = true;
foodObj.bgColor = foodColor;
}
}
//-->
</SCRIPT>
<input type="button" name="startsnake" value="开始" onClick="startSnake()">
IDOICAN 2005-03-24
  • 打赏
  • 举报
 回复
大家有兴趣的可以改进这个游戏啊。。
网事随逢 2005-03-24
  • 打赏
  • 举报
 回复
8错！
破法者 2005-03-24
  • 打赏
  • 举报
 回复
啥叫弓虽的，这个不就是嘛，顶了，有创意，有热情，是个不错的家伙
hcqhappy 2005-03-24
  • 打赏
  • 举报
 回复
挺好的 以前玩的游戏 蛇头是不能和蛇身遇到的 否则fail
zmy0611 2005-03-24
  • 打赏
  • 举报
 回复
這個遊戲要求 蛇头不可以穿过蛇身嗎?
那要是蛇很長的話,繞圈子走不會出現走頭無路的情況嗎?自己瘪死自己了
----------------
__________ |
| | |
| _____| |
-------------
yiyioo 2005-03-24
  • 打赏
  • 举报
 回复
吧嗒吧嗒踏几个脚印~~~~~````
FBugFramework 2005-03-24
  • 打赏
  • 举报
 回复
不错.~~
baiyunfei 2005-03-24
  • 打赏
  • 举报
 回复
支持！
hcqhappy 2005-03-24
  • 打赏
  • 举报
 回复
太强了 喜欢 学习
menuvb 2005-03-24
  • 打赏
  • 举报
 回复
太强了
chenqishanghai 2005-03-24
  • 打赏
  • 举报
 回复
up
LCKKING 2005-03-24
  • 打赏
  • 举报
 回复
我晕，是不是改的太夸张了一点哦~~~
harryCom 2005-03-24
  • 打赏
  • 举报
 回复
现在撞墙也不会死了..无敌..
加载更多回复（15）
JavaScript贪吃蛇
今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！...
我也来写一个贪吃蛇
最近工作量好大，好忙，趁周末练练手，花了近3小时写了一个贪吃蛇。（后续会把自己的一些想法继续更新，目前是1.3版本~更新过4次，文末有更新说明）。 　这是实践操作的地址：http://iforj.com:8000/tool/snake/ ...
人人都可以写贪吃蛇（白话javascript版）
今天想把一个小游戏分享给大家，那就是贪吃蛇 我想应该没有人会未曾玩过吧 其实我这个人也很懒写教程，但本着人人为我，我为人人的精神和自己 以前学javascript的路途如此艰辛和看了这么多人用javascript写游戏 ...
使用 HTML5 Canvas 标签的贪吃蛇游戏
保罗·詹森 2009 年 12 月 31 日更新于2019年3 月 9 日 这篇文章最初发表在 New Bamboo 博客上，之前New Bamboo 在伦敦加入了thoughtbot。 ...该规范的一个很棒的新功能是 canvas 标签...
js 贪吃蛇游戏
因为之前用的C#.GUI 绘画过贪吃蛇，所以就试做用js做 了一个 类似的东东，（最近也是在学js......） 好了，我们先来看看运行效果吧： 界面大概就这样了，很难看，我知道 ，我审美都畸形的..呵呵呵 ，这...
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章