JS版贪吃蛇

HAT

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

acaigg

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

HAT

回复 2# acaigg


附件里面的不是吗？

yunzhong

源码在网页里嵌着我把它拿出来

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.                
     
142.                 while(i < 320){
     
143.                         span = document.createElement('span');
     
144.                         span.id = 'span_' + (++i);
     
145.                         addClass(span, 'blocks');
     
146.                         this.target.appendChild( span );
     
147.                 }
     
148.         },
     
149.         getBlock : function(x, y){
     
150.                 return document.getElementById('span_' + (y ? ((y-1) * this.width + x) : (x+1)));
     
151.         },
     
152.         activateBlock : function(block){
     
153.                 block.setAttribute('act', 'true');
     
154.                 addClass(block, 'snake-body');
     
155.         },
     
156.         inActivateBlock: function(block){
     
157.                 block.setAttribute('act', '');
     
158.                 removeClass(block, 'snake-body');
     
159.         },
     
160.         switchBlock: function(block){
     
161.                 var active = block.getAttribute('act');
     
162.                 if(active){
     
163.                         this.inActivateBlock(block);
     
164.                 }else{
     
165.                         this.activateBlock(block);
     
166.                 }
     
167.         },
     
168.         isFoodBlock: function(block){
     
169.                 return !!(block.getAttribute('food'));
     
170.         },
     
171.         createFood : function(){
     
172.                 var posX = 0, posY = 0, done = false, block;
     
173.                 while( !done){
     
174.                         posX = Math.floor(Math.random() * (this.width + 1));
     
175.                         posY = Math.floor(Math.random() * (this.height + 1));
     
176.                         if(posX == 0){ posX = 1;} if(posY == 0){ posY = 1;}
     
177.                         block = this.getBlock(posX, posY);
     
178.                         if(!this.currentSnake || (!this.currentSnake.contains(posX, posY))){
     
179.                                 block.setAttribute('food', 'true');
     
180.                                 this.switchBlock(block);
     
181.                                 done = true;
     
182.                         }
     
183.                 }
     
184.         },
     
185.         clsCanvas : function(snake){
     
186.                 var snakeBlock, i = 0;
     
187.                 if(snake){
     
188.                         for(;i<snake.length;i++){
     
189.                                 snakeBlock = snake.body[i];
     
190.                                 this.inActivateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
     
191.                         }
     
192.                 }else{
     
193.                         while(i< this.width * this.height){
     
194.                                 this.inActivateBlock(this.getBlock(i));
     
195.                         }
     
196.                 }
     
197.         },
     
198.         drawSnake : function(snake){
     
199.                 var snakeBlock;
     
200.                 for(var i=0;i<snake.length;i++){
     
201.                         snakeBlock = snake.body[i];
     
202.                         this.activateBlock(this.getBlock(snakeBlock.x, snakeBlock.y));
     
203.                 }
     
204.                 this.currentSnake = snake;
     
205.         }
     
206. };
     
207. //---------------------------//
     
208. 
     
209. function trim(text){
     
210.         var        rnotwhite = /\S/,
     
211.         // Used for trimming whitespace
     
212.         trimLeft = /^\s+/,
     
213.         trimRight = /\s+$/;       
     
214. 
     
215.         // IE doesn't match non-breaking spaces with \s
     
216.         if ( rnotwhite.test( "\xA0" ) ) {
     
217.                 trimLeft = /^[\s\xA0]+/;
     
218.                 trimRight = /[\s\xA0]+$/;
     
219.         }
     
220.        
     
221.         return text.toString().replace( trimLeft, "" ).replace( trimRight, "" );
     
222. }
     
223. 
     
224. function addClass(elem, className){
     
225.         var setClass;
     
226.         if ( elem.nodeType === 1 ) {
     
227.                 if ( !elem.className ) {
     
228.                         elem.className = className;
     
229. 
     
230.                 } else {
     
231.                         setClass = " " + elem.className + " ";
     
232.                         if ( !~setClass.indexOf( " " + className + " " ) ) {
     
233.                                 setClass += className + " ";
     
234.                         }
     
235.                         elem.className = trim(setClass);
     
236.                 }
     
237.         }
     
238. }
     
239. 
     
240. function removeClass(elem, value){
     
241.         var className;
     
242.         if ( elem.nodeType === 1 && elem.className ) {
     
243.                 if ( value ) {
     
244.                         className = (" " + elem.className + " ").replace( /[\n\t\r]/g, " " );
     
245.                         className = className.replace(" " + value + " ", " ");
     
246.                         elem.className = trim( className );
     
247.                 } else {
     
248.                         elem.className = "";
     
249.                 }
     
250.         }
     
251. }
     
252. function keyDown(e){
     
253.         if(!snake || !snake.isAlive) {
     
254.                 return;
     
255.         }
     
256.         e=e||window.event;
     
257.         var keyCode = e.keyCode||e.which||e.charCode;
     
258.         switch(keyCode){
     
259.                 case 37://左
     
260.                         snake.turnLeft();
     
261.                         break;
     
262.                 case 38://上
     
263.                         snake.turnUp();
     
264.                         break;
     
265.                 case 39://右
     
266.                         snake.turnRight();
     
267.                         break;
     
268.                 case 40://下
     
269.                         snake.turnDown();
     
270.                         break;
     
271.                 case 80://p 暂停or开始
     
272.                 case 229:
     
273.                         if(snake.auto){
     
274.                                 snake.pause();
     
275.                         }else{
     
276.                                 snake.autoWalk();
     
277.                         }
     
278.                         break;
     
279.         }
     
280. }
     
281. if(document.attachEvent){
     
282.         document.attachEvent('onkeydown', keyDown);
     
283. }else if(document.addEventListener){
     
284.         document.addEventListener('keydown', keyDown, false);
     
285. }
     
286. </SCRIPT>
     
287. 
     
288. <STYLE>DIV {
     
289.         MARGIN: 20px auto
     
290. }
     
291. .target {
     
292.         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
     
293. }
     
294. .blocks {
     
295.         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
     
296. }
     
297. .snake-body {
     
298.         BORDER-BOTTOM-STYLE: solid; BORDER-RIGHT-STYLE: solid; BACKGROUND-COLOR: #111; BORDER-TOP-STYLE: solid; BORDER-LEFT-STYLE: solid
     
299. }
     
300. </STYLE>
     
301. 
     
302. <META name=GENERATOR content="MSHTML 8.00.7601.17537"></HEAD>
     
303. <BODY>
     
304. <H1>Snake</H1>
     
305. <DIV id=t></DIV>
     
306. <DIV>您的得分是：<SPAN id=s>0</SPAN></DIV>
     
307. <DIV>操作提示：按上下左右键操作，按 P 键暂停或继续 </DIV>
     
308. <SCRIPT>
     
309. var canvas = new SnakeCanvas( document.getElementById('t') );
     
310. var snake = new Snake( canvas );
     
311. var score = 0, initSpeed = snake.speed;
     
312. snake.onDie = function(){
     
313.         alert('game over');
     
314. };
     
315. snake.onEat = function(){
     
316.         snake.canvas.createFood();
     
317.         score++;
     
318.         var speed = initSpeed;
     
319.         if(score % 5 == 0){
     
320.                 speed -= 10;
     
321.         }
     
322.         if(speed < 100){
     
323.                 speed = 100;
     
324.         }
     
325.         snake.speed = speed;
     
326.         document.getElementById('s').innerHTML = score * 100 ;
     
327. };
     
328. snake.init(3);
     
329. snake.autoWalk();
     
330. // snake.pause();
     

复制代码

yunzhong

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