用jquery写贪吃蛇

gitmilk 发布于2019-08-02 13:59 / 948人阅读

需要具备知识：
1.html、css基础
2.jquery基础

具体实现方法：

创建游戏界面

.bts
        {
            display: flex;
        }
        .bt
        {
            width: 60px;
            height: 24px;
            line-height: 24px;
            font-size: 18px;
            text-align: center;
            background: #ede;
            margin-left: 20px;
        }
        .bg
        {
            width: 400px;
            height: 400px;
            background: #ffffd;
            margin-top: 30px;
            position: relative;
        }


    
        开始

其中bts是按钮组，因为开始打算写个暂停，后面放弃了，bt是按钮，bg是游戏界面（大小最好为10,15，20的倍数，比较容易计算游戏内方块的）,其中bg（游戏界面背景）是才用relative定位，蛇与食物采用用absolute定位。

定义游戏主要函数

首先，假设游戏内方块的个数为2020，每个方块的大小为20px20px（当然为了适配手机，可以转换为rem去适配网页大小），蛇与食物的大小为一个方块的大小(food为食物，snakes为蛇）
其中因为border会在div的外面去渲染，所以，大小为20的方块，实际宽高为18px，加上上下各1px的边框，一个食物与蛇的大小为20px*20px

.snakes,.food
        {
            position: absolute;
            width: 18px;
            height: 18px;
            border: solid 1px #444;
        }
        .snakes
        {
            background: red;
        }
        .food
        {
            background: yellow;
        }

定义游戏中的变量，

    var snakes = [];    //存储蛇的位置
    var stepX = 20;    //默认向X行走的像素
    var stepY = 0;    //默认向Y行走的像素
    var live = false;    //是否存活
    var isPause = false;    //是否暂停 ，未用
    var food = {};    //食物的位置
    var keydown = "right";    //默认方向为右

start()函数，点击开始游戏时候，执行的操作

start = function(){    //开始
        if(!live)
        {
            stepX = 20;
            stepY = 0;
            keydown = "right";
            live = true;
            $(".snakes").remove();
            snakes = [];
            drawSnake(3);    //初始化蛇
            snakeMove();    //移动蛇，游戏主要进程
            createFood();    //创建食物
        }
        isPause = false;
        
    }

首先点击游戏开始的时候，需要去初始化一下蛇，让他生成在游戏区域内的左上角，由于采用的是absolute定位，所以，默认的第一个点的位置为top:0;left:0; (看成坐标轴的话，右上角的原点为0,0），定义一个蛇的方块，通过for循环，将蛇画在屏幕的左上角，其中num为默认蛇的长度。然后将创建的元素存成json格式的，push在snakes数组里面。由于push()是往最后面去添加元素，所以蛇的头是snakes里面最后的一个元素

drawSnake = function(num){        //初始化蛇身体
        var item = ""
        for(var i=0;i
使用setTimeout(),去驱动蛇，由于蛇头是存在数组的最后一位，所以蛇头其实是snakes[snakes.length-1]这个元素，然后，通过for循环，去让蛇的第i个元素的值等于第i+1个值（蛇头是最后一个，所以如果蛇长度为三个的话，先把第一个的位置移动到第第二个的位置，第二个的位置移动到第一个的位置，然后再将蛇头往其他地方移动，就说明蛇移动了），然后setTimeout里面继续递归调用该函数，蛇就会开始移动
snakeMove = function(){        //移动蛇
        if(live){    //判断蛇是否存活，如果存活，则移动蛇,否则弹出游戏结束
            for(var i=0;i
将蛇驱动后，开始控制蛇的移动与游戏结束。
isLive = function(top,left){
        if(top>380||top<0||left>380||left<0)    //如果蛇移动到画布外面，则游戏结束，开始坐标是0，0，所以边界值是380,380
        {
            return false;
        }
        else
        {    
            for(var i=0;i
将结束游戏与蛇移动处理完后，开始处理创建食物与判断是否吃掉食物
createFood = function(){    //创建食物
        $(".food").remove();    //首先清理掉开始默认的食物（后面吃掉食物的时候，也会用该函数进行创建）
        isCreate = true    //设置一个状态去判断食物是否创建成功
        do
        {
            food={    //生成食物的位置，用随机数生成（边界值为380,380 上面说过）
                top:Math.round(Math.random()*19)*20,    
                left:Math.round(Math.random()*19)*20
            }
            for(var i=0;i

" $(".bg").append(foodItem); $(".food").css({ top:food.top, left:food.left }) } eatFood = function(top,left){ //是否吃到食物 if(top==food.top&&left==food.left) //如果蛇吃到食物，那么蛇头的坐标与食物坐标重合，然后将食物那个点作为蛇头，append一个蛇元素到游戏里面，再把坐标push到蛇里面，然后创建一个新的食物 { var item = "

" snakes.push({top:top,left:left}) $(".bg").append(item) $(".snakes").last().css({ top:top, left:left }) createFood(); } }

项目源码：

专线服务服务器托管 html写贪吃蛇贪吃蛇贪吃蛇程序贪吃蛇设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53487.html

用jquery写贪吃蛇

需要具备知识：1.html、css基础2.jquery基础具体实现方法：创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

h9911 2019-08-23 14:20 评论0 收藏0
JS用原型对象写的贪吃蛇，很粗糙的代码

摘要：贪吃蛇类默识贪吃蛇速度，毫秒地图轴分为多少单位地图轴分为多少单位贪吃蛇运动速度贪吃蛇每节身体和食物的宽高地图轴分为多少单位初始化贪吃蛇属性蛇移动方向食物和食物的坐标游戏开始创建地图初始化食物初始化贪吃蛇绑定键盘方向更改贪吃蛇方向移动贪吃蛇创 /** 贪吃蛇类 @author 默识 @param {int} speed 贪吃蛇速度，毫秒 @param {int} x 地图x轴分...

YanceyOfficial 2019-08-20 16:05 评论0 收藏0
小白成长日记：写个贪吃蛇

摘要：贪吃蛇并不是通过操作来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。目前没有内置的操作符判断对象的内容是否相同。还是用的vue，本来以为不合适，但想法错了。贪吃蛇并不是通过操作dom来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。一般移动元素，我们都是变动它的css达到目的，但我在写贪吃蛇的时候发现这样很难以实现，参考了网上的资源，发现大部分人是通过记录贪吃蛇的路径...

archieyang 2019-08-21 17:55 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
用 js 写个自动寻路的贪吃蛇

摘要：前言偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。前言偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。两年前的版本_点击查看这次更新的版本_点击查看代码比较简单,使用 canvas 完成游戏的画图，抛开 A* 算法的实现，整个 html 代...

gaara 2019-08-22 10:45 评论0 收藏0