首页 > 代码库 > javascript之【贪吃蛇系列】第一弹：简单的贪吃蛇实现

javascript之【贪吃蛇系列】第一弹：简单的贪吃蛇实现

2024-07-14 08:20:00   222人阅读

参考博客：http://blog.csdn.net/sunxing007/article/details/4187038

以上博客是参考，毕竟第一次做，真让自己盲人摸象做不出来。

不过我在其上做了一些改进，界面等效果看起来更好一些。


下图是在Chrome上运行的效果，但是火狐和IE会不兼容，onkeydown事件不能正确调用



这里用了一张图把贪吃蛇制作过程的思想画了出来，画的有点简陋：


下面就是把代码发上来，上边有详细的解释：

<html>
<head>
    <title>贪吃蛇 By Big_Adamapple</title>
<style>
    body{
    	margin-left:auto;
		margin-right:auto;
        font-size:9px;
		background:#333333;
    }
	table{margin:140px auto 10px auto; overflow:hidden; border-collapse:collapse; }
	td {width:20px; height:20px; border:1px solid #eee; background:#f4f4f4}
	input{width:80px; height:30px; margin-left:10px;}
	#operate{margin-left:650px; font-size:20px;}
	#speed,#core{height:30px; width:50px; text-align:center; color:red; font-size:20px;}
    #operate span{color:white;}
</style>
</head>
<script>
    function $(id){return document.getElementById(id);}

    //贪吃蛇类
    var Snake = {
        tbl: null,
        /**
        * body: 蛇身，数组放蛇的每一节，
        * 数据结构{x:x0, y:y0, color:color0},
        * x,y表示坐标,color表示颜色
        **/
        body: [],
        //当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
        direction: 0,
        //定时器
        timer: null,
        //速度
        speed: 250,
        //是否已经暂停
        paused: true,
        //行数
        rowCount: 20,
        //列数
        colCount: 20,
		//分数
		core: 0,
		
		
        //初始化
        init: function(){
            this.tbl = $("main");
            var x = 0;
            var y = 0;
            this.direction = Math.floor(Math.random()*4); //产生随机移动方向
           
		   //产生table
            for(var row=0;row<this.rowCount;row++){  
                var tr=this.tbl.insertRow(-1);
                for(var col=0;col<this.colCount;col++) {
                    var td=tr.insertCell(-1);
                }
            }
            //初始化产生食物
            for(var i=0; i<1; i++){
                x = Math.floor(Math.random()*this.colCount);
                y = Math.floor(Math.random()*this.rowCount);
               
                if(!this.isCellFilled(x,y)){
                    this.tbl.rows[y].cells[x].style.backgroundColor = '#009933';
                }
            }
            //产生蛇头
            while(true){
                x = Math.floor(Math.random()*this.colCount);
                y = Math.floor(Math.random()*this.rowCount);
                if(!this.isCellFilled(x,y)){
                    this.tbl.rows[y].cells[x].style.backgroundColor = "#3399CC";
                    this.body.push({x:x,y:y,color:'black'});
                    break;
                }
            }
            this.paused = true;  //设置开始
            //添加键盘事件
            document.onkeydown= function(e){
                if (!e)
					e = e || window.event;	
                switch(e.which){
                	case 13: {
                			if(Snake.paused){
                					Snake.move();
                					Snake.paused = false;
                			}
                			else{
                				  //如果没有暂停，则停止移动
                					Snake.pause();
                					Snake.paused = true;
                			}
                			break;
                		}
                    case 37:{//left
                        //阻止蛇倒退走
                        if(Snake.direction==1){
                            break;
                        }
                        Snake.direction = 3;
                        break;
                    }
                    case 38:{//up
                    	  //快捷键在这里起作用
                    		if(event.ctrlKey){
                    			  Snake.speedUp(-20);
                    				break;
                    		}
                        if(Snake.direction==2){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 0;
                        break;
                    }
                    case 39:{//right
                        if(Snake.direction==3){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 1;
                        break;
                    }
                    case 40:{//down
                    		if(event.ctrlKey){
                    			  Snake.speedUp(20);
                    				break;
                    		}
                        if(Snake.direction==0){//阻止蛇倒退走
                            break;
                        }
                        Snake.direction = 2;
                        break;
                    }
                }
            }
        },
        //移动
        move: function(){
			$("btn").value=http://www.mamicode.com/"暂停";>
代码可能有点多，而且bug也有好几个。但是对于初学者我感觉应该是挺容易理解的。


联系
我们