Home > Developer > JavaScript

Javascript full version

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

Complete and object-oriented full JavaScript version

Author sunxing007 reprinted please note from: http://blog.csdn.net/sunxing007

Run code

 <HTML> <br/> <pead> <br/> <title> snake v2.4 </title> <br/> <style> <br/> body {<br/> font-size: 9pt; <br/>}< br/> table {<br/> border-collapse: collapse; <br/> border: solid #333 1px; <br/>}< br/> TD {<br/> Height: 10px; <br/> width: 10px; <br/> font-size: 0px; <br/>}< br/>. filled {<br/> background-color: blue; <br/>}< br/> </style> <br/> </pead> <br/> <SCRIPT> <br/> function $ (ID) {return document. Getelementbyid (ID );} <br/> /*********************************** * ************************ <br/> * JavaScript greedy v2.4 <br/> <br/> * Author: sunxing007 05/14/2009 <br/> * reprinted please indicate from http://blog.csdn.net/sunxing007 thank you! <Br/> * v2.4 indicates that the color of the snake can move as the snake advances. <br/> **************** **************************************** * *****/<br/> // Snake type <br/> var snake ={< br/> TBL: null, <br/>/** <br/> * Body: Snake body, each section of the array containing snakes, <br/> * Data Structure {X: x0, Y: y0, color: color0 },< br/> * X, Y represents coordinates, and color represents colors <br/> **/<br/> body: [], <br/> // the direction of the current movement. The value 0, 1, 2, and 3 indicate the direction of the current movement. You can change it by pressing the arrow key on the keyboard. <br/> direction: 0, <br/> // timer <br/> Timer: NULL, <br/> // speed <br /> Speed: 250, <br/> // whether it has been paused <br/> paused: True, <br/> // number of rows <br/> rowcount: 30, <br/> // Number of columns <br/> colcount: 30, <br/> // initialization <br/> init: function () {<br/> var colors = ['red', 'Orange ', 'yellow', 'green', 'Blue', 'purple ',' # CCC ']; <br/> This. TBL = $ ("Main"); <br/> var x = 0; <br/> var y = 0; <br/> var colorindex = 0; <br/> // generate the initial direction of movement <br/> This. direction = math. floor (math. random () * 4); <br/> // construct a table <B R/> for (var row = 0; row <this. rowcount; row ++) {<br/> var TR = This. TBL. insertrow (-1); <br/> for (VAR Col = 0; Col <this. colcount; Col ++) {<br/> var TD = tr. insertcell (-1); <br/>}< br/> // 20 loose nodes are generated. <br/> for (VAR I = 0; I <10; I ++) {<br/> X = math. floor (math. random () * This. colcount); <br/> Y = math. floor (math. random () * This. rowcount); <br/> colorindex = math. floor (math. random () * 7); <br/> If (! This. iscellfilled (x, y) {<br/> This. TBL. rows [Y]. cells [X]. style. backgroundcolor = colors [colorindex]; <br/>}< br/> // generate a snake header <br/> while (true) {<br/> X = math. floor (math. random () * This. colcount); <br/> Y = math. floor (math. random () * This. rowcount); <br/> If (! This. iscellfilled (x, y) {<br/> This. TBL. rows [Y]. cells [X]. style. backgroundcolor = "black"; <br/> This. body. push ({X: X, Y: Y, color: 'black'}); <br/> break; <br/>}< br/> This. paused = true; <br/> // Add a keyboard event <br/> document. onkeydown = function (e) {<br/> If (! E) E = Window. event; <br/> switch (E. keycode | E. which | E. charcode) {<br/> case 13: {<br/> If (snake. paused) {<br/> snake. move (); <br/> snake. paused = false; <br/>}< br/> else {<br/> // if not paused, stop moving <br/> snake. pause (); <br/> snake. paused = true; <br/>}< br/> break; <br/>}< br/> case 37: {// left <br/> // stop the snake from going backwards <br/> If (snake. direction = 1) {<br/> break; <br/>}< br/> snake. direction = 3; <br/> break; <BR/>}< br/> case 38: {// up <br/> // The shortcut key works here <br/> If (event. ctrlkey) {<br/> snake. speedup (-20); <br/> break; <br/>}< br/> If (snake. direction = 2) {// stop the snake from going backwards <br/> break; <br/>}< br/> snake. direction = 0; <br/> break; <br/>}< br/> case 39: {// right <br/> If (snake. direction = 3) {// stop the snake from going backwards <br/> break; <br/>}< br/> snake. direction = 1; <br/> break; <br/>}< br/> case 40: {// down <br/> If (event. ctrlkey) {<Br/> snake. speedup (20); <br/> break; <br/>}< br/> If (snake. direction = 0) {// stop the snake from going backwards <br/> break; <br/>}< br/> snake. direction = 2; <br/> break; <br/>}< br/> }, <br/> // move <br/> move: function () {<br/> This. timer = setinterval (function () {<br/> snake. erase (); <br/> snake. moveonestep (); <br/> snake. paint (); <br/>}, this. speed); <br/>}, <br/> // move a body <br/> moveonestep: Function () {<Br/> If (this. checknextstep () =-1) {<br/> clearinterval (this. timer); <br/> alert ("game over! /Npress restart to continue. "); <br/> return; <br/>}< br/> If (this. checknextstep () = 1) {<br/> VaR _ point = This. getnextpos (); <br/> VaR _ x = _ point. x; <br/> VaR _ y = _ point. y; <br/> VaR _ color = This. getcolor (_ x, _ y); <br/> This. body. unshift ({X: _ x, y: _ y, color: _ color}); <br/> // you have eaten a food, therefore, a new food is generated. <br/> This. generatedood (); <br/> return; <br/>}< br/> // window. status = This. tostring (); <br/> var point = This. getnextpos (); <br/> // retain the color of the first section <br/> var color = This. body [0]. color; <br/> // move the color forward <br/> for (VAR I = 0; I <this. body. length-1; I ++) {<br/> This. body [I]. color = This. body [I + 1]. color; <br/>}< br/> // subtract one section from the end of the snake, and add one section to show the effect of snake forward <br/> This. body. pop (); <br/> This. body. unshift ({X: Point. x, Y: Point. y, color: Color}); <br/> // window. status = This. tostring (); <br/>}, <br/> // find the next step. <br/> pause: functio N () {<br/> clearinterval (snake. timer); <br/> This. paint (); <br/>}, <br/> getnextpos: function () {<br/> var x = This. body [0]. x; <br/> var y = This. body [0]. y; <br/> var color = This. body [0]. color; <br/> // up <br/> If (this. direction = 0) {<br/> Y --; <br/>}< br/> // right <br/> else if (this. direction = 1) {<br/> X ++; <br/>}< br/> // downward <br/> else if (this. direction = 2) {<br/> Y ++; <br/>}< br/> // left <br/> Else {<br/> X --; <br/>}< br/> // return a coordinate <br/> return {X: X, Y: y }; <br/>}, <br/> // check what the next step is to be moved. <br/> checknextstep: function () {<br/> var point = This. getnextpos (); <br/> var x = point. x; <br/> var y = point. y; <br/> If (x <0 | x> = This. colcount | Y <0 | Y> = This. rowcount) {<br/> return-1; // touch the boundary and the game ends <br/>}< br/> for (VAR I = 0; I <this. body. length; I ++) {<br/> If (this. body [I]. X = x & this. body [I]. y = y) {<br/> Return-1; // when you touch your own body, the game ends <br/>}< br/> If (this. iscellfilled (x, y) {<br/> return 1; // There is something <br/>}< br/> return 0; // open space <br/> }, <br/> // erase the snake <br/> erase: function () {<br/> for (VAR I = 0; I <this. body. length; I ++) {<br/> This. erasedot (this. body [I]. x, this. body [I]. y); <br/>}< br/>}, <br/> // draw a snake body <br/> paint: function () {<br/> for (VAR I = 0; I <this. body. length; I ++) {<br/> This. paintdot (this. body [I]. x, this. body [I]. y, this. body [I]. color); <br/>}< br/>}, <br/> // erase a section <br/> erasedot: function (x, y) {<br/> This. TBL. rows [Y]. cells [X]. style. backgroundcolor = ""; <br/>}, <br/> paintdot: function (X, Y, color) {<br/> This. TBL. rows [Y]. cells [X]. style. backgroundcolor = color; <br/>}, <br/> // obtain the color of the coordinate. <br/> getcolor: function (x, y) {<br/> return this. TBL. rows [Y]. cells [X]. style. backgroundcolor; <br/> },< Br/> // used for debugging <br/> tostring: function () {<br/> var STR = ""; <br/> for (VAR I = 0; I <this. body. length; I ++) {<br/> STR + = "X:" + this. body [I]. X + "Y:" + this. body [I]. Y + "color:" + this. body [I]. color + "-"; <br/>}< br/> return STR; <br/> }, <br/> // check whether a coordinate point is filled <br/> iscellfilled: function (x, y) {<br/> If (this. TBL. rows [Y]. cells [X]. style. backgroundcolor = "") {<br/> return false; <br/>}< br/> Return true; <br/>}, <br/> // restart <br/> restart: function () {<br/> If (this. timer) {<br/> clearinterval (this. timer); <br/>}< br/> for (VAR I = 0; I <this. rowcount; I ++) {<br/> This. TBL. deleterow (0); <br/>}< br/> This. body = []; <br/> This. init (); <br/> This. speed = 250; <br/>}, <br/> // acceleration <br/> speedup: function (time) {<br/> If (! This. paused) {<br/> If (this. speed + time <10 | this. speed + time> 2000) {<br/> return; <br/>}< br/> This. speed + = time; <br/> This. pause (); <br/> This. move (); <br/>}< br/>}, <br/> // produce food. <Br/> generatedood: function () {<br/> var colors = ['red', 'Orange ', 'yellow', 'green', 'Blue ', 'purple ',' # CCC ']; <br/> var x = math. floor (math. random () * This. colcount); <br/> var y = math. floor (math. random () * This. rowcount); <br/> var colorindex = math. floor (math. random () * 7); <br/> If (! This. iscellfilled (x, y) {<br/> This. TBL. rows [Y]. cells [X]. style. backgroundcolor = colors [colorindex]; <br/>}< br/> }; <br/> </SCRIPT> <br/> <body onload = "Snake. init (); "> <br/> /********************************* * ************************* <br/> * JavaScript v2.4 <br/> * Author: sunxing007 05/14/2009 <br/> * reprinted please indicate from <a href = "http://blog.csdn.net/sunxing007"> http://blog.csdn.ne T/sunxing007 </a> thank you! <Br/> ******************************** ****************************/<br/> <table id = "Main" border = "1" cellspacing = "0" cellpadding = "0"> </table> <br/> <input type = "button" id =" BTN "value =" Start/pause "/> click the button on the left or press enter to start/stop the game <br/> <input type =" button "id =" Reset "value =" Start again "/> <br/> <input type =" button "id =" upspeed "value =" acceleration "/> click the button on the left or press Ctrl + ← to accelerate <br/> <input type = "button" id = "downspeed" value = ""/> click the left button or press Ctrl + ← slowdown <br/> <SCRIPT> <br/> $ ('btn '). onclick = function () {<br/> If (snake. paused) {<br/> snake. move (); <br/> snake. paused = false; <br/>}< br/> else {<br/> snake. pause (); <br/> snake. paused = true; <br/>}< br/>}; <br/> $ ("reset "). onclick = function () {<br/> snake. restart (); <br/> This. blur (); <br/>}; <br/> $ ("upspeed "). onclick = function () {<br/> snake. speedup (-20); <br/>}; <br/> $ ("downspeed "). onclick = function () {<br/> snake. speedup (20); <br/>}; <br/> </SCRIPT> <br/> </body> <br/> </ptml>

Javascript, JS, JS, JS object-oriented, JavaScript magnifiers, JS magnifiers, JavaScript drawing, JavaScript games, JavaScript code sets, JavaScript maps, JavaScript writing RPG games, JavaScript animation, JavaScript drawing, JavaScript objects, JavaScript Functions, typical JavaScript example: javascript object-oriented

 

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.

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

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