Slither.IO Simple Graphics Mode

slither.user.js

// ==UserScript==
// @name        Slither.IO Simple Graphics Mode
// @namespace   lexxyfox@gmail.com
// @include     http://slither.io/
// @version     1
// @run-at      document-idle
// @grant       none
// @updateURL   https://gist.github.com/Higgs1/18f425dcea1bcdd0cc1a42859ab24d16/raw/slither.user.js
// ==/UserScript==

console.log('POINT A');

document.getElementById('grqh').style.display = 'none'; // Graphics quality control
document.getElementById('cskh').style.display = 'none'; // Change skin control
document.getElementById('smh').style.display = 'none'; // "Share on social media..."

// Stats init
var span_line1 = document.createElement('span'),
    span_length = document.createElement('span'),
    span_line2 = document.createElement('span'),
    span_rank = document.createElement('span'),
    span_rankof = document.createElement('span'),
    lang_length, lang_of, lang_rank;
switch (country) {
  case 'DE':
    lang_length = 'Deine Länge: ';
    lang_of = ' von ';
    lang_rank = 'Dein rang: ';
    break;
  case 'FR':
    lang_length = 'Votre longueur: ';
    lang_of = ' de ';
    lang_rank = 'Ton rang: ';
    break;
  case 'BR':
    lang_length = 'Seu comprimento: ';
    lang_of = ' do ';
    lang_rank = 'Seu classificação: ';
    break;
  default:
    lang_length = 'Your length: ';
    lang_of = ' of ';
    lang_rank = 'Your rank: ';
}
span_line1.style.fontSize = 14;
span_line1.innerHTML = lang_length;
span_line1.appendChild(span_length);
span_length.style.fontWeight = 'bold';
span_line2.innerHTML = lang_rank;
span_line2.appendChild(span_rank);
span_line2.appendChild(document.createTextNode(lang_of));
span_line2.appendChild(span_rankof);
lbf.appendChild(span_line1);
lbf.appendChild(document.createElement('br'))
lbf.appendChild(span_line2);

var context = mc.getContext('2d');
context.font = '12px Arial, Helvetica Neue, Helvetica, sans-serif';
context.textBaseline = 'middle';
context.textAlign = 'center';

console.log('POINT B');

for (let i in rrs) {
  let color = 'rgb(' + rrs[i] + ',' + ggs[i] + ',' + bbs[i] + ')';
  // Food drawing
  //for (j = 2.8; j <= 18.8; j += 1) {
  for (let j in per_color_imgs[i].imgs) {
    let canvas = document.createElement("canvas"),
        context = canvas.getContext("2d"),
        //size = Math.ceil(2.5 * j + 28),
        size = Math.ceil(2.5 * j + 35),
        radius = 0.65 * j + 1.82;
    canvas.width = canvas.height = size;
    context.fillStyle = 'black';
    context.arc(size / 2, size / 2, radius + 2, 0, pi2);
    context.fill();
    context.fillStyle = color;
    context.arc(size / 2, size / 2, radius, 0, pi2);
    context.fill();
    per_color_imgs[i].imgs[j] = canvas;
  }
  //Prey drawing
  for (let j in per_color_imgs[i].pr_imgs) {
    let canvas = document.createElement("canvas"),
        context = canvas.getContext("2d"),
        size = Math.ceil(2 * j + 44),
        radius = j / 2;
    canvas.width = canvas.height = size;
    context.fillStyle = 'black';
    context.arc(size / 2, size / 2, radius + 2, 0, pi2);
    context.fill();
    context.fillStyle = color;
    context.arc(size / 2, size / 2, radius, 0, pi2);
    context.fill();
    per_color_imgs[i].pr_imgs[j] = canvas;
  }
}

console.log('POINT C');

unsafeWindow.redraw = function () {
  if (animating) {
    if (snake) {
      let h = 0.5 + 0.4 / Math.max(1, (snake.sct + 16) / 36);
      gsc != h && (
        gsc < h ? (
          gsc += 0.0002,
          gsc >= h && (
            gsc = h
          )
        ) : (
          gsc -= 0.0002,
          gsc <= h && (
            gsc = h
          )
        )
      )
    }
    let h = view_xx,
        c = view_yy;
    if (snake != null) {
      if (fvtg > 0) {
        fvtg--;
        fvx = fvxs[fvpos];
        fvy = fvys[fvpos];
        fvxs[fvpos] = 0;
        fvys[fvpos] = 0;
        fvpos++;
        if (fvpos >= vfc) {
          fvpos = 0;
        }
      }
      view_xx = snake.xx + snake.fx + fvx;
      view_yy = snake.yy + snake.fy + fvy;
      view_ang = Math.atan2(view_yy - grd, view_xx - grd);
      view_dist = Math.sqrt((view_xx - grd) * (view_xx - grd) + (view_yy - grd) * (view_yy - grd));
      bpx1 = view_xx - (mww2 / gsc + 84);
      bpy1 = view_yy - (mhh2 / gsc + 84);
      bpx2 = view_xx + (mww2 / gsc + 84);
      bpy2 = view_yy + (mhh2 / gsc + 84);
      fpx1 = view_xx - (mww2 / gsc + 24);
      fpy1 = view_yy - (mhh2 / gsc + 24);
      fpx2 = view_xx + (mww2 / gsc + 24);
      fpy2 = view_yy + (mhh2 / gsc + 24);
    }
    bgx2 -= 1 * (view_xx - h) / bgw2;
    bgy2 -= 1 * (view_yy - c) / bgh2;
    bgx2 %= 1;
    if (bgx2 < 0) {
      bgx2 += 1;
    }
    bgy2 %= 1;
    if (bgy2 < 0) {
      bgy2 += 1;
    }
    context.fillStyle = '#000000';
    context.fillRect(0, 0, mww, mhh);
    if (bgp2) {
      context.save();
      context.fillStyle = bgp2;
      context.translate(mww2, mhh2);
      context.scale(gsc, gsc);
      context.translate(bgx2 * bgw2, bgy2 * bgh2);
      context.globalAlpha = 0.4 + 0.6 * (1 - gla);
      context.fillRect(3 * - mww / gsc, 3 * - mhh / gsc, 5 * mww / gsc, 5 * mhh / gsc);
      context.restore();
    }
    
    // Food rendering
    context.save();
    context.globalAlpha = 1;
    for (h = foods_c - 1; 0 <= h; h--) {
      var food = foods[h];
      if (food.rx >= fpx1 && food.ry >= fpy1 && food.rx <= fpx2 && food.ry <= fpy2) {
        context.drawImage(food.fi, mww2 + gsc * (food.rx - view_xx) - food.fw2, mhh2 + gsc * (food.ry - view_yy) - food.fh2);
      }
    }
    context.restore();
    
    // Snake rendering
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.strokeStyle = '#90C098';
    for (let _snake of snakes) {
      // Snake culling
      _snake.iiv = false;
      for (let point of _snake.pts) {
        let px = point.xx + point.fx,
            py = point.yy + point.fy;
        if (px >= bpx1 && py >= bpy1 && px <= bpx2 && py <= bpy2) {
          _snake.iiv = true;
          break;
        }
      }
      
      if (_snake.iiv) {
      
      let w = _snake.yy + _snake.fy,
          e = _snake.xx + _snake.fx;
      
        // Snake name rendering
        if (_snake.na > 0 && e >= bpx1 - 100 && w >= bpy1 - 40 && e <= bpx2 + 100 && w <= bpy2 - 40) {
          if(_snake == snake) {
            _snake.fnfr++;
            if (_snake.fnfr > 200) {
              _snake.na -= 0.004;
              if (_snake.na < 0) {
                _snake.na = 0;
              }
            }
          }
          context.globalAlpha = 0.5 * _snake.na;
          context.fillStyle = _snake.csw;
          context.fillText(_snake.nk,
            mww2 + (e - view_xx) * gsc,
            mhh2 + (w - view_yy) * gsc + 40 * _snake.sc * gsc
          );
        }
        
        context.globalAlpha = 1;
        px = e;
        py = w;
        E = _snake.ehang;
        var t = _snake.sc,
            x = 29 * t,
            D = _snake.cfl;
        
        // Define snake shape
        context.save();
        context.beginPath();
        var point = _snake.pts[_snake.pts.length - 1];
        context.moveTo(mww2 + (px - view_xx) * gsc, mhh2 + (py - view_yy) * gsc);
        z = false;
        for (var y = _snake.pts.length - 1; y >= 0; y--) {
          point = _snake.pts[y];
          lpx = px;
          lpy = py;
          px = point.xx;
          py = point.yy;
          var B = point.fx,
              q = point.fy;
          if (D > 0) {
            px += B;
            py += q;
            lax = ax;
            lay = ay;
            ax = (px + lpx) / 2;
            ay = (py + lpy) / 2;
            if (!z) {
              lax = ax;
              lay = ay;
            }
            if (D < 1) {
              u = 1 - D;
              lpx += (lax - lpx) * u;
              lpy += (lay - lpy) * u;
              ax += (lax - ax) * u;
              ay += (lay - ay) * u;
            }
            if (z) {
              D--;
              //context.quadraticCurveTo(
              //  mww2 + (lpx - view_xx) * gsc,
              //  mhh2 + (lpy - view_yy) * gsc,
              context.lineTo(
                mww2 + (ax - view_xx) * gsc,
                mhh2 + (ay - view_yy) * gsc
              )
            } else {
              D -= _snake.chl + _snake.fchl;
              context.lineTo(
                mww2 + (ax - view_xx) * gsc,
                mhh2 + (ay - view_yy) * gsc
              );
              z = true;
            }
          }
        }
        
        // Speed boost glow
        context.save();
        if (_snake.sp > _snake.fsp) {
          y = Math.max(0, Math.min(1, (_snake.sp - _snake.ssp) / (_snake.msp - _snake.ssp)));
          context.lineWidth = (x - 2) * gsc;
          context.shadowBlur = 30 * gsc;
          context.shadowColor = 'rgba(' + _snake.rr + ',' + _snake.gg + ',' + _snake.bb + ', ' + y + ')';
          context.stroke();
        }
        
        // Border
        context.strokeStyle = '#000000';
        context.lineWidth = (x + 4) * gsc;
        context.stroke();
        
        // Body
        context.strokeStyle = _snake.cs;
        context.lineWidth = x * gsc;
        context.stroke();
        
        context.restore();
        context.restore();
        
        y = 4 * t;
        x = 6 * t; 
        
        // Eye whites
        //context.fillStyle = _snake.ec;
        context.fillStyle = 'white';
        
        // Left eye white
        B = Math.cos(E) * y + Math.cos(E - Math.PI / 2) * (x + 0.5);
        q = Math.sin(E) * y + Math.sin(E - Math.PI / 2) * (x + 0.5);
        context.beginPath();
        context.arc(mww2 + (B + e - view_xx) * gsc, mhh2 + (q + w - view_yy) * gsc, _snake.er * t * gsc, 0, pi2);
        context.closePath();
        context.fill();
        
        // Right eye white
        B = Math.cos(E) * y + Math.cos(E + Math.PI / 2) * (x + 0.5);
        q = Math.sin(E) * y + Math.sin(E + Math.PI / 2) * (x + 0.5);
        context.beginPath();
        context.arc(mww2 + (B + e - view_xx) * gsc, mhh2 + (q + w - view_yy) * gsc, _snake.er * t * gsc, 0, pi2);
        context.closePath();
        context.fill();
        
        // Eye pupils
        //context.fillStyle = _snake.ppc;
        context.fillStyle = 'black';
        
        // Left eye pupil
        B = Math.cos(E) * (y + 0.5) + _snake.rex * t + Math.cos(E - Math.PI / 2) * x;
        q = Math.sin(E) * (y + 0.5) + _snake.rey * t + Math.sin(E - Math.PI / 2) * x;
        context.beginPath();
        context.arc(mww2 + (B + e - view_xx) * gsc, mhh2 + (q + w - view_yy) * gsc, 3.5 * t * gsc, 0, pi2);
        context.closePath();
        context.fill();
        
        // Right eye pupil
        B = Math.cos(E) * (y + 0.5) + _snake.rex * t + Math.cos(E + Math.PI / 2) * x;
        q = Math.sin(E) * (y + 0.5) + _snake.rey * t + Math.sin(E + Math.PI / 2) * x;
        context.beginPath();
        context.arc(mww2 + (B + e - view_xx) * gsc, mhh2 + (q + w - view_yy) * gsc, 3.5 * t * gsc, 0, pi2);
        context.closePath();
        context.fill();
      }
    }
    
    // Prey rendering
    context.save();
    context.globalAlpha = 1;
    for (let prey of preys) {
      px = mww2 + gsc * (prey.xx + prey.fx - view_xx);
      py = mhh2 + gsc * (prey.yy + prey.fy - view_yy);
      if (-50 <= px && -50 <= py && px <= mwwp50 && py <= mhhp50) {
        context.drawImage(prey.fi, px - prey.fw2, py - prey.fh2);
      }
    }
    context.restore();
    
    // Map border rendering
    if (Math.abs(grd - view_dist) < 4000) {
      context.save();
      context.lineWidth = 23 * gsc;
      context.strokeStyle = '#800000';
      context.fillStyle = '#300000';
      context.beginPath();
      xx = grd + Math.cos(view_ang - 2000 / grd) * grd * 0.98;
      yy = grd + Math.sin(view_ang - 2000 / grd) * grd * 0.98;
      context.moveTo(mww2 + (xx - view_xx) * gsc, mhh2 + (yy - view_yy) * gsc);
      for (y = - 2000; y <= 2000; y += 100) {
        xx = grd + Math.cos(view_ang + y / grd) * grd * 0.98;
        yy = grd + Math.sin(view_ang + y / grd) * grd * 0.98;
        context.lineTo(mww2 + (xx - view_xx) * gsc, mhh2 + (yy - view_yy) * gsc);
      }
      xx = grd + Math.cos(view_ang + 2000 / grd) * (grd + 4000);
      yy = grd + Math.sin(view_ang + 2000 / grd) * (grd + 4000);
      context.lineTo(mww2 + (xx - view_xx) * gsc, mhh2 + (yy - view_yy) * gsc);
      xx = grd + Math.cos(view_ang - 2000 / grd) * (grd + 4000);
      yy = grd + Math.sin(view_ang - 2000 / grd) * (grd + 4000);
      context.lineTo(mww2 + (xx - view_xx) * gsc, mhh2 + (yy - view_yy) * gsc);
      context.closePath();
      context.stroke();
      context.fill();
      context.restore()
    }
    
    // Stats rendering
    if (rank > 0 && snake_count > 0 && playing) {
      span_length.innerHTML = Math.floor(150 * (fpsls[snake.sct] + snake.fam / fmlts[snake.sct] - 1) - 50) / 10;
      span_rankof.innerHTML = snake_count;
      span_rank.innerHTML = rank;
    }
    context.restore();
  }
}

console.log('POINT D')

• Removed:
  • Debug UI
  • High quality graphics code
  • Skin changing room
  • Primary snake rendering code
  • Snake death fade out
  • Food spawn fade in
  • Prey eaten animation
  • Duplicate context related code
  • Shadows
  • Transparency
• Moved stats display outside of rendering code
• Other things???

TODO:

• Remove blurs