Sylvain Saurel ssaurel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Snake on SSaurel's Blog</title> | |
| <style type="text/css"> | |
| #title { | |
| width: 400px; | |
| text-align: center; | |
| margin: auto; | |
| margin-top: 20px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gameloop(timestamp) { | |
| // Calculate the number of seconds passed since the last frame | |
| secondspassed = (timestamp - oldtimestamp) / 1000; | |
| oldtimestamp = timestamp; | |
| // Calculate fps | |
| realfps = Math.round(1 / secondspassed); | |
| if (this.keyup) { | |
| this.dirx = 0; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| move() { | |
| var dirx = this.dirx; | |
| var diry = this.diry; | |
| // if the snake eats the food | |
| if (this.head.x == this.food.x && this.head.y == this.food.y) { | |
| // add a new tail | |
| var newtail = { x: this.head.x - dirx, y: this.head.y - diry }; | |
| this.elements.unshift(newtail); | |
| this.tail = newtail; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| draw(realfps) { | |
| this.ctx.fillStyle = "#EFEFEF"; | |
| this.ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| this.ctx.font = "20px Arial"; | |
| this.ctx.fillStyle = "black"; | |
| //this.ctx.fillText("FPS: " + realfps, 10, 30); | |
| this.ctx.fillText("Points: " + this.points, 10, 30); | |
| this.ctx.fillStyle = "green"; |
ssaurel
/ generatefood.js
Created
January 18, 2024 15:29
Step 3 for creating a Snake on SSaurel's Blog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| generatefood(nbx, nby) { | |
| // check food is not on the snake | |
| var self = this; | |
| var touch = true; | |
| var food = null; | |
| while (touch) { | |
| food = { x: randomInteger(0, this.nbx), y: randomInteger(0, this.nby) }; | |
| this.elements.every((element) => { |
ssaurel
/ snake_step2.js
Created
January 18, 2024 15:11
Step 2 for creating a Snake on the SSaurel's Blog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Snake { | |
| constructor(ctx, bw, bh, nbx, nby, fps) { | |
| this.ctx = ctx; | |
| this.bw = bw; | |
| this.bh = bh; | |
| this.eltw = bw / nbx; | |
| this.elth = bh / nby; | |
| this.nbx = nbx; | |
| this.nby = nby; | |
| this.dirx = 1; |
ssaurel
/ snake_step1.htm
Created
January 18, 2024 15:07
Step 1 for creating a Snake on SSaurel's Blog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Snake on SSaurel's Blog</title> | |
| <style type="text/css"> | |
| #title { | |
| width: 400px; | |
| text-align: center; | |
| margin: auto; | |
| margin-top: 20px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function showTooltip(evt, mouseovertext) { | |
| tooltip.setAttributeNS(null,"x",evt.clientX + 18); | |
| tooltip.setAttributeNS(null,"y",evt.clientY + 32); | |
| tooltip.firstChild.data = mouseovertext; | |
| tooltip.setAttributeNS(null,"visibility","visible"); | |
| length = tooltip.getComputedTextLength(); | |
| tooltip_bg.setAttributeNS(null,"width",length + 20); | |
| tooltip_bg.setAttributeNS(null,"x",evt.clientX + 8); | |
| tooltip_bg.setAttributeNS(null,"y",evt.clientY + 14); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var ids = ['IN-AN', 'IN-AP', 'IN-AR', 'IN-AS', 'IN-BR', 'IN-CH', 'IN-CT', 'IN-DD', 'IN-DL', 'IN-DN', 'IN-GA', 'IN-GJ', | |
| 'IN-HP', 'IN-HR', 'IN-JH', 'IN-JK', 'IN-KA', 'IN-KL', 'IN-LD', 'IN-MH', 'IN-ML', 'IN-MN', 'IN-MP', | |
| 'IN-MZ', 'IN-NL', 'IN-OR', 'IN-PB', 'IN-PY', 'IN-RJ', 'IN-SK', 'IN-TG', 'IN-TN', 'IN-TR', | |
| 'IN-UP', 'IN-UT', 'IN-WB']; | |
| function init(evt) { | |
| if ( window.svgDocument == null ) { | |
| svgDocument = evt.target.ownerDocument; | |
| } |
ssaurel
/ india_map.html
Last active
January 7, 2024 15:17
India Interactive Map for a tutorial on the SSaurel's Blog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>India Interactive SVG Map</title> | |
| <style type="text/css"> | |
| #title { | |
| font-size: 25px; | |
| fill: black; |
NewerOlder