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

2022-11-13 07:34:27

前言

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

效果演示

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

代码

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

引入文件

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

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

<!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>

完整版注释链接

链接: 贪吃蛇双人对战版.

后记

可在评论区留下您的读后感, 所有提问均会定期回复, 或者添加我的微信并备注CSDN, 愿与君共勉!
用javascript+jquery编写的小游戏-贪吃蛇(双人对战版)

上一篇：JavaScript 简版-菜鸟中的菜鸟2


下一篇：javascript笔记——登录表单验证