Skip to content
← Back to Community
How to program Snake in HTML5 easily!!!
Profile icon
FatherLiberty

How to program Snake in HTML5 easily!!!

Programming snake in HTML isn't as hard as it may sound. It's actually pretty easy.

First, we'll need our main HTML

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <style> canvas { display: block; position: absolute; border: 5px solid #000; margin: auto; top: 0; bottom: 0; right: 0; left: 0; } body { background: #e01e10; } </style> </head> <body> </body> </html>

Then, you'll want to add your script. See that body tag? That's where we'll put the script.

The script is relatively simple. It's all right here.

<body> <script> var COLS = 26, ROWS = 26, EMPTY = 0, SNAKE = 1, FRUIT = 2, LEFT = 0, UP = 1, RIGHT = 2, DOWN = 3, KEY_LEFT = 37, KEY_UP = 38, KEY_RIGHT = 39, KEY_DOWN = 40, canvas, ctx, keystate, frames, score; grid = { width: null, height: null, _grid: null, init: function(d, c, r) { this.width = c; this.height = r; this._grid = []; for (var x=0; x < c; x++) { this._grid.push([]); for (var y=0; y < r; y++) { this._grid[x].push(d); } } }, set: function(val, x, y) { this._grid[x][y] = val; }, get: function(x, y) { return this._grid[x][y]; } } snake = { direction: null, last: null, _queue: null, init: function(d, x, y) { this.direction = d; this._queue = []; this.insert(x, y); }, insert: function(x, y) { this._queue.unshift({x:x, y:y}); this.last = this._queue[0]; }, remove: function() { return this._queue.pop(); } }; function setFood() { var empty = []; for (var x=0; x < grid.width; x++) { for (var y=0; y < grid.height; y++) { if (grid.get(x, y) === EMPTY) { empty.push({x:x, y:y}); } } } var randpos = empty[Math.round(Math.random()*(empty.length - 1))]; grid.set(FRUIT, randpos.x, randpos.y); } function main() { canvas = document.createElement("canvas"); canvas.width = COLS*20; canvas.height = ROWS*20; ctx = canvas.getContext("2d"); document.body.appendChild(canvas); ctx.font = "12px Helvetica"; frames = 0; keystate = {}; document.addEventListener("keydown", function(evt) { keystate[evt.keyCode] = true; }); document.addEventListener("keyup", function(evt) { delete keystate[evt.keyCode]; }); init(); loop(); } function init() { score = 0; grid.init(EMPTY, COLS, ROWS); var sp = {x:Math.floor(COLS/2), y:ROWS-1}; snake.init(UP, sp.x, sp.y); grid.set(SNAKE, sp.x, sp.y); setFood(); } function loop() { update(); draw(); window.requestAnimationFrame(loop, canvas); } function update() { frames++; if (keystate[KEY_LEFT] && snake.direction !== RIGHT) { snake.direction = LEFT; } if (keystate[KEY_UP] && snake.direction !== DOWN) { snake.direction = UP; } if (keystate[KEY_RIGHT] && snake.direction !== LEFT) { snake.direction = RIGHT; } if (keystate[KEY_DOWN] && snake.direction !== UP) { snake.direction = DOWN; } if (frames%7 === 0) { var nx = snake.last.x; var ny = snake.last.y; switch (snake.direction) { case LEFT: nx--; break; case UP: ny--; break; case RIGHT: nx++; break; case DOWN: ny++; break; } if (0 > nx || nx > grid.width-1 || 0 > ny || ny > grid.height-1 || grid.get(nx, ny) === SNAKE ) { return init(); } if (grid.get(nx, ny) === FRUIT) { score++; setFood(); } else { var tail = snake.remove(); grid.set(EMPTY, tail.x, tail.y); } grid.set(SNAKE, nx, ny); snake.insert(nx, ny); } } function draw() { var tw = canvas.width/grid.width; var th = canvas.height/grid.height; for (var x=0; x < grid.width; x++) { for (var y=0; y < grid.height; y++) { switch (grid.get(x, y)) { case EMPTY: ctx.fillStyle = "#000"; break; case SNAKE: ctx.fillStyle = "#10e02f"; break; case FRUIT: ctx.fillStyle = "#e01e10"; break; } ctx.fillRect(x*tw, y*th, tw, th); } } ctx.fillStyle = "#000"; } main(); </script> </body>

And that's it!!! A simple HTML snake tutorial!

Voters
Profile icon
MusapYahia
Profile icon
DianaEstrada12
Profile icon
FatherLiberty
Comments
hotnewtop
Profile icon
townleyst

Thanks dude, much appreciated.

Profile icon
QuickV

It's not really a tutorial lol, it's just 2 pieces of code xD.

Profile icon
FatherLiberty

@QuickV dawg, idc.

Profile icon
QuickV

You replied one month too late.

dawg, idc.

ya should :P

@FatherLiberty

Profile icon
FatherLiberty

@QuickV זה לא משנה. הכנתי את זה לפני חודשים, וזה יכול להיחשב כמדריך על ידי כמה.

Profile icon
FatherLiberty

@QuickV ועניתי באיחור של חודש כי לקחתי הפסקה.

Profile icon
QuickV

Oh that makes sense. Take shorter breaks though.

@FatherLiberty

Profile icon
QuickV

Yeah, but the title says "How To Program", not "Snake Guide" @FatherLiberty

Profile icon
FatherLiberty

@QuickV אבל הייתי ב -3 חופשות. Replit אינו עדיפות.

Profile icon
QuickV

oh ok.... then maybe randomly check in during your vacations :)

@FatherLiberty

Profile icon
FatherLiberty

@QuickV לא הייתה לי גישה למחשב שלי

Profile icon
QuickV

אה אוקיי .... גם למה אתה מקליד בעברית עכשיו? @FatherLiberty

Profile icon
FatherLiberty

@QuickV עברית היא השפה הראשונה שלי. אני מעדיף לכתוב בו.

Profile icon
FatherLiberty

@QuickV למרות שאני יודע לקרוא אנגלית. אני יכול לכתוב באנגלית אם אתה רוצה. זה פשוט לא יהיה טוב חחח.

Profile icon
QuickV

That's okay, but each time I reply I have to use google translate lol.

@FatherLiberty

Profile icon
QuickV
Profile icon
FatherLiberty

@QuickV ooh ok sorry

Profile icon
QuickV

it's ok :)

@FatherLiberty