Jquery hands-snake and jquery hands-on
I remember that I didn't understand anything when I first came out of work.
My boss asked me to write a function using Jquery. I told my boss why I was A. net programmer... Our boss wrote it to me later! Now I know how many things net programmers need... You know.
Well, the following is a small example of a greedy snake I wrote using Jquery. I am sending Code directly. If it is not well written, please advise.
/* Author: ten days use: Snake Game mailbox: 284485094@qq.com */(function ($) {$. fn. game1 = function (options) {var mainDiv = $ (this); var defaults = {speed: 150, // speed leftSteps: 50, topSteps: 30}; var opts = $. extend (defaults, options); // initialize the number of physical blocks var size = 5; // default value: the first and last squares var topItem = 0, lastItem = size-1; // coordinate Array var itemLefts = new Array (); var itemTops = new Array (); // ordered Array var itemIndex = new Array (); // initialize the food bit Set var foodLeft = 0, foodTop = 0; // initialize the tail position var tailLeft = 0, tailTop = 0; // initialize the grid size [px] var stepsWidth = $ (window ). width ()/defaults. leftSteps; var stepsHeight = $ (window ). height ()/defaults. topSteps; // initialize the first grid position var itemLeft = defaults. leftSteps/2 * stepsWidth; var itemTop = defaults. topSteps/2 * stepsHeight; // some common functions var mFun = {addFood: function () {foodLeft = (Math. floor (Math. random () * Defaults. leftSteps) * stepsWidth; foodTop = (Math. floor (Math. random () * defaults. topSteps) * stepsHeight; if ($ (". itemfood "). length> 0) $ (". itemfood "detail .css ({left: foodLeft, top: foodTop}); else mainDiv. append (mFun. getHtml ("food", stepsWidth, stepsHeight, foodLeft, foodTop, "#000") ;}, getTopIndex: function () {var lastIndex = itemIndex [size-1]; for (var I = size-1; I> 0; I --) {item Index [I] = itemIndex [I-1];} itemIndex [0] = lastIndex; return itemIndex [0];}, getHtml: function (I, stepsWidth, stepsHeight, itemLeft, itemTop, borderColor) {var newItem = "<div class = \" item "; newItem + = I; newItem + =" \ "style = \" position: absolute; width: "; newItem + = stepsWidth-3; newItem + =" px; height: "; newItem + = stepsHeight-3; newItem + =" px; left :"; newItem + = itemLeft; newItem + = "px; Top: "; newItem + = itemTop; newItem + =" px; border: 1px solid "; newItem + = borderColor; newItem + ="; background-color :"; newItem + = borderColor; newItem + = "; \"> "; newItem + =" </div> "; return newItem ;}, checkKill: function (_ itemleft, _ itemtop) {var fag = true; if (_ itemleft <0) fag = false; else if (_ itemleft> $ (window ). width () fag = false; else if (_ itemtop <0) fag = false; else if (_ itemt Op> $ (window). height () fag = false; if (! Fag) {alert ("game over! "); Location. reload () ;}}// Add the original square for (var I = 0; I <size; I ++) {itemLefts [I] = itemLeft + (I * stepsWidth); itemTops [I] = itemTop; // Add an original square // itemTops [I], I = 0? "Red": "#000" mainDiv. append (mFun. getHtml (I, stepsWidth, stepsHeight, itemLefts [I], itemTops [I], "#000"); itemIndex [I] = I ;} tailLeft = itemLefts [size-1]; tailTop = itemTops [size-1]; // Add a food mFun. addFood (); // initialization direction var direction = "left"; // bind the keyboard to press the event $ ("html "). keydown (function (event) {switch (event. keyCode) {case 37: // left if (direction! = "Right") direction = "left"; break; case 39: // right if (direction! = "Left") direction = "right"; break; case 38: // top if (direction! = "Bottom") direction = "top"; break; case 40: // bottom if (direction! = "Top") direction = "bottom"; break; default: break ;}}); // move var mobile = setInterval (function () {topItem = mFun. getTopIndex (); // tailLeft = itemLefts [topItem]; tailTop = itemTops [topItem]; switch (direction) {case "left ": itemLefts [topItem] = itemLeft-stepsWidth; itemTops [topItem] = itemTop; break; case "right": itemLefts [topItem] = itemLeft + stepsWidth; itemTops [topItem] = itemTop; break; case "top": itemLefts [topItem] = itemLeft; itemTops [topItem] = itemTop-stepsHeight; break; case "bottom": itemLefts [topItem] = itemLeft; itemTops [topItem] = itemTop + stepsHeight; break; default: break;} itemLeft = itemLefts [topItem]; itemTop = itemTops [topItem]; mFun. checkKill (itemLeft, itemTop); $ (". item "+ topItem).css ({left: itemLefts [topItem], top: itemTops [topItem]}); // if (Math. abs (itemLeft-foodLeft) <1 & Math. abs (itemTop-foodTop) <1) {size ++; mainDiv. append (mFun. getHtml (size-1, stepsWidth, stepsHeight, tailLeft, tailTop, "#000"); itemLefts [size-1] = tailLeft; itemTops [size-1] = tailTop; itemIndex [size-1] = size-1; mFun. addFood () ;}, defaults. speed) ;}}) (jQuery );
Full code: Baidu cloud connection pan.baidu.com/s/1jHrBrjK password: db9i