课程设计:用JavaScript在网页上制作一个贪吃蛇游戏。
& lthead & gt
& lttitle & gtSnake v2.4
& ltstyle & gt
正文{
字体大小:9pt
}
表格{
边框-塌陷:塌陷；
边框:纯色# 333 1px；
}
td{
身高:10px；
宽度:10px；
字体大小:0px
}
。已填充{
背景色:蓝色；
}
& lt/style & gt；
& lt/head & gt；
& lt脚本& gt
函数$(id){ return document . getelementbyid(id)；}
/**************************************************************
* javascript Snake V2.4
*作者:sun xing 007 05/14/2009 & lt；br/>；
*转载请注明来自/sunxing007。谢谢大家！& ltbr/>；
* v2.4修复了蛇身体的颜色可以随着蛇的前进而移动。
**************************************************************/
//蛇。
var Snake = {
tbl:空，
/**
* body:蛇身，蛇的每一段都放在数组里，
*数据结构{x:x0，y:y0，color:color0}，
* x，y代表坐标，color代表颜色。
**/
正文:[]，
//当前移动方向，值为0，1，2，3，分别表示上、右、下、左。按键盘方向键来改变它。
方向:0，
//计时器
计时器:空，
//速度
速度:250，
//已经暂停了吗？
停顿了一下:真的，
//行数
行数:30，
//列数
列数:30，
//初始化
init:函数(){
var colors = ['红色'，'橙色'，'黄色'，'绿色'，'蓝色'，' # CCC ']；
this . TBL = $(" main ")；
var x = 0；
var y = 0；
var colorIndex = 0；
//生成初始移动方向
this . direction = math . floor(math . random()* 4)；
//构造表
for(var row = 0；row & ltthis.rowCountrow++){
var tr = this . TBL . insertrow(-1)；
for(var col = 0；col & ltthis.colCountcol++) {
var TD = tr . insert cell(-1)；
}
}
//生成20个松散节点
for(var I = 0；我& lt10;i++){
x = math . floor(math . random()* this . colcount)；
y = math . floor(math . random()* this . rowcount)；
colorIndex = math . floor(math . random()* 7)；
如果(！this.isCellFilled(x，y)){
this.tbl.rows[y]。cells[x]. style . background color = colors[colorIndex]；
}
}
//产生黑鱼
while(true){
x = math . floor(math . random()* this . colcount)；
y = math . floor(math . random()* this . rowcount)；
如果(！this.isCellFilled(x，y)){
this.tbl.rows[y]。cells[x]. style . background color = " black "；
this.body.push({x:x，y:y，color:' black ' })；
打破；
}
}
this.paused = true
//添加键盘事件
document . onkeydown = function(e){
如果(！e)e = window . event；
开关(e.keyCode | e.which | e.charCode){
案例13: {
if(Snake.paused){
snake . move()；
Snake.paused = false
}
否则{
//如果没有停顿，就停止移动。
snake . pause()；
Snake.paused = true
}
打破；
}
案例37:{//左
//阻止蛇倒退。
if(Snake.direction==1){
打破；
}
snake . direction = 3；
打破；
}
案例38:{//上
//快捷键在这里起作用。
if(event.ctrlKey){
snake . speedup(-20)；
打破；
}
If(Snake.direction==2){//阻止蛇后退。
打破；
}
snake . direction = 0；
打破；
}
案例39:{//右
If(Snake.direction==3){//阻止蛇后退。
打破；
}
snake . direction = 1；
打破；
}
案例40:{//down
if(event.ctrlKey){
snake . speedup(20)；
打破；
}
If(Snake.direction==0){//阻止蛇后退。
打破；
}
snake . direction = 2；
打破；
}
}
}
},
//移动
move: function(){
this . timer = setInterval(function(){
snake . erase()；
snake . moveonestep()；
snake . paint()；
}，this . speed)；
},
//移动身体的一部分
moveOneStep: function(){
if(this . check next step()= =-1){
clear interval(this . timer)；
alert("游戏结束！\ n请按“重新启动”继续。);
返回；
}
if(this . check next step()= = 1){
var _ point = this . get nextpos()；
var _ x = _ point.x
var _ y = _ point.y
var _color = this.getColor(_x，_ y)；
this.body.unshift({x:_x，y:_y，color:_ color })；
//因为吃了一种食物，就产生了另一种食物。
this . generated ood()；
返回；
}
//window . status = this . tostring()；
var point = this . get nextpos()；
//保持第一节的颜色。
var color = this.body[0]。颜色；
//颜色向前移动
for(var I = 0；我& ltthis . body . length-1；i++){
this.body[i]。color = this.body[i+1]。颜色；
}
//蛇尾减一节，蛇尾加一节，显示蛇前进的效果。
this . body . pop()；
this.body.unshift({x:point.x，y:point.y，color:color })；
//window . status = this . tostring()；
},
//探索下一步要去的地方。
暂停:函数(){
clear interval(snake . timer)；
this . paint()；
},
getNextPos: function(){
var x = this.body[0]。x；
var y = this.body[0]。y；
var color = this.body[0]。颜色；
//向上
if(this.direction==0){
y-；
}
//到右边
else if(this . direction = = 1){
x++；
}
//向下
else if(this.direction==2){
y++；
}
//向左
否则{
x-；
}
//返回一个坐标
返回{x:x，y:y }；
},
//检查下一步要移动到什么地方。
checkNextStep: function(){
var point = this . get nextpos()；
var x = point.x
var y = point.y
if(x & lt；0 | | x & gt= this.colCount | | y & lt0 | | y & gt=this.rowCount){
return-1；//触及边界，游戏结束。
}
for(var I = 0；我& ltthis . body . length；i++){
如果(this.body[i].x = = x & amp& ampthis.body[i]。y==y){
return-1；//碰到身体，游戏结束。
}
}
if(this.isCellFilled(x，y)){
返回1；//有些东西
}
返回0；//开放空间
},
//抹掉蛇。
erase: function(){
for(var I = 0；我& ltthis . body . length；i++){
this.eraseDot(this.body[i]。x，this.body[i]。y)；
}
},
//绘制蛇的身体
paint: function(){
for(var I = 0；我& ltthis . body . length；i++){
this.paintDot(this.body[i]。x，this.body[i]。y，this.body[i]。颜色)；
}
},
//擦除一个部分
eraseDot:函数(x，y){
this.tbl.rows[y]。cells[x]. style . background color = " "；
},
paintDot: function(x，y，color){
this.tbl.rows[y]。cells[x]. style . background color = color；
},
//获取坐标上的颜色。
getColor: function(x，y){
返回this.tbl.rows[y]。cells[x]. style . background color；
},
//用于调试
toString: function(){
var str =
for(var I = 0；我& ltthis . body . length；i++){
str += "x:" + this.body[i]。x + " y:" + this.body[i]。y + " color:" + this.body[i]。颜色+"-"；
}
返回字符串；
},
//检查坐标点是否被填充。
isCellFilled: function(x，y){
if(this.tbl.rows[y])。cells[x]. style . background color = = " "){
返回false
}
返回true
},
//重新开始
重新启动:函数(){
if(this.timer){
clear interval(this . timer)；
}
for(var I = 0；我& ltthis.rowCounti++){
this . TBL . deleterow(0)；
}
this . body =[]；
this . init()；
this.speed = 250
},
//加速
加速:函数(时间){
如果(！this.paused){
如果(this . speed+time & lt；10 | | this . speed+time & gt；2000){
返回；
}
this . speed+= time；
this . pause()；
this . move()；
}
},
//生产粮食。
generateDood: function(){
var colors = ['红色'，'橙色'，'黄色'，'绿色'，'蓝色'，' # CCC ']；
var x = math . floor(math . random()* this . colcount)；
var y = math . floor(math . random()* this . rowcount)；
var colorIndex = math . floor(math . random()* 7)；
如果(！this.isCellFilled(x，y)){
this.tbl.rows[y]。cells[x]. style . background color = colors[colorIndex]；
}
}
};
& lt/script & gt；
& ltbody onload = " snake . init()；"& gt
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * & lt；br/>；
* javascript Snake V2.4
*作者:sun xing 007 05/14/2009 & lt；br/>；
*转载请注明来自
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */& lt；br/>；
& lttable id = " main " border = " 1 " cellspacing = " 0 " cell padding = " 0 " >& lt/table & gt；
& ltinput type = " button " ID = " BTN " value = "开始/暂停"/& gt；单击左键或按回车键开始/暂停游戏
& ltinput type = " button " ID = " reset " value = " restart "/& gt；& ltbr/>；
& ltinput type = " button " ID = " upspeed " value = " acceleration "/& gt；单击左键或按Ctrl+↑加速
& ltinput type = " button " ID = " down speed " value = " deceleration "/& gt；点击左键或按Ctrl+↓减速。
& lt脚本& gt
$('btn ')。onclick = function(){
if(Snake.paused){
snake . move()；
Snake.paused = false
}
否则{
snake . pause()；
Snake.paused = true
}
};
$(“重置”)。onclick = function(){
snake . restart()；
this . blur()；
};
$(“加速”)。onclick = function(){
snake . speedup(-20)；
};
$(“降速”)。onclick = function(){
snake . speedup(20)；
};
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；