« »

This JavaScript code is a simple cross browser snake game you can add to your site on anywhere. Choose a level then use your arrow keys to attempt to eat the apple (red block), but watch out for the walls. At any time you can pause the game by pressing the space bar.

You still play more our different snake games at here.

Label: cross browser, black snake, snake, speed, arrow, level, apple,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
.board{
	width: 399px;
	background-color: lightgrey;
	border: 1px solid gray;
	position: relative;
	margin-left: 5px;
	margin-top: 5px;
}
#board{
	height: 399px;
	border-bottom: 0px;
}
#apple{
	position: absolute;
	background-color: red;
	height: 7px;
	width: 7px;
	overflow: hidden;
}
.snake{
	position: absolute;
	top: 200px;
	left: 200px;
	background-color: black;
	height: 7px;
	width: 7px;
	overflow: hidden;
}
.snake2{
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: black;
	height: 7px;
	width: 7px;
	overflow: hidden;
}
#score{
	height: 50px;
	margin-top: 0px;
}
#cscore{
	color: black;
	padding-left: 10px;
	float: left;
	width: 25%;
	font-size: xx-large;
}
#buttons{
	float: right;
	width: 50%;
	text-align: right;
	padding-top: 10px;
}
#notice{
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
	font-size: 150%;
}
#i2{
	position: absolute;
	bottom: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
	font-size: 95%;
}
</style>

Copy All x2

<script type="text/javascript">

/****************************************************
* Cross Browser Snake game- By Brady Mulhollem- http://www.bradyontheweb.com/
****************************************************/
function cbsnake()
{
	//Pixels to move at once
	this.jump = 8;
	//Size of snake. Make this one less than jump. Doesn't have to be,but adds good effect
	this.sos = 7;
	//Size of board
	//DANGER!!! this.sofb must be EVENLY dividable by this.jump DANGER!!!!
	this.sofb = 400;
	//Set things up
	this.daway = this.sofb - this.jump;
	this.correct = new Array();
	this.correct[0] = 0;
	while(this.correct[this.correct.length -1] != this.daway)
	{
		this.correct[this.correct.length] = this.correct[this.correct.length -1]+this.jump
	}
	this.zero = 0;
	var gameboard = ' <div class="board" id="board"> <div id="i2"> This is a simple game of Snake. Select a speed then use your arrow keys to attempt and eat the apple(red block), but watch out for the walls and yourself. At any time you can pause the game by pressing the space bar. More snake games are available at <a href="http://www.javascriptbank.com">jsB@nk.com</a> </div> </div><div class="board" id="score"> <span id="cscore">0</span> <span id="buttons"> <button type="button" id="slow" onClick="snake.slow()">Slow</button> <button type="button" id="medium"  onClick="snake.medium()">Medium</button> <button type="button" id="fast"  onClick="snake.fast()">Fast</button> </span></div>';
	document.write(gameboard);
}
			
cbsnake.prototype.setup = function(setspeed)
{
	var thisObj = this;
	//Score...
	this.score = 0;
	//Snake Direction
	this.sdir = 'none';
	this.sdirb = 'none'; 
	this.sdirp = 'none';
	//Snake arrays
	this.ctop = new Array();
	this.cleft = new Array();
	//Top of snake class
	this.ctop[0] = 200;
	this.ctop[1] = -8;
	//Left of Snake class
	this.cleft[0] = 200;
	this.cleft[1] = -8;
	//current top of apple
	this.atop = 0;
	//current left of apple
	this.aleft = 0;
	//Milliseconds between move
	this.speed = setspeed;
	document.getElementById('board').innerHTML = '<div id="apple"></div><div id="snake0" class="snake"></div><div id="snake1" class="snake"></div>';
	this.moveapple();
	this.stopgame = false;
	setTimeout(function(){ thisObj.msnake() },this.speed);
	document.onkeydown = function(e){ thisObj.snakedir(e) };
}
cbsnake.prototype.slow = function()
{
	this.setup(100);
	this.buttons('true');
	document.getElementById('slow').blur();
}
cbsnake.prototype.medium = function()
{
	this.setup(70);
	this.buttons('true');
	document.getElementById('medium').blur();
}
cbsnake.prototype.fast = function()
{
	this.setup(30);
	this.buttons('true');
	document.getElementById('fast').blur();
}
cbsnake.prototype.rannum = function(num1,num2)
{
	num1 = parseInt(num1);
	num2 = parseInt(num2);
	var generator = Math.random()*(Math.abs(num2-num1));
	generator = Math.round(num1+generator);
	return generator;
}
cbsnake.prototype.moveapple = function()
{
	var usethis = false;
	while(!usethis)
	{
		this.atop = this.correct[this.rannum(0,this.correct.length-1)];
		this.aleft = this.correct[this.rannum(0,this.correct.length-1)];
		if(this.numInArray(this.ctop,this.cleft,this.atop,this.aleft) == 0){
	usethis = true;
		}			
	}
	document.getElementById('apple').style.top = this.atop+"px";
	document.getElementById('apple').style.left = this.aleft+"px";
}
cbsnake.prototype.snakedir = function(e)
{
	if(!e){
	//IE...
		e = window.event;
	}
	switch(e.keyCode)
	{
		case 38:
			if(this.sdir != 'down' && this.sdirp != 'down'){
		this.sdirb = 'up';
		this.sdirp = 'up';
	}
			break;
		case 40:
			if(this.sdir != 'up' && this.sdirp != 'up'){
		this.sdirb = 'down';
		this.sdirp = 'down';
	}
			break;
		case 37:
			if(this.sdir != 'right' && this.sdirp != 'right'){
		this.sdirb = 'left';
		this.sdirp = 'left';
	}
			break;
		case 39:
			if(this.sdir != 'left' && this.sdirp != 'left'){
		this.sdirb = 'right';
		this.sdirp = 'right';
	}
			break;
		case 32:
			if(this.sdir == 'none' && this.sdirp != 'none'){
		this.sdirb = this.sdirp;
		this.sdirp = 'none';
	}
			else{
		this.sdirp = this.sdir;
		this.sdirb = 'none';
	}
			break;
	}
	return false;
}
cbsnake.prototype.msnake = function()
{
	if(this.stopgame === false){
		if(this.sdir != 'none'){
	this.moveall();
		}
		var thisObj = this;
		switch(this.sdir){
	case 'up':
				this.ctop[0] = this.ctop[0] - this.jump;
		document.getElementById('snake0').style.top = this.ctop[0]+"px";
		if((this.ctop[0] == this.zero && this.sdirb == 'up') || this.ctop[0] < this.zero){
			this.gover();
		}
				break;
	case 'down':
				this.ctop[0] = this.ctop[0] + this.jump;
		document.getElementById('snake0').style.top = this.ctop[0]+"px";
		if((this.ctop[0] == this.daway && this.sdirb == 'down') || this.ctop[0] > this.daway){
			this.gover();
		}
				break;
	case 'left':
				this.cleft[0] = this.cleft[0] - this.jump;
		document.getElementById('snake0').style.left = this.cleft[0]+"px";
		if((this.cleft[0] == this.zero && this.sdirb == 'left') || this.cleft[0] < this.zero){
			this.gover();
		}
				break;
	case 'right':
				this.cleft[0] = this.cleft[0] + this.jump;
		document.getElementById('snake0').style.left = this.cleft[0]+"px";
		if((this.cleft[0] == this.daway && this.sdirb == 'right') || this.cleft[0] > this.daway){
			this.gover();
		}
				break;
		}
	if(this.sdir != 'none'){
		this.hitself();
		this.happle();
	}
	this.sdir = this.sdirb
	setTimeout(function(){ thisObj.msnake() },this.speed);
	}
}
cbsnake.prototype.gover = function(){
	if(!this.stopgame){
		this.stopgame = true;
		var inner = document.getElementById('board').innerHTML;
		document.getElementById('board').innerHTML = inner+'<div id="notice">Game Over! Your Score was '+this.score+'</div><div id="i2">This is a simple game of Snake. Select a speed then use your arrow keys to attempt and eat the apple(red block), but watch out for the walls and yourself. At any time you can pause the game by pressing the space bar. More snake games are available at <a href="http://www.javascriptbank.com">jsB@nk.com</a></div>';
		document.getElementById('apple').style.backgroundColor = '#D7BEBE';
		for(i=0;i<this.cleft.length;i++){
	document.getElementById('snake'+i).style.backgroundColor = '#BEBEBE';
		}
		this.buttons('');
	}
}
cbsnake.prototype.happle = function(){
	if(this.atop == this.ctop[0] && this.aleft == this.cleft[0]){
		//HIT!!!
		this.score++;
		document.getElementById('cscore').innerHTML = this.score;
		this.moveapple();
		this.addsnake();
	}
}
cbsnake.prototype.addsnake = function(){
	var newsnake = document.createElement('div');
	var newid = 'snake'+this.cleft.length;
	newsnake.setAttribute('id',newid);
	//this crap is for IE. I would rather add the class name.
	newsnake.style.position = 'absolute';
	newsnake.style.top = '-10px';
	newsnake.style.left = '-10px';
	newsnake.style.display = 'none';
	newsnake.style.backgroundColor = 'black';
	newsnake.style.height = '7px';
	newsnake.style.width = '7px';
	newsnake.style.overflow = 'hidden';
	document.getElementById('board').appendChild(newsnake);
	this.cleft[this.cleft.length] = -10;
	this.ctop[this.ctop.length] = -10;
}
cbsnake.prototype.moveall = function(){
	var i = this.ctop.length - 1;
	while(i != 0){
		document.getElementById('snake'+i).style.top = document.getElementById('snake'+(i-1)).style.top;
		document.getElementById('snake'+i).style.left = document.getElementById('snake'+(i-1)).style.left;
		document.getElementById('snake'+i).style.display = 'block';
		this.ctop[i] = this.ctop[i-1];
		this.cleft[i] = this.cleft[i-1];
		i = i - 1;
	}
}
cbsnake.prototype.numInArray = function(array,array2,value,value2){
	var n = 0;
	for (var i=0; i < array.length; i++) {
		if (array[i] === value && array2[i] === value2) {
	n++;
		}
	}
	return n;
}
cbsnake.prototype.hitself = function(){
	if(this.numInArray(this.ctop,this.cleft,this.ctop[0],this.cleft[0]) > 1){
		this.gover();
	}
}
cbsnake.prototype.buttons = function(setto){
	document.getElementById('slow').disabled = setto;
	document.getElementById('medium').disabled = setto;
	document.getElementById('fast').disabled = setto;
}
</script>

Copy All x2

<script type="text/javascript">
var snake = new cbsnake();
</script>

Comment (8)
Write

by xuanducvn, 15/08/2008 11:08 AM
Reply

MÃ¬nh muá»‘n thu nhá» KHUNG cá»§a trÃ² chÆ¡i láº¡i thÃ¬ lÃ m tháº¿ nÃ o ? Ai giÃºp mÃ¬nh vá»›i !
CÃ¡m Æ¡n nhiá»u !

by Cao Phong, 15/08/2008 05:08 PM
hÃ£y sá»a .board & #board Reply

náº¿u muá»‘n thay Ä‘á»•i cÃ¡c thÃ´ng sá»‘ hiá»ƒn thá»‹ báº¡n hÃ£y chá»‰nh sá»a style cá»§a cÃ¡c Ä‘á»‘i tÆ°á»£ng, cá»¥ thá»ƒ vá»›i trÆ°á»ng há»£p cá»§a báº¡n lÃ <b>.board</b> & <b>#board</b>

by Free Game Downloads, 18/03/2010 02:03 PM
That's nice Reply

Fun for anyone who hasn't played snake before. Leaves much to be desired. Still pretty neat what you can do with JS.

by trung, 11/05/2010 08:05 AM
game snake dung thuat toan nao vay ???? Reply

CHO MÃŒNH Há»ŽI TRÃ’ CHÆ I Cross Browser Black Snake DÃ™NG THUáº¬T TOÃN NÃ€O Váº¬Y ? Náº¾U CÃ“ AI Tá»ªNG Há»ŒC QUA TRÃ TUá»† NHÃ‚N Táº O THÃŒ HÃƒY CHá»ˆ CHO MÃŒNH BIáº¾T Cá»¤ THá»‚ HÆ N NHÃ‰ ! Náº¾U CÃ“ BÃ€I VIáº¾T LIÃŠN QUAN Äáº¾N THUáº¬T TOÃN ÄÃ“ THÃŒ SHARE CHO MÃŒNH NHÃ‰ ! THANK NHIá»€U

by Marie Curie, 03/07/2010 09:07 PM
Cho mÃ¬nh há»i chÃºt Reply

cÃ³ cÃ¡ch nÃ o lÃ m hÃ¬nh con ráº¯n Ä‘áº¹p hÆ¡n khÃ´ng ?

by Cao Phong, 04/07/2010 09:07 PM
Reply

con ráº¯n nÃ y dÃ¹ng text Ä‘á»ƒ táº¡o, náº¿u muá»‘n Ä‘áº¹p hÆ¡n báº¡n chá»‹u khÃ³ dÃ¹ng cÃ¡c script dÃ¹ng hÃ¬nh áº£nh nhÃ©

by hoai, 06/08/2010 09:08 PM
Reply

download code Ä‘Ã¢u nhá»‰

by Cao Phong, 07/08/2010 07:08 AM
Reply

ngay phÃa trÃªn pháº§n bÃ¬nh luáºn Ä‘Ã³ báº¡n

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (1)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

war.money choose.works this.bid XMQV.com ABP3.com pornID.net ChainTutor.com system.money YeuNu.com ApexBTC.com ZWVQ.com CryptoKD.com eChainBank.com choose.exchange CTRCoin.com ChatTotal.com CoinHolo.com index.services CreditCard.rip Card.rip

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

28/07/2008
Brady Mulhollem [more]
11,754
8
25
1
11.58 KBytes

JavaScript Cross Browser Black Snake Game

3.6/5 25 votes / 11,754 previews / 8 comment 28/07/2008 This JavaScript code is a simple cross browser snake game you can add to your site on anywhere. Choose a...JavaScript Cross Browser Black Snake Game - Cross Browser Black Snake Game

ivanshemyaka[2] mrtranqviet HungRo VTC_A1 haiht[2] kaviku quachtankiet bigbabyit haiconmot superdo2007