贪吃蛇

最新推荐文章于 2024-04-20 11:28:47 发布

豆儿糖吖

最新推荐文章于 2024-04-20 11:28:47 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/qq_42815251/article/details/82665705

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //创建地图
        function Map(){
            this.className="map";
            this._map=null;
            this.createmap= function () {
                if(this._map==null){
                    this._map=document.createElement("div");
                    this._map.className=this.className;
                    document.body.appendChild(this._map);
                }
            }
        }
        //创建蛇对象
        function Snake() {
            this.snakedrec="left";
            this.size=40;
            this.className="snake";
            this._snake=[[5,5,null,"red"],[6,5,null,"white"],[7,5,null,"white"],[8,5,null,"white"]]
            this.createsnake=function(){
                for(var key in this._snake){
                    if(this._snake[key][2]==null){
                        this._snake[key][2]=document.createElement("div");
                        this._snake[key][2].className=this.className;
                        this._snake[key][2].style.backgroundColor=this._snake[key][3];
                        map._map.appendChild(this._snake[key][2]);
                    }
                    this._snake[key][2].style.left=(parseInt(this._snake[key][0])*this.size)+"px";
                    this._snake[key][2].style.top=(parseInt(this._snake[key][1])*this.size)+"px";
                }

            };
            //蛇移动
            this.snakemove= function () {
                //保存蛇每一节坐标（x，y）
                for(var i=this._snake.length-1;i>0;i--){
                    this._snake[i][0]=this._snake[i-1][0];
                    this._snake[i][1]=this._snake[i-1][1];
                }
                //蛇的移动只有蛇头移动
                switch(this.snakedrec){
                    case "left":
                        this._snake[0][0]-=1;
                        break;
                    case "right":this._snake[0][0]+=1;
                        break;
                    case "top":
                        this._snake[0][1]-=1;break;
                    case "down":this._snake[0][1]+=1;
                        break;
                }
                this.createsnake();
                if(this._snake[0][0]==food.x&&this._snake[0][1]==food.y)
                {
                    this._snake.push([
                        this._snake[this._snake.length-1][0],
                        this._snake[this._snake.length-1][1],
                        null,
                        "white"
                    ]);
                    food.createfood();
                }
                //碰壁处理
                if(this._snake[0][0]<=-1){
                    this._snake[0][0]=19;
                }
               if(this._snake[0][0]>=20){
                    this._snake[0][0]=0;
                }
                if(this._snake[0][1]<=-1){
                    this._snake[0][1]=19
                }
                if(this._snake[0][1]>=20){
                    this._snake[0][1]=0;
                }
            };
        }
        //创建食物
        function Food(){
            this.className="food";
            this.x;
            this.y;
            this.color="rgb("+Math.random()*225+","+Math.random()*225+","+Math.random()*225+")"
            this._food=null;
            this.createfood= function () {
                if(this._food==null){
                    this._food=document.createElement("div");
                    this._food.className=this.className;
                    this._food.style.backgroundColor=this.color;
                   map._map.appendChild(this._food);
                }
                this.x=Math.floor(Math.random()*20);
                this.y=Math.floor(Math.random()*20);
                this._food.style.left=(this.x*40)+"px";
                this._food.style.top=(this.y*40)+"px";
            }
        }
        var map;
        var food;
        Map.prototype.snake=new Snake();
        window.onload= function () {
            map=new Map();
            map.createmap();
            map.snake.createsnake();
            setInterval("map.snake.snakemove()",300);
            food=new Food();
            food.createfood();
            window.onkeyup= function (e) {
                switch(e.keyCode){
                    case 37:
                        if( map.snake.snakedrec!="right"){
                            map.snake.snakedrec="left";
                        }
                        break;
                    case 38:
                        if(map.snake.snakedrec!="down"){
                            map.snake.snakedrec="top"; }
                        break;
                    case 39:
                        if( map.snake.snakedrec!="left"){
                            map.snake.snakedrec="right";}
                        break;
                    case 40:
                        if(map.snake.snakedrec!="top"){
                            map.snake.snakedrec="down";}
                        break;
                }
            }
        }
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .map{
            overflow: hidden;
            width: 800px;
            height: 800px;
            border: 1px solid black;
            margin: 0 auto;
            background: lightpink;
            position: relative;
        }
        .snake{
            width: 40px;
            height: 40px;
            position: absolute;
        }
        .food{
            width: 40px;
            height: 40px;
            position: absolute;
        }
        .box{
            position: absolute;
        }
    </style>
</head>
<body>

</body>
</html>

豆儿糖吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; //创建地图 function Map(){
复制链接

扫一扫