JavaScript Game: Greedy snake

Last Update:2017-02-28 Source: Internet

Author: User

Tags array setinterval window

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Javascript

It seems to be the fastest speed ...

Tell me the principle:
Is the use of DOM.
<span> a snake, from snake head to snake tail </span>
What do you think of that? The snake tail is the first element of this span, and the snake head is the last element. Of course, before and after the exchange is also possible.

Then build a two-dimensional array, when it is the x,y coordinates of the map.
Then, each snake also has its x,y coordinates, which are connected to the two-dimensional array above.
This will get the location of each section of the snake, to see if there is no exceeding the array upper or lower bounds, gameover.
But I am here to experience speed, without this gameover condition, only the snake head and the snake body collided with Gameover.

The last one is the closing.
The snake is going to keep moving, so keep adding <div> I'm a snake head </div> a snake head. The left top value is to correspond to the map just created.
and delete that <div> I'm the snake tail </div> element in the span above.

Then set the second element in the span: I'm a snake. So the second element of the snake's head becomes a snake.
Then set the last element in the span: I am the tail of the snake. In this way, it is the snake's body, it becomes the tail of the snake.

Finish ^-^

<!--
Http://futurecom.vze.com
Http://dewin.vze.com
Http://dewin.126.com
http://dewin.tk

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

<body>

var Rows = 20;
var Cells = 30;

var MAPW = 20;
var maph = 20;

var borderw = 5;
var ospeed = 1
var Scores = 0;

var snakeheakcolor = ' Blue ';
var snakebodycolor = ' Orange ';
var snaketailcolor = ' Yellow ';

function Creatmainmap () {
Mainmap = [];
for (Var y=0;y<rows;y++) {
Mainmap[y] = [];
for (Var x=0;x<cells;x++) {
Mainmap[y][x] = ';
}
}
}

function Createfood () {
var x = parseint (Math.random () *cells);
var y = parseint (Math.random () *rows);
if (mainmap[y][x] = = ") {
score.innerhtml = scores++;
Base.insertadjacenthtml ("BeforeEnd", "<div style= ' position:absolute;left:" +x*mapw+ "; Top:" +y*MapH+ "; width:" + mapw+ "; Height:" +maph+ "; background:red; ' > ");
Mainmap[y][x] = ' F ';
}
else Createfood ();
}

function Createsnake () {
Base.insertadjacenthtml ("BeforeEnd", "<span x=" +snakex+ "y=" +snakey+ "style= ' Position:absolute;left": "+SnakeX* mapw+ "; Top:" +snakey*maph+ "; width:" +mapw+ "; Height:" +maph+ "; background:" +snakeheakcolor+ "; ' ></span> ");
Mainmap[snakey][snakex] = ' S ';
}

var Gox = 0;
var GoY = 0;
var gotime = 0;

function Dir (x,y) {
Gox = (-gox==x)? gox:x;
GoY = (-goy==y)? Goy:y;
if (! Gotime) Gotime = SetInterval (move,ospeed);
}

Function Move () {
Snakex = (snakex+gox<0)? Cells-1: ((snakex+gox>cells-1)? 0:snakex+gox);
Snakey = (snakey+goy<0)? Rows-1: ((snakey+goy>rows-1)? 0:snakey+goy);
if (mainmap[snakey][snakex] = = ') {
allsnakes[allsnakes.length-1].style.background = Snakebodycolor;
mainmap[allsnakes[0].y][allsnakes[0].x] = ';
allsnakes[0].removenode (TRUE);
if (allsnakes.length>1) allsnakes[0].style.background = Snaketailcolor;
createsnake ();
return;
}
if (mainmap[snakey][snakex] = = ' F ') {
allsnakes[allsnakes.length-1].style.background = Snakebodycolor;
allfoods[0].removenode (TRUE);
if (allsnakes.length>1) allsnakes[0].style.background = Snaketailcolor;
createsnake ();
createfood ();
return;
}
if (mainmap[snakey][snakex] = = ' S ') {
if (confirm (' Game over,try again? ") window.location.reload ());
else window.close ()
}
}

Function Document.onkeydown () {
switch (event.keycode) {
case 34:clearinterval (gotime); ospeed+=3; Gotime=setinterval (move,ospeed); break;//speed up
case 33:if (ospeed-2>0) {clearinterval (GoTime); o speed-=2; Gotime=setinterval (move,ospeed)};break;//speed down
case 192:alert (ospeed), break;//speed down
Case 37:dir ( -1,0); Break;//left
case 38:dir (0,-1); Break;//up
case 39:dir (1,0); Break;//right
case 40:dir (0,1); Break;//down
case 83:clearinterval (gotime); Gotime=0;break;
}
}

function Window.onload () {
var mainmapwidth = 2*BORDERW+CELLS*MAPW;
var mainmapheight = 2*borderw+rows*maph;
Document.body.innerHTML + = "<span id= ' Base ' style= ' position:absolute;left:" + ( Document.body.clientwidth-mainmapwidth)/2+ "; Top:" + (Document.body.clientheight-mainmapheight)/2+ "; width:" + mainmapwidth+ "; Height:" +mainmapheight+ "; border:" +borderw+ "inset #0000CC; ></span><br><br><span id= ' Score ' ></span><br><br><font color=red >page down to the Speed down<br>page up to Speed up</font> ";
Snakex = parseint (Math.random () *cells);
Snakey = parseint (Math.random () *rows);
Allsnakes = Base.all.tags (' SPAN ');
Allfoods = Base.all.tags (' DIV ');
Window.focus ();
Creatmainmap ();
Createsnake ();
Createfood ();
}

</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More