前端学习笔记——“贪吃蛇”小游戏制作（三）

最新推荐文章于 2024-05-15 02:21:18 发布

dsq-ee

最新推荐文章于 2024-05-15 02:21:18 发布

阅读量210

点赞数 2

本文链接：https://blog.csdn.net/qq_39046053/article/details/104786345

版权

本文介绍如何在前端实现贪吃蛇游戏。包括食物的随机生成，确保生成的坐标不会与贪吃蛇身体重叠，以及贪吃蛇吃到食物后长度增加的逻辑。通过生成随机数确定食物位置，利用数组操作模拟蛇的移动和增长，详细阐述了关键代码实现。

摘要由CSDN通过智能技术生成

上篇笔记我完成了用键盘的上、下、左、右控制单个色块的移动，这篇笔记实现“食物”的生成，以及“贪吃蛇”吃到食物后身体增长的效果。

一、“食物的生成”

在贪吃蛇移动的过程中，界面中除贪吃蛇身体外产生一个“食物”（红色块表示）。

实现方法为，利用random生成一个0-99的随机数，以此作为id给当前块添加红色背景。如果生成的随机数恰好为“贪吃蛇”组成块的id，则重新生成随机数，直到生成的随机数与“贪吃蛇”的id不重合。

//生成食物
function ran(){
    var flag = 0;
     random=Math.floor(Math.random()*100);     //生成随机数
        for(var i=0;i<save.length;i++)     //判断随机数是否为“贪吃蛇”内部id
        {

            if(random==save[i]){
                console.log("red");
                var part3=document.getElementById(random);
                part3.style.backgroundColor="rgb(85, 173, 122)"; 
                random=Math.floor(Math.random(feed)*100);
                i=0;
            }
        }
            var part3=document.getElementById(random);  
            part3.