« »

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

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

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

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

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

28/07/2008
Brady Mulhollem [more]
12,080
8
25
1
11.58 KBytes

JavaScript Cross Browser Black Snake Game

3.6/5 25 votes / 12,080 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