4 ms·

Shouldn't the snake speed up as it gets longer? I played for a while but didn't notice.

citricsquid 15y ago
it grew for me.
biot 15y ago
Here you go. Starts out at a slightly quicker pace and gets gradually more challenging as the length increases. data:text/html,<script>function P(x,y){return{x:x,y:y}}function J(){return Math.floor(Math.random()*16)}function R(){z=s[0];while(T(z)){z={x:J(),y:J()};}return z;}function A(a,b){return{x:a.x+b.x,y:a.y+b.y}}function Q(a,b){return a.x==b.x&&a.y==b.y}function O(p){return p.x<0||p.x>15||p.y<0||p.y>15}function T(p){return s.filter(Q.bind(this,p)).length}function M(p){if(p.x!=-d.x&&p.y!=-d.y)m=p}function B(l){s.map(function(p){c.fillRect(p.x<<3,p.y<<3,8,8)})}function C(p){c.beginPath();c.arc((p.x<<3)+4,(p.y<<3)+4,4,0,7);c.fill()}function F(){c.fillStyle='rgb(200,0,0)';B(s);clearInterval(t);setTimeout(I,5000);}window.addEventListener('keydown',function(e){M({37:P(-1,0),38:P(0,-1),39:P(1,0),40:P(0,1)}[e.keyCode])},false);function I(){document.body.innerHTML='<canvas width=128 height=128 style="width:256px;height:256px;border:8px solid black"></canvas>';ww=0;c=document.body.firstChild.getContext('2d');c.fillStyle='rgb(0,0,0)';s=[P(8,8),P(7,8),P(6,8)];a=R();m=P(1,0);v=function(){clearInterval(t);t=setInterval(v,350-s.length);d=m;n=A(s[0],d);(O(n)||T(n))&&F();s.unshift(n);Q(s[0],a)&&(a=R())||s.pop();c.clearRect(0,0,128,128);B(s);C(a);};t=setInterval(v,250);}setTimeout(I,0)</script> I also removed the annoying alert if you hit something. Edit: also updated to prevent new dot spawning under tail and turn the snake red when you die Clickable: http://preview.tinyurl.com/biotsnake http://preview.tinyurl.com/biotsnake
- bytex64 15y ago
  Very nice. I also see you got a few other tricks that I missed, like factoring out the random number generator. I am impressed.
  - biot 15y ago
    Thanks. I really like your use of map and filter to do the drawing and hit testing! Edit: oh, and please consider it a pull request. :)
    - bytex64 15y ago
      Sure thing. What was ww=0; trying to do? It seems to be the only place ww is referenced.
      - biot 15y ago
        Prior to implementing the s.length-based speed increase, I tried implementing a funkier frame-based gradual increase using a log scale. Ultimately, that proved to be not worth the effort as speeding it up in proportion to how many pellets were eaten was a more natural fit. So that variable is a leftover and should have been deleted.
    - bytex64 15y ago
      I've merged in your changes and made a few improvements, too. I streamlined the timeout handling so that it uses setTimeout instead of clearing and resetting setInterval. I also used color literals instead of CSS rgb(). I removed the reset to black in I() since recreating the canvas context does that automatically. Thanks, biot, you are officially awesome!
      - biot 15y ago
        Of course! It's been a while since I've done much javascript and I had forgotten about setTimeout. And your do/while loop in the R() function is much cleaner than my hack. :) One thing I noticed is that you're setting the timeout value to 350-s.length*5. As the grid is 16x16, the maximum snake length will be 256. Multiplying the length by 5 will soon make the game humanly unplayable somewhere around a length of 60.
        biot 15y ago

it grew for me.

biot 15y ago

Here you go. Starts out at a slightly quicker pace and gets gradually more challenging as the length increases. data:text/html,<script>function P(x,y){return{x:x,y:y}}function J(){return Math.floor(Math.random()*16)}function R(){z=s[0];while(T(z)){z={x:J(),y:J()};}return z;}function A(a,b){return{x:a.x+b.x,y:a.y+b.y}}function Q(a,b){return a.x==b.x&&a.y==b.y}function O(p){return p.x<0||p.x>15||p.y<0||p.y>15}function T(p){return s.filter(Q.bind(this,p)).length}function M(p){if(p.x!=-d.x&&p.y!=-d.y)m=p}function B(l){s.map(function(p){c.fillRect(p.x<<3,p.y<<3,8,8)})}function C(p){c.beginPath();c.arc((p.x<<3)+4,(p.y<<3)+4,4,0,7);c.fill()}function F(){c.fillStyle='rgb(200,0,0)';B(s);clearInterval(t);setTimeout(I,5000);}window.addEventListener('keydown',function(e){M({37:P(-1,0),38:P(0,-1),39:P(1,0),40:P(0,1)}[e.keyCode])},false);function I(){document.body.innerHTML='<canvas width=128 height=128 style="width:256px;height:256px;border:8px solid black"></canvas>';ww=0;c=document.body.firstChild.getContext('2d');c.fillStyle='rgb(0,0,0)';s=[P(8,8),P(7,8),P(6,8)];a=R();m=P(1,0);v=function(){clearInterval(t);t=setInterval(v,350-s.length);d=m;n=A(s[0],d);(O(n)||T(n))&&F();s.unshift(n);Q(s[0],a)&&(a=R())||s.pop();c.clearRect(0,0,128,128);B(s);C(a);};t=setInterval(v,250);}setTimeout(I,0)</script> I also removed the annoying alert if you hit something. Edit: also updated to prevent new dot spawning under tail and turn the snake red when you die Clickable: http://preview.tinyurl.com/biotsnake http://preview.tinyurl.com/biotsnake

bytex64 15y ago
Very nice. I also see you got a few other tricks that I missed, like factoring out the random number generator. I am impressed.
- biot 15y ago
  Thanks. I really like your use of map and filter to do the drawing and hit testing! Edit: oh, and please consider it a pull request. :)
  - bytex64 15y ago
    Sure thing. What was ww=0; trying to do? It seems to be the only place ww is referenced.
    - biot 15y ago
      Prior to implementing the s.length-based speed increase, I tried implementing a funkier frame-based gradual increase using a log scale. Ultimately, that proved to be not worth the effort as speeding it up in proportion to how many pellets were eaten was a more natural fit. So that variable is a leftover and should have been deleted.
  - bytex64 15y ago
    I've merged in your changes and made a few improvements, too. I streamlined the timeout handling so that it uses setTimeout instead of clearing and resetting setInterval. I also used color literals instead of CSS rgb(). I removed the reset to black in I() since recreating the canvas context does that automatically. Thanks, biot, you are officially awesome!
    - biot 15y ago
      Of course! It's been a while since I've done much javascript and I had forgotten about setTimeout. And your do/while loop in the R() function is much cleaner than my hack. :) One thing I noticed is that you're setting the timeout value to 350-s.length*5. As the grid is 16x16, the maximum snake length will be 256. Multiplying the length by 5 will soon make the game humanly unplayable somewhere around a length of 60.
      - biot 15y ago