JavaScript 遊戲 : 貪吃蛇

最新推荐文章于 2024-10-24 10:47:21 发布

dewin

最新推荐文章于 2024-10-24 10:47:21 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript function firefox application up div

本文链接：https://blog.csdn.net/dewin/article/details/16651

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<title>dwin.net - web application - snake</title>
<body>
Written by David NG @ <a href="http://dwin.net">http://dwin.net</a><BR>
Copyright(c) 1998-2007 dwin.net all rights reserved<BR>
<span id='Base' style='position:absolute;-moz-box-sizing:border-box;'></span><br><br><div id='Score'></div><br><br><font color=red>Page Down to Speed down<br>Page Up to Speed up</font>

HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)
{
  var r = this.ownerDocument.createRange();
  r.setStartBefore(this);
  var parsedHTML = r.createContextualFragment(htmlStr);
  this.insertAdjacentElement(where,parsedHTML)
}

HTMLElement.prototype.insertAdjacentText = function(where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}

/*
Written by David NG @ http://dwin.net
Copyright(c) 1998-2004 dwin.net all rights reserved

Start: 2002-10-12 11:12
Finish: 2002-10-16 07:43

2007-06-17 02:10
bug fix

2007-08-08 16:35
firefox support
*/
var Rows = 20;
var Cells = 30;

var MapW = 20;
var MapH = 20;

var BorderW = 5;
var oSpeed = 70
var Scores = 0;

var SnakeHeakColor = 'blue';
var SnakeBodyColor = 'orange';
var SnakeTailColor = 'yellow';
var FoodColor = 'pink';

function CreatMainMap()
{
MainMap = [];
for(var y=0;y<Rows;y++)
{
  MainMap[y] = [];
  for(var x=0;x<Cells;x++)
   MainMap[y][x] = '';
}
}

function CreateFood()
{
var x = parseInt(Math.random()*Cells);
var y = parseInt(Math.random()*Rows);

if( MainMap[y][x] == '' )
{
  document.getElementById('Score').innerHTML = Scores++;
  document.getElementById('Base').insertAdjacentHTML("beforeEnd","<div id='food' name='food' style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+";background:"+FoodColor+";'>");
  MainMap[y][x] = 'F';
}
else
  return CreateFood();
}

function CreateSnake()
{
document.getElementById('Base').insertAdjacentHTML("beforeEnd","<span id='snake' name='snake' x="+SnakeX+" y="+SnakeY+" style='position:absolute;left:"+SnakeX*MapW+";top:"+SnakeY*MapH+";width:"+MapW+";height:"+MapH+";background:"+SnakeHeakColor+";'></span>");
MainMap[SnakeY][SnakeX] = 'S';
}

var GoX = 0;
var GoY = 0;
var GoTime = 0;

function Dir( x, y )
{
if( GoX!=0 && GoY!=0 ) // right&down OR left&top OR right&top OR left&down
{
  GoX = x;
  GoY = y;
}
else // left OR right OR top OR down
{
  GoX = (-GoX==x) ? GoX : x;
  GoY = (-GoY==y) ? GoY : y;
}

if(!GoTime)
GoTime = setInterval(Move,oSpeed);
}

function Move()
{
SnakeX = (SnakeX+GoX<0)?Cells-1:((SnakeX+GoX>Cells-1)?0:SnakeX+GoX);
SnakeY = (SnakeY+GoY<0)?Rows-1:((SnakeY+GoY>Rows-1)?0:SnakeY+GoY);

if( MainMap[SnakeY][SnakeX] == '' )
{
  AllSnakes[AllSnakes.length-1].style.backgroundColor = SnakeBodyColor;
  MainMap[AllSnakes[0].getAttribute('y')][AllSnakes[0].getAttribute('x')] = '';
  AllSnakes[0].parentNode.removeChild(AllSnakes[0]);

if( AllSnakes.length > 1 )
AllSnakes[0].style.backgroundColor = SnakeTailColor;

  CreateSnake();
  return;
}
if( MainMap[SnakeY][SnakeX] == 'F' )
{
  AllSnakes[AllSnakes.length-1].style.backgroundColor = SnakeBodyColor;
  //AllFoods[0].removeNode(true);
  AllFoods[0].parentNode.removeChild(AllFoods[0]);

if( AllSnakes.length > 1 )
AllSnakes[0].style.backgroundColor = SnakeTailColor;

  CreateSnake();
  CreateFood();
  return;
}
if( MainMap[SnakeY][SnakeX] == 'S' )
{
  if( confirm('Game Over. Try again?') )
   window.location.reload();
  else
   window.close()
}
}

var lastKeyCode = 0;
document.onkeydown = function( evt )
{
if( typeof(evt) == 'undefined' )
  evt = window.event||window.Event;
var keyCode = 0;
if( evt.keyCode )
  keyCode = evt.keyCode;
else if( typeof(evt.which) != 'undefined')
  keyCode = evt.which;

switch( keyCode )
{
  case 34: // page up - speed up
   clearInterval( GoTime );
   oSpeed += 3;
   GoTime = setInterval( Move,oSpeed );
   break;
  case 33: // page down - speed down
   if( oSpeed-2 > 0 )
   {
    clearInterval(GoTime);
    oSpeed -= 2;
    GoTime = setInterval(Move,oSpeed);
   }
   break;
  case 83: // s - stop
   clearInterval(GoTime);
   GoTime = 0;
   break;

  case 37: PreDir(-1,0); lastKeyCode=keyCode; break;//left
  case 38: PreDir(0,-1); lastKeyCode=keyCode; break;//up
  case 39: PreDir(1,0); lastKeyCode=keyCode; break;//right
  case 40: PreDir(0,1); lastKeyCode=keyCode; break;//down
}
}

document.onkeyup = function()
{
lastKeyCode = 0;
}

window.onload = function ()
{
var MainMapWidth = 2*BorderW+Cells*MapW;
var MainMapHeight = 2*BorderW+Rows*MapH;

var obj = document.getElementById('Base');
obj.style.left = (document.body.clientWidth-MainMapWidth)/2;
obj.style.top = (document.body.clientHeight-MainMapHeight)/2;
obj.style.width = MainMapWidth;
obj.style.height = MainMapHeight;
obj.style.borderWidth = BorderW;
obj.style.borderStyle ='inset';
obj.style.borderColor ='#0000CC';

SnakeX = parseInt(Math.random()*Cells);
SnakeY = parseInt(Math.random()*Rows);
AllSnakes = document.getElementsByName("snake");
AllFoods = document.getElementsByName("food");
window.focus();
CreatMainMap();
CreateSnake();
CreateFood();
Dir(1,1);
}

</script>