运行于谷歌浏览器。主要是利用了函数的封装思想，把每一个小功能分别封装在一个函数中，大大提高了代码的可扩展性！！提高了代码的可维护性！！！提高了代码的可阅读性！！！项目要求：1：有边界，碰到边界就game over。2：猎物没3秒增加一个，而且位置随机产生。3：吃一个猎物自身就增加一个元素。4：按上下左右控制移动方向，按空格决定暂停和前进。
实现思路：主要是一开始就把实现的功能封装在了一个先函数中去了，所以后续的功能增加就比较容易了。1：先画出了边界，就是实现了设置边界的函数。2：实现判断按键功能和根据按下的键盘决定移动的方向，实现了上下左右的移动功能。顺便实现了按下相反方向的键不起作用。避免了掉头自己吃自己。3：实现了猎物的随机生成功能，可以自动添加猎物:4：判断是否吃到了猎物。5：实现吃一个长一个功能，当吃一个类物是就把蛇的自身增加一个元素（都存储在数组中了，就是增加一个数组元素）。6：因为增加了蛇的长度，所以就得移动每一个的元素的位置。7：实现了是否吃到自己的功能。8：最后实现了暂停功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
#divWallId{width: 1000px;height: 600px; background-color: navajowhite;border: 3px #000 solid;}
#divSnId{width: 10px;height: 10px; background-color: darkblue; position: absolute;top:300px; left: 500px;}
</style>
</head>
<body>
<div id="divWallId">
<div id="divSnId"></div>
</div>
</body>
<script type="text/javascript">
var divSn = document.getElementById("divSnId");
var divWall = document.getElementById("divWallId");
//存放生成猎物
var arrFood = [];
var arr = [divSn]; // 存储每个元素
var direction = "top"; // 默认向上移动
var flagStop = true;
var preDire = null;
var prePreDir = "top";
// 总时钟！！
var timerSn = setInterval( main,10);
//随机生成猎物的时钟
var timerRan = setInterval(random,1000);
// main 函数
function main(){
//console.log(divSn.offsetTop+" "+divSn.offsetLeft);
keyPressMove(direction);
isEat()
changeLoaction();
border();
isEatIt();
}
//判断是否吃到自己
function isEatIt(){
for(var i=2;i<arr.length;i++){
if(Math.abs(divSn.offsetTop-arr[i].offsetTop)<=0 && Math.abs(divSn.offsetLeft-arr[i].offsetLeft)<=0){
alert("GeeeeeAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
}
//判断是否吃掉
function isEat(){
for(var i=0;i<arrFood.length;i++){
if(Math.abs(divSn.offsetTop-arrFood[i].offsetTop)<=10 && Math.abs(divSn.offsetLeft-arrFood[i].offsetLeft)<=10){
//调用函数 长大
changeBiger(i);
// 移除food
divWall.removeChild(arrFood[i]);
// 移除数组中元素
arrFood.splice(i,1);
// 每个元素位置变化；
}
}
}
// 设置边界
function border(){
if(divSn.offsetTop-divWall.offsetTop<=0 || divSn.offsetTop+10-(divWall.offsetTop+divWall.offsetHeight)>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
if(divSn.offsetLeft-divWall.offsetLeft<=0 || divSn.offsetLeft+10-divWall.offsetLeft-divWall.offsetWidth>=-3){
alert("GAME OVER");
clearInterval(timerSn);
clearInterval(timerRan);
}
}
//随机生成猎物
function random(){
var foodTop = Math.floor(Math.random()*590)+3+"px";
var foodLeft = Math.floor(Math.random()*990)+3+"px";
var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "red";
subFood.style.position = "absolute";
subFood.style.top = foodTop;
subFood.style.left = foodLeft;
divWall.appendChild(subFood);
arrFood.push(subFood);
}
// 移动每一个元素的位置
function changeLoaction(){
for(var i=arr.length-1;i>0;i--){
arr[i].style.top= arr[i-1].offsetTop+"px";
arr[i].style.left = arr[i-1].offsetLeft+"px";
}
}
// 吃一个长一个
function changeBiger(num){
var arrLen = arr.length;
var subFood = document.createElement("div");
subFood.style.width = "10px";
subFood.style.height = "10px";
subFood.style.backgroundColor = "darkblue";
subFood.style.position = "absolute";
subFood.style.top = arrFood[num].offsetTop+"px";
subFood.style.left = arrFood[num].offsetLeft+"px";
// 添加到数组中
arr.push(subFood);
divWall.appendChild(subFood);
//alert(arr.length);
}
//判断按键
document.onkeydown = function (event){
switch(event.keyCode){
case 37:{
if(direction!="right"){
direction = "left";
}
break;
}
case 38:{
if(direction!="bottom"){
direction = "top";
}
break;
}
case 39:{
if(direction!="left"){
direction = "right";
}
break;
}
case 40:{
if(direction!="top"){
direction = "bottom";
}
break;
}
case 32:{
if(direction!="space"){
preDire = direction;
}
direction = "space";
break;
}
}
}
// 暂停功能
document.onkeypress = function (event){
if(event.keyCode==32){
if(flagStop == true){
clearInterval(timerSn);
clearInterval(timerRan);
flagStop = false;
//alert(flagStop);
}else{
// 总时钟！！
direction = preDire;
//alert(direction);
timerSn = setInterval( main,10);
timerRan =setInterval(random,1000);
flagStop = true;
}
}
}
// 根据按下的键盘决定移动的方向
function keyPressMove(fangXiang){
//alert(fangXiang)
//console.log(divSn.offsetTop+" "+divSn.offsetLeft);
switch(fangXiang){
case "top":{
divSn.style.top = divSn.offsetTop-1+"px";
break;
}
case "left":{
divSn.style.left = divSn.offsetLeft-1+"px";
break;
}
case "right":{
divSn.style.left = divSn.offsetLeft+1+"px";
break;
}
case "bottom":{
divSn.style.top = divSn.offsetTop+1+"px";
break;
}
}
}
</script>
</html>
