{% comment %} Re2o est un logiciel d'administration développé initiallement au rezometz. Il se veut agnostique au réseau considéré, de manière à être installable en quelques clics. Copyright © 2018 Hugo Levy-Falk This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. {% endcomment %} {% load i18n %} {% load staticfiles %} <!DOCTYPE html> <html> <head prefix="og: http://ogp.me/ns#"> <meta property="og:title" content="Re2o" /> <meta property="og:type" content="website" /> <meta property="og:url" content="{{ request.scheme }}://{{ request.get_host }}/" /> <meta property="og:image" content="{% static 'images/logo_re2o.svg' %}"/> <meta property="og:image:type" content="image/svg"/> <meta property="og:image:alt" content="The Re2o logo"/> <meta property="og:description" content="Networking managing website endorsed by FedeRez." /> <meta charset="utf-8"> <link rel="shortcut icon" type="image/svg" href="{% static 'images/logo_re2o.svg' %}"> <title>{% trans "404 error: page not found" %}</title> <script src="/javascript/jquery/jquery.min.js"></script> <script> var snake = [{x:0,y:0,vx:1,vy:0}]; var bonus = []; var lost = false; var grid = 20; var score = 0; function update_snake() { var l = snake.length; var c = document.getElementById("myCanvas"); var width = c.width; var height = c.height; var last_case = { x:snake[l-1].x, y:snake[l-1].y, vx:snake[l-1].vx, vy:snake[l-1].vy }; for(var i=l-1; i>=0; --i){ if(i == 0) { var m = bonus.length; var remove = -1; for(var j=0; j<m; ++j) { if((bonus[j].x == snake[i].x) && (bonus[j].y == snake[i].y)) { remove = j; } } if(remove >= 0){ bonus.splice(remove, 1); snake.push(last_case); score += 1; } } if((i > 0) && (snake[i].x == snake[0].x) && (snake[i].y == snake[0].y)) { lost = true; } snake[i].x = (snake[i].x + snake[i].vx * grid + width)%width; snake[i].y = (snake[i].y + snake[i].vy * grid + height)%height; if(i>0) { snake[i].vx = snake[i-1].vx; snake[i].vy = snake[i-1].vy; } } } function draw_snake() { var l = snake.length; var c = document.getElementById("myCanvas"); if(c.getContext) { var ctx = c.getContext("2d"); for(var i=0; i<l; ++i){ ctx.fillStyle = "#2980b9"; ctx.fillRect(snake[i].x, snake[i].y, grid, grid); } } } function draw_bonus() { var l = bonus.length; var ctx = document.getElementById("myCanvas").getContext("2d"); for(var i=0; i<l; ++i) { ctx.beginPath(); var x = bonus[i].x; var y = bonus[i].y; ctx.beginPath(); ctx.arc(x+grid/2, y+grid/2, grid/2, 0, 2 * Math.PI, false); ctx.fillStyle = '#2ecc71'; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#27ae60'; ctx.stroke(); } } function draw_score(){ var ctx = document.getElementById('myCanvas').getContext('2d'); ctx.font = '50px serif'; ctx.fillStyle = '#2ecc71'; ctx.fillText("{% trans "Score: " %} " + score, 10, 60); } function draw_lost(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext('2d'); ctx.fillStyle = '#2ecc71'; ctx.font = '50px serif'; ctx.fillText("{% trans "YOU LOST" %}", c.width/2, c.height/2); } function update_bonus() { var c = document.getElementById("myCanvas"); var width = c.width; var height = c.height; var x = (Math.floor(Math.random() * width / grid))*grid; var y = (Math.floor(Math.random() * height / grid))*grid; bonus.push({x:x, y:y}); } function draw() { var c = document.getElementById("myCanvas"); var width = c.width; var height = c.height; var ctx = c.getContext("2d"); ctx.clearRect(0, 0, width, height); if(!lost){ draw_snake(); draw_bonus(); draw_score(); } else { draw_score(); draw_lost(); } } function on_keydown(e) { if(e.which == 37) { // left snake[0].vx = -1; snake[0].vy = 0; } else if(e.which == 38) { // up snake[0].vx = 0; snake[0].vy = -1; } else if(e.which == 39) { // right snake[0].vx = 1; snake[0].vy = 0; } else if(e.which == 40) { // down snake[0].vx = 0; snake[0].vy = 1; } } $("html").keydown(on_keydown); window.setInterval(draw, 100); window.setInterval(update_snake, 100); window.setInterval(update_bonus, 3000); </script> <style> html { background: #34495e; } h1 { display:block; text-align: center; background: #2c3e50; padding: 1em; width: 80%; margin: auto; color: #ecf0f1; margin-bottom: 1em; margin-top: 1em; } a { font-size: x-small; color: #ecf0f1; } #myCanvas { width:80%; display:block; margin-left:auto; margin-right:auto; height:50%; } </style> </head> <body> <h1>{% trans "Yup, that's a 404 error." %} <a href="/">{% trans "(Go back to a safe page)" %}</a></h1> <canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #d3d3d3;"> {% trans "Your browser does not support the HTML5 canvas tag." %} </canvas> </body> </html>