效果图：（抱歉，由于本人能力有限，只能暂时放静态图。后期会把动态图更新上去）
<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title></title>
???<style>
???????#map {
???????????width: 500px;
???????????height:500px;
???????????position:relative;
???????????background: #ccc;
???????}
???</style>
</head>
<body>
<div id="map"></div>
<script src="Food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
<script>
???var map = document.getElementById("map");
???var game = new Game(map);
???game.init();
</script>
</body>
</html>
Food.js内容：
(function(){
???function Food(width,height,top,left,background){
???????????this.width = width || 20;
???????????this.height = height || 20;
???????????this.top = top || 0 ;
???????????this.left = left || 0;
???????????this.background = background || "green";
???}
???var newFood = null;
???Food.prototype.init = function(map){
???????removeFood(map);
???????newFood = document.createElement("div");
???????newFood.style.width = this.width + "px";
???????newFood.style.height = this.height + "px";
???????newFood.style.background = this.background;
???????this.top = parseInt(Math.random()*(map.offsetHeight-this.height)/this.height)*this.height;
???????this.left = parseInt(Math.random()*(map.offsetWidth-this.width)/this.width)*this.width;
???????newFood.style.top = this.top + "px";
???????newFood.style.left = this.left ?+ "px";
???????newFood.style.position ?= "absolute";
???????map.appendChild(newFood);
???}
???function removeFood(map){
???????if(newFood){
???????????map.removeChild(newFood);
???????}
???}
???window.Food = Food;
})();
Snake.js内容：(function(){
???function Snake(width,height,direction){
???????this.width = width ||20;
???????this.height = height || 20;
???????this.direction = direction || "right";
???????this.body = [
???????????{top:1,left: 3,color: "red"},
???????????{top:1,left: 2,color: "gold"},
???????????{top:1,left: 1,color: "gold"}
???????]
???}
???var newSnake = [];
???Snake.prototype.init = function(map) {
???????removeSnake(map);
???????for (var i = 0; i < this.body.length; i++) {
???????????var snake = document.createElement("div");
???????????snake.style.width =this.width+ "px";
???????????snake.style.height= this.height +"px";
???????????snake.style.background = this.direction;
???????????snake.style.position ="absolute";
???????????snake.style.top = this.body[i].top*this.height +"px";
???????????snake.style.left ?= this.body[i].left*this.width+ "px";
???????????snake.style.background = this.body[i].color;
???????????map.appendChild(snake);
???????????newSnake.push(snake);
???????}
???}
???Snake.prototype.move = function(map,food){
???????//移动过程中，删除原来的，创建新的；中间加上位置移动
???????removeSnake(map);
???????for(var j=this.body.length-1;j>=1;j--){
???????????this.body[j].left = this.body[j-1].left;
???????????this.body[j].top = this.body[j-1].top;
???????}
???????switch(this.direction){
???????????case "right":
???????????????this.body[0].left +=1;
???????????????break;
???????????case "left":
???????????????this.body[0].left -=1;
???????????????break;
???????????case "top":
???????????????this.body[0].top -=1;
???????????????break;
???????????case "bottom":
???????????????this.body[0].top +=1;
???????}
???????//移动过程中，如果蛇头的位置同食物相同，则1、创建新食物 ?2、蛇身体增加一部分
???????var last = this.body[this.body.length-1];
???????var x = this.body[0].left*food.width;
???????var y = this.body[0].top * food.height;
???????if(x == food.left && y == food.top){
???????????food.init(map);
???????????var newBo = {
???????????????top: last.top,
???????????????left:last.left,
???????????????color:"gold"
???????????}
???????????this.body.push(newBo);
???????}
???????this.init(map);
???}
???function removeSnake(map){
???????for(var i=0;i<newSnake.length;){
???????????map.removeChild(newSnake[i]);
???????????newSnake.shift();
???????}
???}
???window.Snake = Snake;
})();
Game.js内容：(function(){
??function Game(map){
??????var food = new Food();
??????this.food = food;
??????var snake = new Snake();
??????this.snake = snake;
??????this.map = map;
??}
???Game.prototype.init= function(){
???????this.snake.init(this.map);
???????this.food.init(this.map);
???????snakeMove(this.map,this.food,this.snake);
???????changeDire(this.snake);
???}
???function snakeMove(map,food,snake){
???????//设置定时器，蛇移动
???????timer = setInterval(function(){
???????????snake.move(map,food);
???????????//判断蛇头位置有没有超出范围
???????????var x = map.offsetWidth/parseInt(food.width) -1;
???????????var y = map.offsetHeight/parseInt(food.height) -1;
???????????if(snake.body[0].left<0 || snake.body[0].left>x){
???????????????clearInterval(timer);
???????????????alert("Game over");
???????????}
???????????if(snake.body[0].top<0 || snake.body[0].top>y){
???????????????clearInterval(timer);
???????????????alert("Game over");
???????????}
???????},200);
???}
???//根据输入值改变方向
???function changeDire(snake){
???????document.onkeydown = function(event){
???????????event = event || window.event;
???????????var num = event.keyCode;
???????????switch(num){
???????????????case 37:snake.direction ="left";break;
???????????????case 38:snake.direction = "top";break;
???????????????case 39:snake.direction = "right";break;
???????????????case 40:snake.direction = "bottom";break;
???????????}
???????}
???}
???window.Game = Game;
})();JS编写贪吃蛇（面向对象思想）
原文地址：http://www.cnblogs.com/sunqq/p/7532346.html