用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)

前言

这是我在多年前初学jquery, 并结合javascript, 编写的一个小游戏.那洋洋洒洒几千行的js代码时刻提醒着我\”不忘初心!\”.

效果演示

代码

引入文件

由于用到了jquery, 所以需要引入js文件

<script src=\"../js/jquery-3.2.1.js\" type=\"text/javascript\"></script><script src=\"../js/jquery.color.js\" type=\"text/javascript\"></script>

关键代码

这个游戏最关键的点是如何通过键盘按键让小蛇动起来, 之后画背景图, 障碍物, 改变颜色, 生成豆子, 计算碰撞都是很简单的. 部分代码如下:

// 蛇身跟蛇头走for(var i = redBodys.length-1;i>0;i--){redBodys[i].style.top = redBodys[i - 1].style.top;redBodys[i].style.left = redBodys[i - 1].style.left;}// 红蛇头移动red1.style.left = redLeft + \"px\";

动起来及加减速的主要方法是setInterval().
创建一个数组代表小蛇的身体, 每个元素(这里可以抽象成对象, 每一节身体可以有颜色坐标等属性)代表一节身体, 只需要控制蛇头的移动和上下左右的方向判断, 并记录下蛇头的位置和历史位置, 数组中的元素依次获得上一个元素的历史位置并改变, 即可实现小蛇的移动效果.

所有代码(无注释版, 下载版包含所有详细注释)

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>贪吃蛇双人对战版</title><!--AsldGo制作 严禁转载--><style type=\"text/css\">#statement88{width: 250px;height: 320px;background-color: lavenderblush;border: 1px solid black;position: absolute;left: 1610px;top: 140px;font-size: 15px;text-align: center;color: black;}.outer {width: 1200px;height: 600px;background-color: aquamarine;border: 1px solid black;position: absolute;left: 360px;top: 140px;font-size: 200px;text-align: center;color: red;line-height: 600px;}.outer > div{width: 50px;height: 50px;border-radius: 30%;background-color: red;position: absolute;top: 550px;left: -2000px;}#btn1{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: black;color: white;position: absolute;top: 110px;left: 360px;}#btn2{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: black;color: white;position: absolute;top: 110px;left: 360px;display: none;}#btnFast{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: red;color: white;position: absolute;top: 110px;left: 660px;}#btnSlow{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: red;color: white;position: absolute;top: 110px;left: 760px;}#textV8{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 860px;}#textV{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 910px;}#score8{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 960px;}#score{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 1010px;}#btnFastB{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: blue;color: white;position: absolute;top: 110px;left: 1160px;}#btnSlowB{width: 100px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;background-color: blue;color: white;position: absolute;top: 110px;left: 1260px;}#textV8B{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 1360px;}#textVB{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 1410px;}#score8B{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 1460px;}#scoreB{width: 50px;height: 30px;font-size: 15px;text-align: center;line-height: 30px;border: 1px solid black;background-color: white;color: black;position: absolute;top: 110px;left: 1510px;}.red1{}#redHead{width: 50px;height: 50px;border-radius: 50%;background-color: red;position: absolute;top: 550px;left: -50px;}#redHeadIn1{width: 10px;height: 10px;border-radius: 50%;border: 3px ridge black;background-color: white;position: absolute;top: 10px;left: -5px;}#redHeadIn2{width: 10px;height: 10px;border-radius: 50%;border: 3px ridge black;background-color: white;position: absolute;top: 10px;left: 40px;}#redHeadIn3{width: 30px;height: 30px;border-radius: 50%;border: 0px groove yellow;background-color: aquamarine;position: absolute;top: -15px;left: 10px;}#redHeadIn4{width: 30px;height: 30px;border-radius: 20%;border: 0px groove yellow;background-color: aquamarine;position: absolute;top: -15px;left: 10px;}.redBodyIn{width: 40px;height: 30px;border: 1px solid yellow;border-radius: 30%;background-color: red;position: absolute;top: 5px;left: 5px;}.blue1{}#blueHead{width: 50px;height: 50px;border-radius: 50%;background-color: blue;position: absolute;top: 550px;left: 1200px;}#blueHeadIn1{width: 10px;height: 10px;border-radius: 50%;border: 3px ridge black;background-color: yellow;position: absolute;top: 10px;left: 40px;}#blueHeadIn2{width: 10px;height: 10px;border-radius: 50%;border: 3px ridge black;background-color: yellow;position: absolute;top: 10px;left: -5px;}#blueHeadIn3{width: 30px;height: 30px;border-radius: 50%;border: 0px groove yellow;background-color: aquamarine;position: absolute;top: -15px;left: 10px;}#blueHeadIn4{width: 30px;height: 30px;border-radius: 20%;border: 0px groove yellow;background-color: aquamarine;position: absolute;top: -15px;left: 10px;}.blueBodyIn{width: 40px;height: 30px;border: 1px solid yellow;border-radius: 30%;background-color: red;position: absolute;top: 5px;left: 5px;}.beans {width: 50px;height: 50px;border-radius: 50%;background-color: white;position: absolute;top: 0px;left: 0px;font-size: 20px;text-align: center;line-height: 50px;color: black;display: none;}#gameOver{display: none;}#wood1{width: 600px;height: 50px;border: 1px solid black;background-color: #dd8b1d;position: absolute;top: 150px;left: 300px;font-size: 30px;color: black;line-height: 50px;text-align: center;}#wood2{width: 600px;height: 50px;border: 1px solid black;background-color: #dd8b1d;position: absolute;top: 400px;left: 300px;font-size: 30px;color: black;line-height: 50px;text-align: center;}</style></head><body><p id=\"statement88\" disabled></p><button id=\"btn1\">开始</button><button id=\"btn2\">停止</button><button id=\"btnFast\">加速</button><button id=\"btnSlow\">减速</button><text id=\"textV8\">速度: </text><text id=\"textV\">1</text><text id=\"score8\">分数: </text><text id=\"score\">0</text><button id=\"btnFastB\">加速</button><button id=\"btnSlowB\">减速</button><text id=\"textV8B\">速度: </text><text id=\"textVB\">1</text><text id=\"score8B\">分数: </text><text id=\"scoreB\">0</text><div class=\"outer\"><span id=\"wood1\">障碍物</span><span id=\"wood2\">障碍物</span><span class=\"beans\">1</span><span class=\"beans\">1</span><span class=\"beans\">1</span><span class=\"beans\">2</span><span class=\"beans\">2</span><span id=\"gameOver\">GAME OVER</span><div class=\"red1\" id=\"redHead\"><div id=\"redHeadIn1\"></div><div id=\"redHeadIn2\"></div><div id=\"redHeadIn3\"></div><div id=\"redHeadIn4\"></div></div><div class=\"red1\" style=\"top: 550px;left: -50px;background-color: red\"></div><div class=\"red1\" style=\"top: 550px;left: -50px;background-color: red\"></div><div class=\"red1\" style=\"top: 550px;left: -50px;background-color: red\"></div><div class=\"red1\" style=\"top: 550px;left: -50px;background-color: red\"></div><div class=\"blue1\" id=\"blueHead\"><div id=\"blueHeadIn1\"></div><div id=\"blueHeadIn2\"></div><div id=\"blueHeadIn3\"></div><div id=\"blueHeadIn4\"></div></div><div class=\"blue1\" style=\"top: 550px;left: 1200px;background-color: blue\"></div><div class=\"blue1\" style=\"top: 550px;left: 1200px;background-color: blue\"></div><div class=\"blue1\" style=\"top: 550px;left: 1200px;background-color: blue\"></div><div class=\"blue1\" style=\"top: 550px;left: 1200px;background-color: blue\"></div></div><script src=\"../js/jquery-3.2.1.js\" type=\"text/javascript\"></script><script src=\"../js/jquery.color.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">var statement8 = \"<h2>游戏说明</h2>\"+\"1.点击开始按钮或Enter键开始游戏<br>\"+\"2.双方可以提前设置速度最高五级<br>\"+\"3.吃不同的能量豆会长不同的身体<br>\"+\"4.吃不同数字的能量豆加对应分数<br>\"+\"5.连续按同一方向会加速最高五级<br>\"+\"6.按相反的方向将会减速最低一级<br>\"+\"7.蛇头碰到障碍物或蛇身直接失败<br>\"+\"8.首先获得三十分的一方获得胜利<br>\"+\"9.红色蛇方用上下左右加减号控制<br>\"+\"10.蓝色蛇方用 (W A S D T G) 控制<br>\";$(\"#statement88\").html(statement8);var outer = document.getElementsByClassName(\"outer\")[0];var startOrStop = 0;var scoreMax = 30;var cssBody2;var redBodys = $(\".outer > .red1\");var red1 = redBodys[0];var redTime;var redLeft = -50;var redTop = 550;var redStep = 50;var redV = (6-document.getElementById(\"textV\").innerHTML)*50;var redDirection = 1;var mouseFlag = 0;var eyeFlag = 0;var blueBodys = $(\".outer > .blue1\");var blue1 = blueBodys[0];var blueTime;var blueLeft = 1200;var blueTop = 550;var blueStep = 50;var blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;var blueDirection = -1;var beans0 = document.getElementsByClassName(\"beans\")[0];var btop0 = 0;var bleft0 = 0;var beans1 = document.getElementsByClassName(\"beans\")[1];var btop1 = 0;var bleft1 = 0;var beans2 = document.getElementsByClassName(\"beans\")[2];var btop2 = 0;var bleft2 = 0;var beans3 = document.getElementsByClassName(\"beans\")[3];var btop3 = 0;var bleft3 = 0;var beans4 = document.getElementsByClassName(\"beans\")[4];var btop4 = 0;var bleft4 = 0;showBeans0();showBeans1();showBeans2();showBeans3();showBeans4();redHeadChange();blueHeadChange();setInterval(eyeChange,500);setInterval(mouseChange,100);$(\"#btnFast\").click(function () {if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;});$(\"#btnSlow\").click(function () {if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;});$(\"#btnFastB\").click(function () {if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;});$(\"#btnSlowB\").click(function () {if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;});$(\"#btn1\").click(function () {startOrStop=1;if(redDirection==1||redDirection==-1){redTime= setInterval(redMoveLeft, redV);}else if(redDirection==2||redDirection==-2){redTime= setInterval(redMoveTop, redV);}if(blueDirection==1||blueDirection==-1){blueTime= setInterval(blueMoveLeft, blueV);}else if(blueDirection==2||blueDirection==-2){blueTime= setInterval(blueMoveTop, blueV);}$(this).hide();$(\"#btn2\").show();})$(\"#btn2\").click(function () {startOrStop=0;clearInterval(redTime);clearInterval(blueTime);$(this).hide();$(\"#btn1\").show();})function redMoveLeft() {if(document.getElementById(\"score\").innerHTML >=scoreMax){blueGameOver();}else if(document.getElementById(\"scoreB\").innerHTML >=scoreMax){redGameOver();}if (bleft0 == redLeft && btop0 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans0.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans0.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans0.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans0();}if (bleft1 == redLeft && btop1 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans1.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans1.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans1.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans1();}if (bleft2 == redLeft && btop2 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans2.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans2.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans2.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans2();}if (bleft3 == redLeft && btop3 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans3.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans3.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans3.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans3();}if (bleft4 == redLeft && btop4 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans4.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans4.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans4.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans4();}if (redDirection == 1) {redLeft += redStep;if(redLeft==1200){redLeft=0;}}else if(redDirection == -1){redLeft -= redStep;if(redLeft==-50){redLeft=1150;}}for(var i = redBodys.length-1;i>0;i--){redBodys[i].style.top = redBodys[i - 1].style.top;redBodys[i].style.left = redBodys[i - 1].style.left;}red1.style.left = redLeft + \"px\";if(redLeft>=300&&redLeft<=850&&(redTop==150||redTop==400)){redGameOver();}for(var i=1;i<redBodys.length;i++){if(redBodys[i].style.left==redBodys[0].style.left&&redBodys[i].style.top==redBodys[0].style.top){redGameOver();}}for(var i=1;i<blueBodys.length;i++){if(blueBodys[i].style.left==redBodys[0].style.left&&blueBodys[i].style.top==redBodys[0].style.top){redGameOver();}}}function redMoveTop() {if(document.getElementById(\"score\").innerHTML >=scoreMax){blueGameOver();}else if(document.getElementById(\"scoreB\").innerHTML >=scoreMax){redGameOver();}if (bleft0 == redLeft && btop0 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans0.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans0.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans0.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans0();}if (bleft1 == redLeft && btop1 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans1.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans1.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans1.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans1();}if (bleft2 == redLeft && btop2 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans2.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans2.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans2.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans2();}if (bleft3 == redLeft && btop3 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans3.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans3.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans3.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans3();}if (bleft4 == redLeft && btop4 == redTop) {cssBody2 = {\"top\":redBodys[redBodys.length-1].style.top,\"left\":redBodys[redBodys.length-1].style.left,\"backgroundColor\":\"red\"};document.getElementById(\"score\").innerHTML = parseInt(beans4.innerHTML)+parseInt(document.getElementById(\"score\").innerHTML);for(var i=0;i<beans4.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'red1\'>\").css(cssBody2));$(\".red1\").append($(\"<div class=\'redBodyIn\'>\").css({\"backgroundColor\":beans4.style.backgroundColor}));$(\"#redHead > .redBodyIn\").remove();}redBodys = $(\".outer > .red1\");showBeans4();}if (redDirection == 2) {redTop += redStep;if(redTop==600){redTop = 0;}}else if(redDirection == -2){redTop -= redStep;if(redTop==-50){redTop = 550;}}for(var i = redBodys.length-1;i>0;i--){redBodys[i].style.top = redBodys[i - 1].style.top;redBodys[i].style.left = redBodys[i - 1].style.left;}red1.style.top = redTop + \"px\";if(redLeft>=300&&redLeft<=850&&(redTop==150||redTop==400)){redGameOver();}for(var i=1;i<redBodys.length;i++){if(redBodys[i].style.left==redBodys[0].style.left&&redBodys[i].style.top==redBodys[0].style.top){redGameOver();}}for(var i=1;i<blueBodys.length;i++){if(blueBodys[i].style.left==redBodys[0].style.left&&blueBodys[i].style.top==redBodys[0].style.top){redGameOver();}}}function blueMoveLeft() {if(document.getElementById(\"score\").innerHTML >=scoreMax){blueGameOver();}else if(document.getElementById(\"scoreB\").innerHTML >=scoreMax){redGameOver();}if (bleft0 == blueLeft && btop0 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans0.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans0.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans0.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans0();}if (bleft1 == blueLeft && btop1 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans1.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans1.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans1.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans1();}if (bleft2 == blueLeft && btop2 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans2.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans2.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans2.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans2();}if (bleft3 == blueLeft && btop3 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans3.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans3.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans3.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans3();}if (bleft4 == blueLeft && btop4 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans4.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans4.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans4.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans4();}if (blueDirection == 1) {blueLeft += blueStep;if(blueLeft==1200){blueLeft=0;}}else if(blueDirection == -1){blueLeft -= blueStep;if(blueLeft==-50){blueLeft=1150;}}for(var i = blueBodys.length-1;i>0;i--){blueBodys[i].style.top = blueBodys[i - 1].style.top;blueBodys[i].style.left = blueBodys[i - 1].style.left;}blue1.style.left = blueLeft + \"px\";if(blueLeft>=300&&blueLeft<=850&&(blueTop==150||blueTop==400)){blueGameOver();}for(var i=1;i<blueBodys.length;i++){if(blueBodys[i].style.left==blueBodys[0].style.left&&blueBodys[i].style.top==blueBodys[0].style.top){blueGameOver();}}for(var i=1;i<redBodys.length;i++){if(redBodys[i].style.left==blueBodys[0].style.left&&redBodys[i].style.top==blueBodys[0].style.top){blueGameOver();}}}function blueMoveTop() {if(document.getElementById(\"score\").innerHTML >=scoreMax){blueGameOver();}else if(document.getElementById(\"scoreB\").innerHTML >=scoreMax){redGameOver();}if (bleft0 == blueLeft && btop0 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans0.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans0.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans0.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans0();}if (bleft1 == blueLeft && btop1 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans1.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans1.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans1.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans1();}if (bleft2 == blueLeft && btop2 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans2.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans2.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans2.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans2();}if (bleft3 == blueLeft && btop3 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans3.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans3.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans3.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans3();}if (bleft4 == blueLeft && btop4 == blueTop) {cssBody2 = {\"top\":blueBodys[blueBodys.length-1].style.top,\"left\":blueBodys[blueBodys.length-1].style.left,\"backgroundColor\":\"blue\"};document.getElementById(\"scoreB\").innerHTML = parseInt(beans4.innerHTML)+parseInt(document.getElementById(\"scoreB\").innerHTML);for(var i=0;i<beans4.innerHTML;i++) {$(\".outer\").append($(\"<div class=\'blue1\'>\").css(cssBody2));$(\".blue1\").append($(\"<div class=\'blueBodyIn\'>\").css({\"backgroundColor\":beans4.style.backgroundColor}));$(\"#blueHead > .blueBodyIn\").remove();}blueBodys = $(\".outer > .blue1\");showBeans4();}if (blueDirection == 2) {blueTop += blueStep;if(blueTop==600){blueTop = 0;}}else if(blueDirection == -2){blueTop -= blueStep;if(blueTop==-50){blueTop = 550;}}for(var i = blueBodys.length-1;i>0;i--){blueBodys[i].style.top = blueBodys[i - 1].style.top;blueBodys[i].style.left = blueBodys[i - 1].style.left;}blue1.style.top = blueTop + \"px\";if(blueLeft>=300&&blueLeft<=850&&(blueTop==150||blueTop==400)){blueGameOver();}for(var i=1;i<blueBodys.length;i++){if(blueBodys[i].style.left==blueBodys[0].style.left&&blueBodys[i].style.top==blueBodys[0].style.top){blueGameOver();}}for(var i=1;i<redBodys.length;i++){if(redBodys[i].style.left==blueBodys[0].style.left&&redBodys[i].style.top==blueBodys[0].style.top){blueGameOver();}}}function redGameOver() {clearInterval(redTime);clearInterval(blueTime);setInterval(redOver, 1);$(\"#wood1\").hide();$(\"#wood2\").hide();$(\".beans\").hide();$(\"#gameOver\").text(\"蓝蛇胜利!\");$(\"#gameOver\").css({\"color\":\"blue\"});$(\"#gameOver\").show();//        alert(\"再来一次\");//        location.reload();}function redOver() {$(\".outer > .red1:last\").animate({backgroundColor: \"black\"}, 50, function () {$(this).remove();});}function blueGameOver() {clearInterval(redTime);clearInterval(blueTime);setInterval(blueOver, 1);$(\"#wood1\").hide();$(\"#wood2\").hide();$(\".beans\").hide();$(\"#gameOver\").text(\"红蛇胜利!\");$(\"#gameOver\").css({\"color\":\"red\"});$(\"#gameOver\").show();//        alert(\"再来一次\");//        location.reload();}function blueOver() {$(\".outer > .blue1:last\").animate({backgroundColor: \"black\"}, 50, function () {$(this).remove();});}function showBeans0() {var color = getRgbColor();var num = getBeansNum();bleft0 = parseInt(Math.random() * 23)*50;btop0 = parseInt(Math.random() * 11)*50;if((btop0==150||btop0==400)&&bleft0>=300&&bleft0<=900){btop0 = btop0 +50*(Math.random()>=0.5? 1:(-1));}beans0.style.top = btop0 + \"px\";beans0.style.left = bleft0 + \"px\";beans0.style.backgroundColor = color[0];beans0.style.color = color[1];beans0.innerHTML = num;beans0.style.display = \"block\";}function showBeans1() {var color = getRgbColor();var num = getBeansNum();bleft1 = parseInt(Math.random() * 23)*50;btop1 = parseInt(Math.random() * 11)*50;if((btop1==150||btop1==400)&&bleft1>=300&&bleft1<=900){btop1 = btop1 +50*(Math.random()>=0.5? 1:(-1));}beans1.style.top = btop1 + \"px\";beans1.style.left = bleft1 + \"px\";beans1.style.backgroundColor = color[0];beans1.style.color = color[1];beans1.innerHTML = num;beans1.style.display = \"block\";}function showBeans2() {var color = getRgbColor();var num = getBeansNum();bleft2 = parseInt(Math.random() * 23)*50;btop2 = parseInt(Math.random() * 11)*50;if((btop2==150||btop2==400)&&bleft2>=300&&bleft2<=900){btop2 = btop2 +50*(Math.random()>=0.5? 1:(-1));}beans2.style.top = btop2 + \"px\";beans2.style.left = bleft2 + \"px\";beans2.style.backgroundColor = color[0];beans2.style.color = color[1];beans2.innerHTML = num;beans2.style.display = \"block\";}function showBeans3() {var color = getRgbColor();var num = getBeansNum();bleft3 = parseInt(Math.random() * 23)*50;btop3 = parseInt(Math.random() * 11)*50;if((btop3==150||btop3==400)&&bleft3>=300&&bleft3<=900){btop3 = btop3 +50*(Math.random()>=0.5? 1:(-1));}beans3.style.top = btop3 + \"px\";beans3.style.left = bleft3 + \"px\";beans3.style.backgroundColor = color[0];beans3.style.color = color[1];beans3.innerHTML = num;beans3.style.display = \"block\";}function showBeans4() {var color = getRgbColor();var num = getBeansNum();bleft4 = parseInt(Math.random() * 23)*50;btop4 = parseInt(Math.random() * 11)*50;if((btop4==150||btop4==400)&&bleft4>=300&&bleft4<=900){btop4 = btop4 +50*(Math.random()>=0.5? 1:(-1));}beans4.style.top = btop4 + \"px\";beans4.style.left = bleft4 + \"px\";beans4.style.backgroundColor = color[0];beans4.style.color = color[1];beans4.innerHTML = num;beans4.style.display = \"block\";}document.onkeydown = function (event) {var e = event || window.event || arguments.callee.caller.arguments[0];switch (true) {case e.keyCode == 13:if(startOrStop==0) {startOrStop=1;if (redDirection == 1 || redDirection == -1) {redTime = setInterval(redMoveLeft, redV);} else if (redDirection == 2 || redDirection == -2) {redTime = setInterval(redMoveTop, redV);}if(blueDirection==1||blueDirection==-1){blueTime= setInterval(blueMoveLeft, blueV);}else if(blueDirection==2||blueDirection==-2){blueTime= setInterval(blueMoveTop, blueV);}$(\"#btn1\").hide();$(\"#btn2\").show();}else if(startOrStop==1){startOrStop=0;clearInterval(redTime);clearInterval(blueTime);$(\"#btn2\").hide();$(\"#btn1\").show();}break;case e.keyCode == 37:if (redDirection != 1&&redDirection != -1) {redDirection = -1;redHeadChange();clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}else if(redDirection == -1){if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}else{if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}break;case e.keyCode == 39:if (redDirection != -1&&redDirection != 1) {redDirection = 1;redHeadChange();clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}else if(redDirection == 1){if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}else{if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveLeft, redV);}break;case e.keyCode == 38:if (redDirection != 2&&redDirection != -2) {redDirection = -2;redHeadChange();clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}else if(redDirection == -2){if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}else{if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}break;case e.keyCode == 40:if (redDirection != -2&&redDirection != 2) {redDirection = 2;redHeadChange();clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}else if(redDirection == 2){if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}else{if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;clearInterval(redTime);redTime = setInterval(redMoveTop, redV);}break;case e.keyCode == 107:if(document.getElementById(\"textV\").innerHTML<5){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)+1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;break;case e.keyCode == 109:if(document.getElementById(\"textV\").innerHTML>1){document.getElementById(\"textV\").innerHTML = parseInt(document.getElementById(\"textV\").innerHTML)-1;}redV = (6-document.getElementById(\"textV\").innerHTML)*50;break;case e.keyCode == 65:if (blueDirection != 1&&blueDirection != -1) {blueDirection = -1;blueHeadChange();clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}else if(blueDirection == -1){if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}else{if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}break;case e.keyCode == 68:if (blueDirection != -1&&blueDirection != 1) {blueDirection = 1;blueHeadChange();clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}else if(blueDirection == 1){if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}else{if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveLeft, blueV);}break;case e.keyCode == 87:if (blueDirection != 2&&blueDirection != -2) {blueDirection = -2;blueHeadChange();clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}else if(blueDirection == -2){if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}else{if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}break;case e.keyCode == 83:if (blueDirection != -2&&blueDirection != 2) {blueDirection = 2;blueHeadChange();clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}else if(blueDirection == 2){if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}else{if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;clearInterval(blueTime);blueTime = setInterval(blueMoveTop, blueV);}break;case e.keyCode == 71:if(document.getElementById(\"textVB\").innerHTML<5){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)+1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;break;case e.keyCode == 84:if(document.getElementById(\"textVB\").innerHTML>1){document.getElementById(\"textVB\").innerHTML = parseInt(document.getElementById(\"textVB\").innerHTML)-1;}blueV = (6-document.getElementById(\"textVB\").innerHTML)*50;break;}}function getRgbColor() {var rr = parseInt(Math.random()*(255));var gg = parseInt(Math.random()*(255));var bb = parseInt(Math.random()*(255));var color1 = \"rgb(\"+rr+\",\"+gg+\",\"+bb+\")\";var color2 = \"rgb(\"+(255-rr)+\",\"+(255-gg)+\",\"+(255-bb)+\")\";var colors = [color1,color2];return colors;}function getBeansNum() {var num = parseInt(Math.random()*9+1);switch (num){case 1:case 2:case 3:case 4:case 5:case 6:num = 1;break;case 7:case 8:num = 2;break;case 9:num = 3;break;default:num = 1;}return num;}function redHeadChange() {if(redDirection == 2){// 上document.getElementById(\"redHeadIn1\").style.top = \"30px\";document.getElementById(\"redHeadIn1\").style.left = \"-5px\";document.getElementById(\"redHeadIn2\").style.top = \"30px\";document.getElementById(\"redHeadIn2\").style.left = \"40px\";document.getElementById(\"redHeadIn3\").style.top = \"35px\";document.getElementById(\"redHeadIn3\").style.left = \"10px\";document.getElementById(\"redHeadIn4\").style.top = \"35px\";document.getElementById(\"redHeadIn4\").style.left = \"10px\";}else if(redDirection == -2){document.getElementById(\"redHeadIn1\").style.top = \"10px\";document.getElementById(\"redHeadIn1\").style.left = \"-5px\";document.getElementById(\"redHeadIn2\").style.top = \"10px\";document.getElementById(\"redHeadIn2\").style.left = \"40px\";document.getElementById(\"redHeadIn3\").style.top = \"-15px\";document.getElementById(\"redHeadIn3\").style.left = \"10px\";document.getElementById(\"redHeadIn4\").style.top = \"-15px\";document.getElementById(\"redHeadIn4\").style.left = \"10px\";}else if(redDirection == 1){document.getElementById(\"redHeadIn1\").style.top = \"-5px\";document.getElementById(\"redHeadIn1\").style.left = \"30px\";document.getElementById(\"redHeadIn2\").style.top = \"40px\";document.getElementById(\"redHeadIn2\").style.left = \"30px\";document.getElementById(\"redHeadIn3\").style.top = \"10px\";document.getElementById(\"redHeadIn3\").style.left = \"35px\";document.getElementById(\"redHeadIn4\").style.top = \"10px\";document.getElementById(\"redHeadIn4\").style.left = \"35px\";}else if(redDirection == -1){document.getElementById(\"redHeadIn1\").style.top = \"-5px\";document.getElementById(\"redHeadIn1\").style.left = \"10px\";document.getElementById(\"redHeadIn2\").style.top = \"40px\";document.getElementById(\"redHeadIn2\").style.left = \"10px\";document.getElementById(\"redHeadIn3\").style.top = \"10px\";document.getElementById(\"redHeadIn3\").style.left = \"-15px\";document.getElementById(\"redHeadIn4\").style.top = \"10px\";document.getElementById(\"redHeadIn4\").style.left = \"-15px\";}}function blueHeadChange() {if(blueDirection == 2){// 上document.getElementById(\"blueHeadIn1\").style.top = \"30px\";document.getElementById(\"blueHeadIn1\").style.left = \"-5px\";document.getElementById(\"blueHeadIn2\").style.top = \"30px\";document.getElementById(\"blueHeadIn2\").style.left = \"40px\";document.getElementById(\"blueHeadIn3\").style.top = \"35px\";document.getElementById(\"blueHeadIn3\").style.left = \"10px\";document.getElementById(\"blueHeadIn4\").style.top = \"35px\";document.getElementById(\"blueHeadIn4\").style.left = \"10px\";}else if(blueDirection == -2){document.getElementById(\"blueHeadIn1\").style.top = \"10px\";document.getElementById(\"blueHeadIn1\").style.left = \"-5px\";document.getElementById(\"blueHeadIn2\").style.top = \"10px\";document.getElementById(\"blueHeadIn2\").style.left = \"40px\";document.getElementById(\"blueHeadIn3\").style.top = \"-15px\";document.getElementById(\"blueHeadIn3\").style.left = \"10px\";document.getElementById(\"blueHeadIn4\").style.top = \"-15px\";document.getElementById(\"blueHeadIn4\").style.left = \"10px\";}else if(blueDirection == 1){document.getElementById(\"blueHeadIn1\").style.top = \"-5px\";document.getElementById(\"blueHeadIn1\").style.left = \"30px\";document.getElementById(\"blueHeadIn2\").style.top = \"40px\";document.getElementById(\"blueHeadIn2\").style.left = \"30px\";document.getElementById(\"blueHeadIn3\").style.top = \"10px\";document.getElementById(\"blueHeadIn3\").style.left = \"35px\";document.getElementById(\"blueHeadIn4\").style.top = \"10px\";document.getElementById(\"blueHeadIn4\").style.left = \"35px\";}else if(blueDirection == -1){document.getElementById(\"blueHeadIn1\").style.top = \"-5px\";document.getElementById(\"blueHeadIn1\").style.left = \"10px\";document.getElementById(\"blueHeadIn2\").style.top = \"40px\";document.getElementById(\"blueHeadIn2\").style.left = \"10px\";document.getElementById(\"blueHeadIn3\").style.top = \"10px\";document.getElementById(\"blueHeadIn3\").style.left = \"-15px\";document.getElementById(\"blueHeadIn4\").style.top = \"10px\";document.getElementById(\"blueHeadIn4\").style.left = \"-15px\";}}function mouseChange() {if(mouseFlag%2==0) {$(\"#redHeadIn3\").show();$(\"#redHeadIn4\").hide();$(\"#blueHeadIn3\").hide();$(\"#blueHeadIn4\").show();}else{$(\"#redHeadIn3\").hide();$(\"#redHeadIn4\").show();$(\"#blueHeadIn3\").show();$(\"#blueHeadIn4\").hide();}mouseFlag++;}function eyeChange() {if(eyeFlag%2==0) {$(\"#redHeadIn1\").css({\"backgroundColor\":\"white\",\"border\": \"5px groove black\"});$(\"#redHeadIn2\").css({\"backgroundColor\":\"white\",\"border\": \"5px groove black\"});$(\"#blueHeadIn1\").css({\"backgroundColor\":\"yellow\",\"border\": \"5px groove black\"});$(\"#blueHeadIn2\").css({\"backgroundColor\":\"yellow\",\"border\": \"5px groove black\"});}else{$(\"#redHeadIn1\").css({\"backgroundColor\":\"red\",\"border\": \"3px ridge black\"});$(\"#redHeadIn2\").css({\"backgroundColor\":\"red\",\"border\": \"3px ridge black\"});$(\"#blueHeadIn1\").css({\"backgroundColor\":\"blue\",\"border\": \"3px ridge black\"});$(\"#blueHeadIn2\").css({\"backgroundColor\":\"blue\",\"border\": \"3px ridge black\"});}eyeFlag++;}</script></body></html>