[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖

[转载代码] JS版贪吃蛇

转自:http://topic.csdn.net/u/20110924/03/4FA45766-C558-4654-939F-A43DDA1339F1.html

本来javascript脚本就是用来辅助网页浏览的,可以单独写成文件,也可以写在网页文件里
建议看看标记类语言的书籍,如html的写法规则

TOP

源码在网页里嵌着我把它拿出来
  1. function Snake(canvas){
  2. this.canvas = canvas;
  3. this.length = 0;
  4. this.direction = 'down';
  5. this.body = [],
  6. this.head = function(){
  7. return this.length == 0 ? null : this.body[0];
  8. };
  9. this.isAlive = true;
  10. this.onDie = null;
  11. this.onEat = null;
  12. this.speed = 300;
  13. this.auto = null;
  14. this.turned = false;
  15. this.turn = function(d){
  16. if(this.turned){
  17. return;
  18. }else{
  19. switch(d){
  20. case 'left':
  21. case 'right':
  22. if(this.direction == 'left' || this.direction == 'right'){
  23. return;
  24. }
  25. break;
  26. case 'up':
  27. case 'down':
  28. if(this.direction == 'up' || this.direction == 'down'){
  29. return;
  30. }
  31. break;
  32. }
  33. this.direction = d;
  34. this.turned = true;
  35. }
  36. }
  37. this.turnLeft = function(){this.turn('left');};
  38. this.turnRight = function(){this.turn('right')};
  39. this.turnUp = function(){this.turn('up')};
  40. this.turnDown = function(){this.turn('down')};
  41. this.moveTo = function(x, y){
  42. this.canvas.clsCanvas(this);
  43. this.body.pop();
  44. this.length--;
  45. this.grow(x, y);
  46. this.canvas.drawSnake(this);
  47. this.turned = false;
  48. };
  49. this.grow = function(bX, bY){
  50. var head = {
  51. x : bX,
  52. y : bY
  53. };
  54. this.body.unshift(head);
  55. this.length++;
  56. };
  57. this.stepWalk = function(){
  58. if(!this.isAlive){return;}
  59. if(!this.head()){
  60. throw new Error('this snake is not initialized');
  61. }
  62. var nextBlock, head = this.head();
  63. var nX = head.x, nY = head.y;
  64. switch(this.direction){
  65. case 'down':
  66. nY = head.y + 1;
  67. break;
  68. case 'up':
  69. nY = head.y - 1;
  70. break;
  71. case 'left':
  72. nX = head.x - 1;
  73. break;
  74. case 'right':
  75. nX = head.x + 1;
  76. break;
  77. }
  78. if(nX < 1 || nY < 1 || nX > canvas.width || nY > canvas.height || this.contains(nX, nY)){
  79. this.isAlive = false;
  80. if(this.onDie){this.onDie();}
  81. }else{
  82. nextBlock = this.canvas.getBlock(nX, nY);
  83. if(this.canvas.isFoodBlock(nextBlock)){
  84. nextBlock.setAttribute('food',''); // the food has been eaten
  85. this.grow(nX, nY);
  86. if(this.onEat){this.onEat();}
  87. var t = this;
  88. setTimeout(function(){t.stepWalk();},80 );
  89. }else{
  90. this.moveTo(nX, nY);
  91. }
  92. }
  93. };
  94. this.autoWalk = function(){
  95. var snake = this;
  96. this.auto = setInterval(function(){
  97. if(snake.isAlive){
  98. snake.stepWalk();
  99. }else{
  100. clearInterval(snake.auto);
  101. }
  102. }, this.speed );
  103. };
  104. this.contains = function(x,y){
  105. var len = this.length, snakeBody = this.body, b;
  106. for(var i=0;i<len;i++){
  107. b = snakeBody[i];
  108. if(b.x == x && b.y == y){
  109. return true;
  110. }
  111. }
  112. return false;
  113. };
  114. this.init = function(length){
  115. if(length<this.canvas.height){
  116. for(var i=0; i<length;i++){
  117. this.grow(1, i+1);
  118. }
  119. };
  120. this.canvas.drawSnake(this);
  121. this.canvas.createFood();
  122. },
  123. this.pause = function(){
  124. if(this.auto){
  125. clearInterval(this.auto);
  126. this.auto = null;
  127. }
  128. };
  129. }
  130. function SnakeCanvas(div){
  131. this.target = div;
  132. this.createView();
  133. }
  134. SnakeCanvas.prototype = {
  135. width: 20,
  136. height: 16,
  137. currentSnake : null,
  138. createView : function(){
  139. var i = 0, span;
  140. addClass(this.target, 'target');
  141. while(i < 320){
  142. span = document.createElement('span');
  143. span.id = 'span_' + (++i);
  144. addClass(span, 'blocks');
  145. this.target.appendChild( span );
  146. }
  147. },
  148. getBlock : function(x, y){
  149. return document.getElementById('span_' + (y ? ((y-1) * this.width + x) : (x+1)));
  150. },
  151. activateBlock : function(block){
  152. block.setAttribute('act', 'true');
  153. addClass(block, 'snake-body');
  154. },
  155. inActivateBlock: function(block){
  156. block.setAttribute('act', '');
  157. removeClass(block, 'snake-body');
  158. },
  159. switchBlock: function(block){
  160. var active = block.getAttribute('act');
  161. if(active){
  162. this.inActivateBlock(block);
  163. }else{
  164. this.activateBlock(block);
  165. }
  166. },
  167. isFoodBlock: function(block){
  168. return !!(block.getAttribute('food'));
  169. },
  170. createFood : function(){
  171. var posX = 0, posY = 0, done = false, block;
  172. while( !done){
  173. posX = Math.floor(Math.random() * (this.width + 1));
  174. posY = Math.floor(Math.random() * (this.height + 1));
  175. if(posX == 0){ posX = 1;} if(posY == 0){ posY = 1;}
  176. block = this.getBlock(posX, posY);
  177. if(!this.currentSnake || (!this.currentSnake.contains(posX, posY))){
  178. block.setAttribute('food', 'true');
  179. this.switchBlock(block);
  180. done = true;
  181. }
  182. }
  183. },
  184. clsCanvas : function(snake){
  185. var snakeBlock, i = 0;
  186. if(snake){
  187. for(;i<snake.length;i++){
  188. snakeBlock = snake.body[i];
  189. this.inActivateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
  190. }
  191. }else{
  192. while(i< this.width * this.height){
  193. this.inActivateBlock(this.getBlock(i));
  194. }
  195. }
  196. },
  197. drawSnake : function(snake){
  198. var snakeBlock;
  199. for(var i=0;i<snake.length;i++){
  200. snakeBlock = snake.body[i];
  201. this.activateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
  202. }
  203. this.currentSnake = snake;
  204. }
  205. };
  206. //---------------------------//
  207. function trim(text){
  208. var rnotwhite = /\S/,
  209. // Used for trimming whitespace
  210. trimLeft = /^\s+/,
  211. trimRight = /\s+$/;
  212. // IE doesn't match non-breaking spaces with \s
  213. if ( rnotwhite.test( "\xA0" ) ) {
  214. trimLeft = /^[\s\xA0]+/;
  215. trimRight = /[\s\xA0]+$/;
  216. }
  217. return text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
  218. }
  219. function addClass(elem, className){
  220. var setClass;
  221. if ( elem.nodeType === 1 ) {
  222. if ( !elem.className ) {
  223. elem.className = className;
  224. } else {
  225. setClass = " " + elem.className + " ";
  226. if ( !~setClass.indexOf( " " + className + " " ) ) {
  227. setClass += className + " ";
  228. }
  229. elem.className = trim(setClass);
  230. }
  231. }
  232. }
  233. function removeClass(elem, value){
  234. var className;
  235. if ( elem.nodeType === 1 && elem.className ) {
  236. if ( value ) {
  237. className = (" " + elem.className + " ").replace( /[\n\t\r]/g, " " );
  238. className = className.replace(" " + value + " ", " ");
  239. elem.className = trim( className );
  240. } else {
  241. elem.className = "";
  242. }
  243. }
  244. }
  245. function keyDown(e){
  246. if(!snake || !snake.isAlive) {
  247. return;
  248. }
  249. e=e||window.event;
  250. var keyCode = e.keyCode||e.which||e.charCode;
  251. switch(keyCode){
  252. case 37://左
  253. snake.turnLeft();
  254. break;
  255. case 38://上
  256. snake.turnUp();
  257. break;
  258. case 39://右
  259. snake.turnRight();
  260. break;
  261. case 40://下
  262. snake.turnDown();
  263. break;
  264. case 80://p 暂停or开始
  265. case 229:
  266. if(snake.auto){
  267. snake.pause();
  268. }else{
  269. snake.autoWalk();
  270. }
  271. break;
  272. }
  273. }
  274. if(document.attachEvent){
  275. document.attachEvent('onkeydown', keyDown);
  276. }else if(document.addEventListener){
  277. document.addEventListener('keydown', keyDown, false);
  278. }
  279. </SCRIPT>
  280. <STYLE>DIV {
  281. MARGIN: 20px auto
  282. }
  283. .target {
  284. BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 400px; DISPLAY: block; HEIGHT: 320px; OVERFLOW: hidden; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid
  285. }
  286. .blocks {
  287. BORDER-BOTTOM: #ddd 1px dotted; BORDER-LEFT: #ddd 1px dotted; WIDTH: 18px; DISPLAY: block; FLOAT: left; HEIGHT: 18px; BORDER-TOP: #ddd 1px dotted; BORDER-RIGHT: #ddd 1px dotted
  288. }
  289. .snake-body {
  290. BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; BACKGROUND-COLOR: #111; BORDER-TOP-STYLE: solid; BORDER-LEFT-STYLE: solid
  291. }
  292. </STYLE>
  293. <META name=GENERATOR content="MSHTML 8.00.7601.17537"></HEAD>
  294. <BODY>
  295. <H1>Snake</H1>
  296. <DIV id=t></DIV>
  297. <DIV>您的得分是:<SPAN id=s>0</SPAN></DIV>
  298. <DIV>操作提示:按上下左右键操作,按 P 键暂停或继续 </DIV>
  299. <SCRIPT>
  300. var canvas = new SnakeCanvas( document.getElementById('t') );
  301. var snake = new Snake( canvas );
  302. var score = 0, initSpeed = snake.speed;
  303. snake.onDie = function(){
  304. alert('game over');
  305. };
  306. snake.onEat = function(){
  307. snake.canvas.createFood();
  308. score++;
  309. var speed = initSpeed;
  310. if(score % 5 == 0){
  311. speed -= 10;
  312. }
  313. if(speed < 100){
  314. speed = 100;
  315. }
  316. snake.speed = speed;
  317. document.getElementById('s').innerHTML = score * 100 ;
  318. };
  319. snake.init(3);
  320. snake.autoWalk();
  321. // snake.pause();
复制代码

TOP

回复 2# acaigg


附件里面的不是吗?

TOP

我以为是发原码呀,不好玩。

TOP

返回列表