SHARE
TWEET

Snake v1.0 by www.technoslab.in / Manish Raj

Techno Nov 25th, 2012 162 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <%
  2.     if (request.getParameter("level") != null && request.getParameter("ini_len") != null) {
  3.         int $level = 1;
  4.         try {
  5.             $level = Integer.parseInt(request.getParameter("level"));
  6.         } catch (Exception e) {
  7.         }
  8.         int $ini_len = 0;
  9.         try {
  10.             $ini_len = Integer.parseInt(request.getParameter("ini_len"));
  11.         } catch (Exception e) {
  12.         }
  13.         if ($level < 0) {
  14.             $level = 1;
  15.         }
  16.         if ($level > 10) {
  17.             $level = 10;
  18.         }
  19.         if ($ini_len < 1) {
  20.             $ini_len = 1;
  21.         }
  22.         if ($ini_len > 20) {
  23.             $ini_len = 20;
  24.         }
  25. %>
  26.  
  27. <!DOCTYPE html>
  28. <html>
  29.     <head>
  30.         <title>Snake v1.0</title>
  31.         <script type="text/javascript">
  32.             window.onload = function(){
  33.                
  34.                 // Constants
  35.                 var KEY_UP = 38;
  36.                 var KEY_LEFT = 37;
  37.                 var KEY_DOWN = 40;
  38.                 var KEY_RIGHT = 39;
  39.                 var DIR_UP = 38;
  40.                 var DIR_LEFT = 37;
  41.                 var DIR_DOWN = 40;
  42.                 var DIR_RIGHT = 39;
  43.  
  44.                 var ground_width = window.innerWidth;
  45.                 var ground_height = window.innerHeight;
  46.  
  47.                 var snake_width = 15;
  48.                 var snake_audio = new Audio("b.ogg");
  49.                 var snake_speed = 100;
  50.                 var snake_initial_length = <%= $ini_len%>;
  51.        
  52.                 var game_level =  <%= $level%>;
  53.                 var speed_increment = 10;
  54.                 var game_score = 0;
  55.                
  56.                 var body = document.getElementsByTagName('body')[0];
  57.                 body.style.padding = "0px";
  58.                 body.style.margin = "0px";
  59.                
  60.                
  61.                 // Snake ground
  62.                 var snake_ground = document.createElement("div");
  63.                 snake_ground.style.background = "#000000";
  64.                 snake_ground.style.display = "block";
  65.                 snake_ground.style.width = ground_width + "px";
  66.                 snake_ground.style.height = ground_height + "px";
  67.                 snake_ground.style.margin = "0px";
  68.                 snake_ground.style.padding = "0px";
  69.                 snake_ground.style.position = "relative";
  70.                 snake_ground.style.overflow = "hidden";
  71.                                
  72.                 // Add snake ground
  73.                 body.appendChild(snake_ground);
  74.                                
  75.                 // Food block
  76.                 var food = document.createElement("div");
  77.                                
  78.                 var food_position = [0,0]
  79.                                
  80.                 var boundary = 50;
  81.                 var max1 = ground_width - boundary;
  82.                 var max2 = ground_height - boundary;
  83.                 var min1 = snake_width + boundary;
  84.                 var min2 = snake_width + boundary;
  85.  
  86.                 var map_food_position = function(){
  87.                     console.log('('+min1+','+max1+') , ('+min2+', '+max2+')');
  88.                     food_position[0] = Math.floor((Math.random() * (max1 - min1) + min1)/min1) * min1;
  89.                     food_position[1] = Math.floor((Math.random() * (max2 - min2) + min2)/min2) * min2;
  90.                 }
  91.                                
  92.                 map_food_position();
  93.                                
  94.                 food.style.background = "#FF0000";
  95.                 food.style.display = "block";
  96.                 food.style.width = snake_width + "px";
  97.                 food.style.height = snake_width + "px";
  98.                 food.style.position = "absolute";
  99.                 food.style.left = food_position[0] + "px";
  100.                 food.style.top = food_position[1] + "px";
  101.                 food.style.border = "2px solid #000000";                
  102.                 // Add food block to ground
  103.                 snake_ground.appendChild(food);
  104.                
  105.                 // Game stats
  106.                 var game_stat_right = document.createElement('div');
  107.                 game_stat_right.style.display = 'block';
  108.                 game_stat_right.style.position = 'absolute';
  109.                 game_stat_right.style.right = '10px';
  110.                 game_stat_right.style.top = '10px';
  111.                 game_stat_right.style.font = 'bold 15px Monospace';
  112.                 game_stat_right.style.color = '#FFFFFF';
  113.                
  114.                 var game_stat_left = document.createElement('div');
  115.                 game_stat_left.style.display = 'block';
  116.                 game_stat_left.style.position = 'absolute';
  117.                 game_stat_left.style.left = '10px';
  118.                 game_stat_left.style.top = '10px';
  119.                 game_stat_left.style.font = 'bold 15px Monospace';
  120.                 game_stat_left.style.color = '#FFFFFF';
  121.                
  122.                 // Add game stats to ground
  123.                 snake_ground.appendChild(game_stat_right);
  124.                 snake_ground.appendChild(game_stat_left);
  125.                
  126.                
  127.                 // Snake
  128.                 var snake = new Array();
  129.                
  130.                 // Define first two blocks or elements of snake
  131.                 snake[0] = [Math.floor(ground_width/(2*snake_width)) * snake_width, Math.floor(ground_height/(2 * snake_width)) * snake_width];
  132.                 for(var i = 1; i <= snake_initial_length; i++){
  133.                     snake[i] = [snake[0][0] - i * snake_width, snake[0][1]];
  134.                 }
  135.                
  136.                 // Set initial direction to right
  137.                 var snake_direction = DIR_RIGHT;
  138.                
  139.                 // Variable to track game position
  140.                 var game_over = false;
  141.                
  142.                 var key_code;
  143.                                
  144.                 var trigger_keydown_event =
  145.                     function(key_code){
  146.  
  147.                     // Create and dispatch an keyEvent to move snake's head towards snake_direction
  148.                     if( window.KeyEvent ) {
  149.                         var evObj = document.createEvent("KeyEvents");
  150.                         evObj.initKeyEvent( "keydown", true, true, window, false, false, false, false, key_code, 0 );
  151.                     } else {
  152.                         var evObj = document.createEvent("UIEvents");
  153.                         evObj.initUIEvent( "keydown", true, true, window, 1 );
  154.                         evObj.keyCode = key_code;
  155.                     }
  156.                     document.dispatchEvent(evObj);
  157.                 }
  158.                                
  159.                 // Add nav keys for non-compatible browsers
  160.                 var button_up = document.createElement('button');
  161.                 button_up.style.position = 'absolute';
  162.                 button_up.style.display = 'block';
  163.                 button_up.style.width = '40px';
  164.                 button_up.style.height = '30px';
  165.                 button_up.innerHTML = '&uarr;';
  166.                 button_up.style.font = '15px Arial';
  167.                 button_up.style.top = (ground_height - 60) + 'px';
  168.                 button_up.style.left = (ground_width / 2 - 20) + 'px';
  169.  
  170.                 var button_down = document.createElement('button');
  171.                 button_down.style.position = 'absolute';
  172.                 button_down.style.display = 'block';
  173.                 button_down.style.width = '40px';
  174.                 button_down.style.height = '30px';
  175.                 button_down.innerHTML = '&darr;';
  176.                 button_down.style.font = '15px Arial';
  177.                 button_down.style.top = (ground_height - 30) + 'px';
  178.                 button_down.style.left = (ground_width/2 - 20) + 'px';
  179.  
  180.                 var button_left = document.createElement('button');
  181.                 button_left.style.position = 'absolute';
  182.                 button_left.style.display = 'block';
  183.                 button_left.style.width = '40px';
  184.                 button_left.style.height = '30px';
  185.                 button_left.innerHTML = '&larr;';
  186.                 button_left.style.font = '15px Arial';
  187.                 button_left.style.top = (ground_height - 30) + 'px';
  188.                 button_left.style.left = (ground_width / 2 - 60) + 'px';
  189.  
  190.                 var button_right = document.createElement('button');
  191.                 button_right.style.position = 'absolute';
  192.                 button_right.style.display = 'block';
  193.                 button_right.style.width = '40px';
  194.                 button_right.style.height = '30px';
  195.                 button_right.innerHTML = '&rarr;';
  196.                 button_right.style.font = '15px Arial';
  197.                 button_right.style.top = (ground_height - 30) + 'px';
  198.                 button_right.style.left = (ground_width / 2 + 20) + 'px';
  199.  
  200.                 // Handle button input
  201.                                
  202.                 button_left.onclick =
  203.                     function(){
  204.                     trigger_keydown_event(KEY_LEFT);
  205.                 }
  206.                 button_right.onclick =
  207.                     function(){
  208.                     trigger_keydown_event(KEY_RIGHT);
  209.                 }
  210.                 button_down.onclick =
  211.                     function(){
  212.                     trigger_keydown_event(KEY_DOWN);
  213.                 }
  214.                 button_up.onclick =
  215.                     function(){
  216.                     trigger_keydown_event(KEY_UP);
  217.                 }
  218.                                
  219.                 /*
  220.                         body.appendChild(button_up);
  221.                         body.appendChild(button_down);
  222.                         body.appendChild(button_left);
  223.                         body.appendChild(button_right);
  224.                  */
  225.                                
  226.                 // Loop for as long as needed
  227.                 var game_loop =
  228.                     function(){
  229.                     if(!game_over){
  230.                                                        
  231.                         trigger_keydown_event(snake_direction);
  232.                         window.setTimeout(game_loop, snake_speed - speed_increment * game_level);
  233.                     }else{
  234.                         var gameover_dialog = document.createElement("div");
  235.                         gameover_dialog.style.display = "block";
  236.                         gameover_dialog.style.position = "absolute";
  237.                         gameover_dialog.style.width = "200px";
  238.                         gameover_dialog.style.height = "200px";
  239.                         gameover_dialog.style.font = "bold 20px Arial";
  240.                         gameover_dialog.style.color = "#FF0000";
  241.                         gameover_dialog.style.left = (ground_width/2 - 100) + "px";
  242.                         gameover_dialog.style.top = (ground_height/2 - 100) + "px";
  243.                         gameover_dialog.style.textAlign = "center";
  244.                         gameover_dialog.innerHTML = "GAME OVER!";
  245.                         gameover_dialog_button = document.createElement("button");
  246.                         gameover_dialog_button.style.display = "inline-block";
  247.                         gameover_dialog_button.innerHTML = "Click To Play Again";
  248.                         gameover_dialog_button.onclick = function(){
  249.                             document.location.reload(false);
  250.                         }
  251.                         gameover_dialog.appendChild(gameover_dialog_button);
  252.                         body.appendChild(gameover_dialog);
  253.                         gameover_dialog_button.focus();
  254.                     }
  255.                 }
  256.                
  257.                 window.setTimeout(game_loop, snake_speed);
  258.                
  259.                                
  260.                 // Experimental: Time wrap
  261.                 /*
  262.                         document.onclick = function(e){
  263.                                 snake[0][0] = e.clientX;
  264.                                 snake[0][1] = e.clientY;
  265.                         }
  266.                  */
  267.                                
  268.                 // Add keyDown event handler
  269.                 document.onkeydown = function(e){
  270.                
  271.                     // Ignore keyDown events if game is over
  272.                     if(game_over){
  273.                         return null;
  274.                     }
  275.                    
  276.                     // Prevent snake from moving in reverse direction
  277.                     if(snake_direction == DIR_UP && e.keyCode == KEY_DOWN){
  278.                         return null;
  279.                     }
  280.  
  281.                     if(snake_direction == DIR_RIGHT && e.keyCode == KEY_LEFT){
  282.                         return null;
  283.                     }
  284.  
  285.                     if(snake_direction == DIR_LEFT && e.keyCode == KEY_RIGHT){
  286.                         return null;
  287.                     }
  288.  
  289.                     if(snake_direction == DIR_DOWN && e.keyCode == KEY_UP){
  290.                         return null;
  291.                     }
  292.                                        
  293.                     // If one of the four navigation keys was pressed
  294.                     if(e.keyCode == KEY_UP || e.keyCode == KEY_LEFT || e.keyCode == KEY_DOWN || e.keyCode == KEY_RIGHT){
  295.                    
  296.                         // Store position of last block, will be used when adding new tail block i.e. when snake's head eats food block
  297.                         var last_x_position = snake[snake.length - 1][0];
  298.                         var last_y_position = snake[snake.length - 1][1];
  299.                        
  300.                         // Update every element to move to position of block ahead
  301.                         for(var i = snake.length - 1; i > 0 ; i--){
  302.                             snake[i][0] = snake[i-1][0];
  303.                             snake[i][1] = snake[i-1][1];
  304.                         }
  305.                        
  306.                         // If UP key was pressed ( basically released )
  307.                         if(e.keyCode == KEY_UP){
  308.                             snake[0][1] -= snake_width;
  309.                             snake_direction = DIR_UP;
  310.                         }
  311.                        
  312.                         // If LEFT key was pressed
  313.                         if(e.keyCode == KEY_LEFT){
  314.                             snake[0][0] -= snake_width;
  315.                             snake_direction = DIR_LEFT;
  316.                         }
  317.                        
  318.                         // If DOWN key was pressed
  319.                         if(e.keyCode == KEY_DOWN){
  320.                             snake[0][1] += snake_width;
  321.                             snake_direction = DIR_DOWN;
  322.                         }
  323.                        
  324.                         // If RIGHT key was pressed
  325.                         if(e.keyCode == KEY_RIGHT){
  326.                             snake[0][0] += snake_width;
  327.                             snake_direction = DIR_RIGHT;
  328.                         }
  329.                        
  330.                         // Wrap the snake at right egde
  331.                         if(snake[0][0] > ground_width){
  332.                             snake[0][0] = 0;
  333.                         }
  334.                        
  335.                         // Wrap the snake at bottom edge
  336.                         if(snake[0][1] > ground_height){
  337.                             snake[0][1] = 0;
  338.                         }
  339.                        
  340.                         // Wrap the snake at left edge
  341.                         if(snake[0][0] < 0){
  342.                             snake[0][0] = ground_width;
  343.                         }
  344.                        
  345.                         // Wrap the snake at top edge
  346.                         if(snake[0][1] < 0){
  347.                             snake[0][1] = ground_height;
  348.                         }
  349.                        
  350.                         for(var i = 1; i < snake.length; i++){
  351.                             if(snake[0][0] == snake[i][0] && snake[0][1] == snake[i][1]){
  352.                                 game_over = true;
  353.                             }
  354.                         }
  355.                        
  356.                     }
  357.                    
  358.                     // If snake's head has approached a food block
  359.                     if(Math.abs(snake[0][0] - food_position[0]) < snake_width && Math.abs(snake[0][1] - food_position[1]) < snake_width){
  360.                    
  361.                         // Add a new tail block
  362.                         snake[snake.length] = [last_x_position, last_y_position];
  363.                        
  364.                         game_score++;
  365.                         if(game_score != 0 && game_score%10 == 0 && game_level != 10){
  366.                             game_level++;
  367.                         }
  368.                        
  369.                         // Play the audio
  370.                         snake_audio.play();
  371.                        
  372.                         // Find and update food block's new position
  373.                         map_food_position();
  374.                         food.style.left = food_position[0] + 'px';
  375.                         food.style.top = food_position[1] + 'px';
  376.                     }
  377.                    
  378.                     game_stat_left.innerHTML = 'Score: ' + game_score;
  379.                     game_stat_right.innerHTML = 'Level: ' + (game_level + 1);
  380.                
  381.                     // Add or modify snake blocks on each event
  382.                     for(var i = 0; i < snake.length; i++){
  383.                         var snake_elem = document.getElementById("snake_"+i);
  384.                         if(snake_elem == null){
  385.                             snake_elem = document.createElement("div");
  386.                             snake_elem.setAttribute("id", "snake_"+i);
  387.                             snake_elem.style.position = "absolute";
  388.                             snake_elem.style.display = "block";
  389.                             snake_elem.style.width = snake_width + "px";
  390.                             snake_elem.style.height = snake_width + "px";
  391.                             snake_elem.style.background = "#00FF00";
  392.                             snake_elem.style.border = "2px solid #000000";
  393.                             snake_ground.appendChild(snake_elem);
  394.                         }
  395.                         snake_elem.style.left = snake[i][0] + "px";
  396.                         snake_elem.style.top = snake[i][1] + "px";
  397.                     }
  398.                
  399.                 };
  400.                
  401.             }
  402.         </script>
  403.     </head>
  404.     <body>
  405.         <noscript>
  406.         <h1>Please use a Javascript enabled web browser. Thank you.</h1>
  407.         </noscript>
  408.     </body>
  409. </html>
  410. <% } else {%>
  411. <!DOCTYPE html>
  412. <html>
  413.     <head>
  414.         <title>Snake v1.0</title>
  415.     </head>
  416.     <body>
  417.         <form method="POST" action="snake.jsp">
  418.             Level: <select name="level">
  419.                 <%
  420.                     for (int $i = 1; $i <= 10; $i++) {
  421.                 %>
  422.                 <option value="<%= $i%>"><%= $i%></option>
  423.                 <%
  424.                     }
  425.                 %>
  426.             </select>
  427.             Initial Length: <select name="ini_len">
  428.                 <%
  429.                     for (int $i = 1; $i <= 20; $i++) {
  430.                 %>
  431.                 <option value="<%= $i%>"><%= $i%></option>
  432.                 <%
  433.                     }
  434.                 %>
  435.             </select>
  436.             <input type="submit" name="submit" value="Start Game" />
  437.         </form>
  438.     </body>
  439. </html>
  440. <%
  441.     }
  442. %>
RAW Paste Data
Top