原生JS实现传统贪吃蛇小游戏

来源：互联网发布：百通软件编辑：程序博客网时间：2024/04/28 20:02
这是我第一个独立完成的小游戏，做完的时候发现游戏不难，但是我还是写了一天半，总之这是一个好的开始，好好加油，以后会更棒的！
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>贪食蛇小游戏</title>    <style>        *{            margin: 0;            padding: 0;        }        p{            font-size: 0;            /* -webkit-text-size-adjust:none;*/        }        #maindiv{            border-top: 1px grey solid;            border-left: 1px grey solid;            background-color: bisque;            position: absolute;            display: inline-block;            top: 10px;            left: 400px;        }        .snack{            border-width: 0;            background-color: darkorchid;            position: absolute;        }        a{            display:inline-block;            margin: 0;            border-right: 1px solid grey;            border-bottom: 1px solid grey;            width: 29px;            height: 29px;            background-color: aqua;        }        label,button{            position: absolute;            display: block;            width: 120px;            height: 80px;            font-size: large;            font-weight: bold;        }        #start{            top: 500px;            left: 500px;        }        #enddiv{            display: block;            position: absolute;            top: 150px;            left: 500px;            background-color: #cccccc;        }        #endbt{            display: none;        }        #explanation{            position: absolute;            top: 10px;            left: 10px;            width: 350px;            height: 200px;            font-size:50px;        }    </style></head><body><div id="maindiv">    <table id="ta"></table></div><div id="enddiv">    <button id="endbt">重新开始</button></div><div id="explanation">游戏说明<br>上下左右键控制<br>其余键暂停</div><button id="start" onclick="begin()">点击开始</button><script>    var set;    var ss=new Array();//snake的数组    var maindiv;    var n=37;//初始化方向    var ricex,ricey;//食物的位置    var myrice;//食物    var len;//记录成绩    var body;    var endbt;//重新开始按钮    var enddiv;//结束的块    var start;    var flag;    //产生0到10的随机数，返回30的倍数    function random() {        var x=Math.floor(Math.random()*11);        return x*30;    }    //食物的构造函数    function rice (X,Y){        this.node=null;        this.init=function () {            this.node=document.createElement("a");            this.node.style.left=1+X+"px";            this.node.style.top=1+Y+"px";            this.node.className="snack";            maindiv.appendChild(this.node);        }        this.init();    }    function  check(x,y) {        if(x<1||x>331||y<1||y>331) return true;        for(var i=0;i<ss.length;i++)        {            if(x==ss[i].node.offsetLeft&&y==ss[i].node.offsetTop)                return true;        }        return false;    }    function END() {        //  alert("end");        clearInterval(set);        body.removeEventListener("keypress",MOVE,true);        endbt.innerHTML="您的得分为"+len*100;        endbt.style.display="block";    }    function f() {        var x=random();var y=random();        for (var i = 0; i < ss.length; i++) {            if (x+1 == ss[i].node.offsetLeft && y +1== ss[i].node.offsetTop) {                f();//递归调用，保证不会和蛇的身体重合            }        }        if(ricex!=0&&ricey!=0) return ;        ricex=x;        ricey=y;        return ;    }    function addrice(X,Y) {        rice.call(this,X,Y);        this.node.style.backgroundColor="pink";    }    function snakemove()    {        var startl=ss[0].node.offsetLeft;        var startt=ss[0].node.offsetTop;        var nextl,nextt;        //改变位置        if(n==37) {//left  把最后一个块放在前面            nextl=startl-30;            nextt=startt;        }        else if(n==38){//up            nextl=startl;            nextt=startt-30;        }        else if(n==39) {//right            nextl=startl+30;            nextt=startt;        }        else if(n==40){//down            nextl=startl;            nextt=startt+30;        }        if(check(nextl, nextt)) END();        //吃到一个食物,记得放新食物        if(nextl==ricex+1&&nextt==ricey+1)        {            len++;            myrice.node.style.backgroundColor="darkorchid";            ss.unshift(myrice);            ricex=0;            ricey=0;            f();            myrice=new  addrice(ricex,ricey);        }        else{            var last=ss.pop();            maindiv.removeChild(last.node);            last.node.style.left=nextl+"px";            last.node.style.top=nextt+"px";            ss.unshift(last);            maindiv.appendChild(last.node);        }        // alert(ss.length);    }    function MOVE(e) {        if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40)        {            n=e.keyCode;        }        else        {            if(flag==true)            {                flag=false;                clearInterval(set);            }            else            {                flag=true;                set=setInterval(snakemove,300);            }        }    }    //运行的函数    var  begin=function () {        var res="";        ricex=0;        ricey=0;        flag=true;        for(var i=0;i<12;i++)        {            res+="<p>";            for(var j=0;j<12;j++)            {                res+="<a></a>";            }            res+="</p>";        }        maindiv=document.getElementById("maindiv");        maindiv.innerHTML=res;        //界面完成后初始化方块1        var my=new rice(random(),random());        ss.push(my);        len=0;        //******************以上为显示表格，并且声明变量        //  初始化一个食物        f();        myrice=new addrice(ricex,ricey);        //增加监听器        body=document.getElementsByTagName("body")[0];        enddiv=document.getElementById("enddiv");        endbt=document.getElementById("endbt");        start=document.getElementById("start");        start.style.display="none";        if(window.addEventListener){            body.addEventListener("keydown",MOVE,true);        }        else if(window.attachEvent)        {            body.attachEvent("onkeydown",MOVE);        }        else {            body.onkeydown=MOVE;        }        enddiv.addEventListener("click",function (e) {            location.reload(true);        },true);        set=  setInterval(snakemove,300);    }</script></body></html>
0 0