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

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

时间：2020-01-10 22:34:14

前言

这是我在多年前初学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><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, 愿与君共勉!

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。