Gra snake w javascript
Ostatnio odkopałam na dysku prostą grę snake w javascript.
Pragnę się z Wami podzielić kodem źródłowym.
Plik html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>snake</title> <meta name="description" content=""> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/rAF.js"></script> <script type="text/javascript" src="js/render_table.js"></script> <script type="text/javascript" src="js/snake.js"></script> <script type="text/javascript" src="js/input.js"></script> <style> table { position: fixed; top:0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } </style> </head> <body> <script> var gra = new game(new gamescreen('sdfsdg',20,20)); </script> </body> </html>Plik rAF.js:
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());Plik render_table.js:
var gamescreen = function(id,width,height) { this.id = id; this.width = width; this.height = height; var html = '<table id="'+this.id+'">'; for(var x=0; x < this.width; x++) { html += '<tr>'; for(var y=0; y < this.height; y++) { html += '<td></td>'; } html += '</tr>'; } html += '</table>'; $('body').append(html); }; gamescreen.prototype.clear_screen = function() { $('#'+this.id+' td').removeAttr('style'); }; gamescreen.prototype.draw_snake = function(snake) { $('#'+this.id+' tr').eq(snake.y).find('td').eq(snake.x).css('background-color','green'); }; gamescreen.prototype.draw_snake_tail = function(snake) { $('#'+this.id+' tr').eq(snake.y).find('td').eq(snake.x).css('background-color','OliveDrab'); }; gamescreen.prototype.draw_apple = function(apple) { $('#'+this.id+' tr').eq(apple.y).find('td').eq(apple.x).css('background-color','red'); };Plik snake.js:
var game = function(gamescreen) { this.gamescreen = gamescreen; this.snake = { x:Math.floor(gamescreen.width/2), y:Math.floor(gamescreen.height/2), dir:8, len:3, tail:[] }; this.apples = [{x:Math.floor(Math.random()*gamescreen.width),y:Math.floor(Math.random()*gamescreen.height)}]; this.animate(); this.gametick(); } game.prototype.snake_up = function() { this.snake.dir = 8; }; game.prototype.snake_down = function() { this.snake.dir = 2; }; game.prototype.snake_left = function() { this.snake.dir = 4; }; game.prototype.snake_right = function() { this.snake.dir = 6; }; game.prototype.draw_objects = function() { this.gamescreen.clear_screen(); this.gamescreen.draw_snake(this.snake); for(var i = this.snake.tail.length-1; i >= 0; i-=1) { this.gamescreen.draw_snake_tail(this.snake.tail[i]); } for(var i = this.apples.length-1; i >= 0; i-=1) { this.gamescreen.draw_apple(this.apples[i]); } }; game.prototype.animate = function() { this.draw_objects(); var g = this; requestAnimationFrame(function(){ g.animate(); }); }; game.prototype.gametick = function() { var oldx = this.snake.x, oldy = this.snake.y; if(this.snake.dir==8) { this.snake.y -= 1; } if(this.snake.dir==2) { this.snake.y += 1; } if(this.snake.dir==6) { this.snake.x += 1; } if(this.snake.dir==4) { this.snake.x -= 1; } this.snake.x %= this.gamescreen.width; this.snake.y %= this.gamescreen.height; for(var i = this.apples.length-1; i >= 0; i-=1) { if(this.snake.x==this.apples[i].x && this.snake.y==this.apples[i].y) { this.snake.len += 1; this.apples[i].x = Math.floor(Math.random()*this.gamescreen.width); this.apples[i].y = Math.floor(Math.random()*this.gamescreen.height); } } for(var i = this.snake.tail.length-1; i >= 0; i-=1) { if(this.snake.x==this.snake.tail[i].x && this.snake.y==this.snake.tail[i].y) { this.snake.len = i+1; break; } } if(this.snake.len>0) { this.snake.tail.unshift({x:oldx,y:oldy}); while(this.snake.tail.length>this.snake.len) { this.snake.tail.pop(); } } var g = this; setTimeout(function(){ g.gametick(); },500); };Plik input.js:
$(document).ready(function() { $("body").bind("keydown",function(e){ var value = this.value + String.fromCharCode(e.keyCode); if(e.keyCode==13) { alert('Enter'); } if(e.keyCode==38) { gra.snake_up(); } if(e.keyCode==40) { gra.snake_down(); } if(e.keyCode==37) { gra.snake_left(); } if(e.keyCode==39) { gra.snake_right(); } if(e.keyCode==27) { alert('esc'); } }); });