原生js 实现贪吃蛇小游戏

最新推荐文章于 2021-01-20 08:26:37 发布

Sink_x0

最新推荐文章于 2021-01-20 08:26:37 发布

阅读量173

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_41622983/article/details/105345195

版权

在这里插入图片描述
HTML部分

<!DOCTYPE html><html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>贪吃蛇</title>    
	<link rel="stylesheet" href="index.css">
</head>
<body>    
	<div id="container">        
		<ul class="uls"></ul>        
		<button id="btn">开始游戏</button>        
		<div id="score">积分：0</div>        
		<div id="snake"></div>    
	</div>    
	<script src="/index.js"></script>
</body>
</html>

CSS 部分

*{    
	margin: 0;    
	padding: 0;
}

body{    
	background-color: #809060;
}

#container{    
	border-top: solid 1px #aaaaaa;    
	border-left: solid 1px #aaaaaa;    
	position: relative;    
	background: #809060;    
	margin-top: 100px;    
	margin-left: 100px;
}

ul{    
	list-style: none;
}

ul li{    
	border-bottom: solid 1px #aaaaaa;    
	border-right: solid 1px #aaaaaa;    
	float: left;
}

#container > div{    
	float: right;    
	margin-top: 5px;
}

#snake > div{    
	background-color: rgb(0, 0, 0);    
	position: absolute;    
	left: 0;    
	top: 0;
}

button{    
	color: #aaaaaa;    
	background-color: black;    
	border: none;    
	margin-top: 5px;    
	padding: 3px;    
	cursor: pointer;    
	outline: none;
}

.food{    
	background-color: #fff;    
	position: absolute !important;    
	left: 0;    
	top: 0;    
	margin-top: 0 !important;   /*取消掉 “积分” 的影响*/
}

.snakeBody{    
	opacity: 0.6;
}

JavaScript 部分

(function(){
    var container = document.querySelector('#container');
    var uls = document.querySelector('.uls');
    var datas = {
        size : 20,   //每个格子的宽高,记住额外的1px边框
        x : 20,     //每行有几个
        y : 20,     //每列有几个
        };
    var btn = document.querySelector('#btn');
    var snake = document.querySelector('#snake');
    var timer = null;   //定时器
    var oFood = null;   //食物
    var snakeData = {
        speed : 400,    //蛇移动的速度
        code : 39,      //默认向右
    }
    var snakeDiv = snake.children;
    var lis = uls.children;
    var score = document.querySelector('#score');
    var scores = 0;
    
    function init(){    //初始化游戏
        createMap();
        start();
    }
    function createMap(){   //创建地图
        container.style.width = (datas.size + 1) * datas.x + "px";
        container.style.height = (datas.size + 1) * datas.x + "px";
        
        for(var i = 0; i < datas.x*datas.y; i ++){
            var oLi = document.createElement("li");
            oLi.style.width = oLi.style.height = datas.size + "px";
            oLi.index = i;  //刷新食物，排他思想
            uls.appendChild(oLi); 
        }
    }
    function start(){   //游戏开始
        btn.addEventListener('click',function(){
            createSnake();
            moveSnake();
            bindSnake();
            createFood();
        });
    }
    function createSnake(){     //创建一条蛇
        var oSnake = document.createElement('div');
        oSnake.style.width = oSnake.style.height = datas.size + 1 + "px";
        oSnake.index = 0;
        snake.appendChild(oSnake);
    }
    function moveSnake(){    //移动贪吃蛇
        timer = setInterval(function(){

            snakeDiv[0].style.width = snakeDiv[0].style.height = datas.size + "px";
            //游戏结束
            if(isOut() || isSelf()){
                clearInterval(timer);
                alert("游戏结束");
            }

            //吃到食物
            if(eatFood(snakeDiv[0],oFood)){
                oFood.setAttribute("class","snakeBody");
                snake.appendChild(oFood);
                createFood();
                changeScore();
            }

            for(var i = snakeDiv.length-1; i > 0; i--){
                snakeDiv[i].style.left = snakeDiv[i-1].offsetLeft + "px";
                snakeDiv[i].style.top = snakeDiv[i-1].offsetTop + "px";
                snakeDiv[i].index = snakeDiv[i-1].index;
            }

            switch(snakeData.code){
                case 37:    //左
                    snakeDiv[0].style.left = snakeDiv[0].offsetLeft - datas.size - 1 + "px";
                    snakeDiv[0].index -= 1;
                    break;
                case 38:    //上
                    snakeDiv[0].style.top = snakeDiv[0].offsetTop - datas.size - 1 + "px";
                    snakeDiv[0].index -= datas.x;
                    break;
                case 39:    //右
                    snakeDiv[0].style.left = snakeDiv[0].offsetLeft + datas.size + 1 + "px";
                    snakeDiv[0].index += 1;
                    break;
                case 40:    //下
                    snakeDiv[0].style.top = snakeDiv[0].offsetTop + datas.size + 1 + "px";
                    snakeDiv[0].index += datas.x;
                    break;
            }
        },snakeData.speed);
    }
 
    function bindSnake(){   //按键改变蛇的行动
        document.onkeydown = function(e){
            var e = e || window.event;
            switch(e.keyCode){
                case 37:
                    snakeData.code = 37;
                    break;
                case 38:
                    snakeData.code = 38;
                    break;
                case 39:
                    snakeData.code = 39;
                    break;
                case 40:
                    snakeData.code = 40;
                    break;
            }
        }
    }
    function createFood(){    //创建一个食物

        var hr = [];

        for(var i = 0;i < lis.length; i++){
            if(isFilter(lis[i])){
                hr.push(lis[i]);
            }
        }

        function isFilter(li){

            for(var i = 0; i < snakeDiv.length; i++){
                if(li.index == snakeDiv[i].index)
                    return false;
            }
            return true;
        }

        oFood = document.createElement('div');
        var random = Math.floor(Math.random()*(hr.length-1));
        oFood.style.width = oFood.style.height = datas.size + "px";
        oFood.className = "food";
        container.appendChild(oFood);
        oFood.style.left = hr[random].offsetLeft + "px";
        oFood.style.top = hr[random].offsetTop + "px";
    }
    function eatFood(snake, food){     //检测是否吃掉食物
        var leftSnake = snake.offsetLeft;                       //蛇在食物左边
        var rightSnake = snake.offsetLeft + snake.offsetWidth;  //蛇在食物右边
        var topSnake = snake.offsetTop + snake.offsetHeight;    //蛇在食物上面
        var bottomSnake = snake.offsetTop;                      //蛇在食物下面

        var leftFood = food.offsetLeft;                         //食物在蛇左边
        var rightFood = food.offsetLeft + food.offsetWidth;     //食物在蛇右边
        var topFood = food.offsetTop + food.offsetHeight;       //食物在蛇上面
        var bottomFood = food.offsetTop;                        //食物在蛇下面

        if(rightSnake<=leftFood || topSnake<=bottomFood || leftSnake>=rightFood || bottomSnake>=topFood){//没有碰到
            return false;
        }else{//碰到了
            return true;
        }
    }
    function changeScore(){   //判断分数
        scores += 1;
        score.innerHTML = "积分："+scores;
    }
    function isOut(){   //是否出界   
        for(let i = 0; i < lis.length; i++){    
            if(eatFood(lis[i],snakeDiv[0])){
                return false;//撞到了，说明没有出界，游戏不结束
            }
        }
        return true;
    }
    function isSelf(){      //是否撞到自己
        for(let i = 1; i < snakeDiv.length; i++){   
            if(eatFood(snakeDiv[i],snakeDiv[0])){
                return true;//撞到了，说明撞到自己，游戏结束
            }
        }
        return false;
    }
    init();
})();

Sink_x0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js 实现贪吃蛇小游戏

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪...
复制链接

扫一扫