JavaScript Game: Greedy snake

Source: Internet
Author: User
Tags array setinterval window
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


Copyright (c) 1998-2003 Dewin All rights reserved

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

<body>

<script>

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>



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.