<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇小遊戲</title>
<script type="text/javascript">
//将地圖聲明為全局
var plat=null;
//請食物聲明為全局
var food=null;
//請蛇聲明為全局
var snake =null;
//定時器
var setTime=null;
//地圖類
function Plat(){
//寬度
this.width=1000;
//高度
this.height=600;
//背景
//this.color = 'url(images/sfq_3.jpg)';
this.color="#eeeeee";
//定位方式
this.position='absolute';
this.margin = "200";
//儲存地圖對象
this._plat=null;
//建立地圖的方法
this.show = function(){
//在記憶體中建立一個div對象
this._plat = document.createElement("div");
//添加樣式
this._plat.style.width=this.width+"px";
this._plat.style.height=this.height+"px";
//this._plat.style.backgroundImage=this.color;
this._plat.style.backgroundColor=this.color;
this._plat.style.position = this.position;
this._plat.style.marginTop= this.margin+"px";
this._plat.style.marginLeft= 400+"px";
//将記憶體中的div放入到body對象中
document.getElementsByTagName('body')[0].appendChild(this._plat);
};
//将食物添加到地圖中
this.AppendChild = function(obj){
this._plat.appendChild(obj);
}
//食物類
function Food(){
this.width = 20;
this.height = 20;
this.color="red";
//this.color = 'url(images/furit_'+1+'.png)';
this.radius="50%";
//食物在地圖中的橫縱坐标值
this.x=0;
this.y=0;
this._food=null;
if(this._food==null){
this._food = document.createElement("div");
this._food.style.width=20+'px';
this._food.style.height=20+'px';
this._food.style.borderRadius =this.radius;
this._food.style.position = this.position;
//document.getElementsByTagName('div')[0].appendChild(div);
//通過地圖對象中的方法把食物追加到地圖中。
plat.AppendChild(this._food);
//var i = Math.round(Math.random()*5+1);
//this.color = 'url(images/furit_'+i+'.png)';
//随機出x,y的坐标
//this._food.style.backgroundImage=this.color;
this._food.style.backgroundColor=this.color;
this.x =Math.floor(Math.random()*50); //0-49
this.y =Math.floor(Math.random()*30); //0-30
this._food.style.left=(this.x*20)+"px";
this._food.style.top =(this.y*20)+"px";
//蛇類
function Snake(){
this.width=20;
this.height=20;
//記錄蛇節的數目
this.festival=[[3,3,'pink',null],[2,3,'blue',null],[1,3,'blue',null]];
//移動方式
this.direction='right';
//設定蛇的方向
this.setDirection = function(code){
console.log(code);
/*
if(this.direction=='right'&&code==37){
alert("你死了");
*/
switch(code){
case 37:
if(this.direction=='right'){
alert("你撞尾了");
clearInterval(setTime);
this.direction='left';
break;
case 38:
if(this.direction=='down'){
this.direction='top';
break;
case 39:
if(this.direction=='left'){
case 40:
if(this.direction=='top'){
this.direction='down';
for(var i=0;i<this.festival.length;i++){
//判斷蛇節是否存在，存在就不在建立了。
if(this.festival[i][3]==null){
this.festival[i][3]= document.createElement("div");
this.festival[i][3].style.width=20+"px";
this.festival[i][3].style.height=20+"px";
this.festival[i][3].style.position = this.position;
this.festival[i][3].style.backgroundColor=this.festival[i][2];
plat.AppendChild(this.festival[i][3]);
this.festival[i][3].style.borderRadius =this.radius;
this.festival[i][3].style.left = this.festival[i][0]*this.width+"px";
this.festival[i][3].style.top = this.festival[i][1]*this.height+"px";
}
//讓蛇動起來.
this.move = function(){
//蛇節的長度
var length = this.festival.length-1;
for(var i=length;i>0;i--){
//讓所有蛇節移動
this.festival[i][0] = this.festival[i-1][0];
this.festival[i][1] = this.festival[i-1][1];
//蛇頭移動
this.festival[0][0]+=1;
}else if(this.direction=='top'){
this.festival[0][1]-=1;
}else if(this.direction=='down'){
this.festival[0][1]+=1;
}else if(this.direction=='left'){
this.festival[0][0]-=1;
//判斷吃到食物
if(this.festival[0][0]==food.x&&this.festival[0][1]==food.y){
var x = this.festival[length][0];
var y = this.festival[length][1];
this.festival.push([x,y,'blue',null]);
food.show();
//判斷是否超出區域！
if(this.festival[0][0]==50&&this.direction=='right'){
alert("怎麼不小心啊!,撞牆了");
return;
}else if(this.festival[0][0]==-1&&this.direction=='left'){
}else if(this.festival[0][1]==-1&&this.direction=='top'){
}else if(this.festival[0][1]==30&&this.direction=='down'){
if(this.festival[0][0]==this.festival[i][0]&&this.festival[0][1]==this.festival[i][1]){
alert("你死了！");
this.show();
window.onload=function(){
//執行個體化地圖對象
plat = new Plat();
//将地圖對象添加到body元素中裡
plat.show();
//執行個體化食物對象
food = new Food();
//将食物對象放到地圖中
//執行個體化蛇對象
snake = new Snake();
//将蛇對象放到地圖中
snake.show();
setTime=setInterval('snake.move()',100);
//監聽鍵盤事件
document.onkeyup =function(event){
var code;
if(window.event){
code = window.event.keyCode;
}else{
code = event.keyCode;
snake.setDirection(code);
</script>
</head>
<body>
</body>
</html>
<code><</code><code>br</code><code>></code>
<code></code>
本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1927492，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)