jquery做贪吃蛇教程

最新推荐文章于 2025-05-12 15:44:35 发布
最新推荐文章于 2025-05-12 15:44:35 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42058732/article/details/81125891

以下要用到jquery-2.1.1.min.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    .black{
        background-color: black;
    }
    .bo{
        width: 30px;
        height: 30px;
    }
    .snake{
        background-color: blue;
    }
    .food{
        background-color: green;
    }
    </style>
</head>
<body>
    <input type="button" value="star" id="kaishi">
    <table border="1px">
        <tbody id="tbody"></tbody>
    </table>
    <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>
        var height=20;
        var width=30; 
        var timer;
        tab(height,width);
        var snake= new Object();
        snake.body=[[1,1]];
        $("#kaishi").on("click",function(){
        var a=Math.floor(Math.random()*height+1);
        var b=Math.floor(Math.random()*width+1);        
        $("tbody").children().eq(a).children().eq(b).addClass("food");
        snake.direction="right";
        for(var i=0;i<snake.body.length;i++){
            $("tbody").children().eq(snake.body[i][0]).children().eq(snake.body[i][1]).addClass("snake");
        }
        timer=setInterval(function(){
            if(snake.direction=="right"){
                if($("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).next().hasClass("black") || $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).next().hasClass("snake")){
                    alert("GG");
                    window.clearInterval(timer);
                }else{
                var arr=[snake.body[0][0],snake.body[0][1]+1];
                snake.body.unshift(arr);
                $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).addClass("snake");
                $("tbody").children().eq(snake.body[snake.body.length-1][0]).children().eq(snake.body[snake.body.length-1][1]).removeClass("snake");
                if(!$("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).hasClass("food")){
                    snake.body.pop();
                }else{
                    $("tbody").children().eq(a).children().eq(b).removeClass("food");
                    a=Math.floor(Math.random()*height+1);
                    b=Math.floor(Math.random()*width+1);
                    while(true){
                        if(!$("tbody").children().eq(a).children().eq(b).hasClass("snake")){
                            $("tbody").children().eq(a).children().eq(b).addClass("food");
                            break;
                        }else{
                            a=Math.floor(Math.random()*height+1);
                            b=Math.floor(Math.random()*width+1);
                        }
                    }                    
                }
            }
                
            }else if(snake.direction=="left"){
                    if($("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).prev().hasClass("black") || $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).prev().hasClass("snake")){
                        alert("GG");
                        window.clearInterval(timer);    
                    }else{
                        var arr=[snake.body[0][0],snake.body[0][1]-1];
                        snake.body.unshift(arr);
                        $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).addClass("snake");
                        $("tbody").children().eq(snake.body[snake.body.length-1][0]).children().eq(snake.body[snake.body.length-1][1]).removeClass("snake");
                        if(!$("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).hasClass("food")){
                            snake.body.pop();
                        }else{
                        $("tbody").children().eq(a).children().eq(b).removeClass("food");
                        a=Math.floor(Math.random()*height+1);
                        b=Math.floor(Math.random()*width+1);
                        while(true){
                        if(!$("tbody").children().eq(a).children().eq(b).hasClass("snake")){
                            $("tbody").children().eq(a).children().eq(b).addClass("food");
                            break;
                        }else{
                            a=Math.floor(Math.random()*height+1);
                            b=Math.floor(Math.random()*width+1);
                        }
                    }    
                    }
                }
                    
            }else if(snake.direction=="top"){
                    if($("tbody").children().eq(snake.body[0][0]).prev().children().eq(snake.body[0][1]).hasClass("black") || $("tbody").children().eq(snake.body[0][0]).prev().children().eq(snake.body[0][1]).hasClass("snake")){
                        alert("GG");
                        window.clearInterval(timer);    
                    }else{
                        var arr=[snake.body[0][0]-1,snake.body[0][1]];
                        snake.body.unshift(arr);
                        $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).addClass("snake");
                        $("tbody").children().eq(snake.body[snake.body.length-1][0]).children().eq(snake.body[snake.body.length-1][1]).removeClass("snake");
                        if(!$("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).hasClass("food")){
                            snake.body.pop();
                        }else{
                            $("tbody").children().eq(a).children().eq(b).removeClass("food");
                            a=Math.floor(Math.random()*height+1);
                            b=Math.floor(Math.random()*width+1);
                            while(true){
                                if(!$("tbody").children().eq(a).children().eq(b).hasClass("snake")){
                                    $("tbody").children().eq(a).children().eq(b).addClass("food");
                                    break;
                                }else{
                                    a=Math.floor(Math.random()*height+1);
                                    b=Math.floor(Math.random()*width+1);
                                }
                            }    
                    }
                }
                    
            }else if(snake.direction=="bottom"){
                    if($("tbody").children().eq(snake.body[0][0]).next().children().eq(snake.body[0][1]).hasClass("black") || $("tbody").children().eq(snake.body[0][0]).next().children().eq(snake.body[0][1]).hasClass("snake")){
                        alert("game over");
                        window.clearInterval(timer);    
                    }else{
                        var arr=[snake.body[0][0]+1,snake.body[0][1]];
                        snake.body.unshift(arr);
                        $("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).addClass("snake");
                        $("tbody").children().eq(snake.body[snake.body.length-1][0]).children().eq(snake.body[snake.body.length-1][1]).removeClass("snake");
                        if(!$("tbody").children().eq(snake.body[0][0]).children().eq(snake.body[0][1]).hasClass("food")){
                            snake.body.pop();
                        }else{
                            $("tbody").children().eq(a).children().eq(b).removeClass("food");
                            a=Math.floor(Math.random()*height+1);
                            b=Math.floor(Math.random()*width+1);
                            while(true){
                                if(!$("tbody").children().eq(a).children().eq(b).hasClass("snake")){
                                $("tbody").children().eq(a).children().eq(b).addClass("food");
                                break;
                            }else{
                                a=Math.floor(Math.random()*height+1);
                                b=Math.floor(Math.random()*width+1);
                            }
                        }    
                        }
                    }                    
            }
        },150);

        $(document).on("keydown",function(){
            switch(event.keyCode){
                case 37:
                    if(snake.direction=="left"||snake.direction=="right"){
                        return;
                    }else{
                        snake.direction="left";
                    }
                    break;
                case 38:
                    if(snake.direction=="top"||snake.direction=="bottom"){
                        return;
                    }else{
                        snake.direction="top";
                    }
                    break;
                case 39:
                    if(snake.direction=="left"||snake.direction=="right"){
                        return;
                    }else{
                        snake.direction="right";
                    }
                    break;
                case 40:
                    if(snake.direction=="top"||snake.direction=="bottom"){
                        return;
                    }else{
                        snake.direction="bottom";
                    }
                    break;
            }
        })
        })


        
        
        function tab(height,width){
            for(var i=1;i<=height+2;i++){
                var tr=$("<tr></tr>");
                for(var j=1;j<=width+2;j++){
                    if(i==1||i==height+2){
                        $(tr).append("<td class='black bo'></td>");
                        continue;
                    }
                    if(j==1||j==width+2){
                        $(tr).append("<td class='black bo'></td>");
                        continue;
                    }
                    $(tr).append("<td class='bo'></td>");
                }
                $("#tbody").append(tr);                
            }
        }
    </script>
</body>
</html>

结束了，开始玩贪吃蛇吧！

jquery实现贪吃蛇小游戏
12-20
（写的思维混乱，只是想留个纪念，有时间重新写一遍）
jquery做贪吃蛇游戏
默默默默燃的博客
05-23 612
jquery做贪吃蛇游戏 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Conten
基于Arduino的贪吃蛇游戏机
最新发布
weixin_51141489的博客
05-12 836
在数字娱乐高度发达的今天，我们常常怀念那些经典的复古游戏。其中，贪吃蛇游戏无疑是许多人童年的记忆。今天，我将带你走进一个有趣的 DIY 项目——3D 打印迷你贪吃蛇游戏机。这个项目不仅能够让你重温经典，还能让你亲手制作一个属于自己的便携式游戏机。
JQuery实现贪吃蛇游戏
旭东怪的博客
11-17 1177
很久之前学jquery时写的一个小游戏，代码如下： &lt;script type="text/javascript" src="jquery-3.2.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('body').css({ "p
用jquery写贪吃蛇
weixin_33748818的博客
12-27 675
需要具备知识：1.html、css基础2.jquery基础 具体实现方法： 创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px;...
贪吃蛇jQuery
08-26
用jq写的贪吃蛇小游戏，代码有些臃肿，还好实现了基本的功能
jQuery实现贪吃蛇游戏特效教程
### 知识点一：jQuery基本概念与作用 ...综上所述，通过掌握jQuery贪吃蛇游戏特效代码的知识点，开发者不仅能够创建一个有趣的游戏，还能锻炼对jQuery框架的运用能力，并对游戏开发的各个方面有更深刻的理解。
jQuery制作贪吃蛇小游戏教程
1. jQuery贪吃蛇游戏开发： 标题“jQuery贪吃蛇”直接指向了一个使用jQuery库开发的贪吃蛇小游戏。jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。开发一个...
jQuery打造贪吃蛇游戏教程，初学者适用
资源摘要信息:"jQuery实现的贪吃蛇小游戏" 知识点概述： 本项目是一个使用jQuery库实现的贪吃蛇小游戏，它允许用户通过学习和应用JavaScript和jQuery来创建一个互动性的网页游戏。这个小游戏不仅是一个很好的练习...
jQuery制作贪吃蛇大战游戏教程
jQuery贪吃蛇大战小游戏是一款基于Web技术开发的简易贪吃蛇游戏，玩家通过控制一条不断增长的蛇去吃掉屏幕上出现的食物，每吃一个食物，蛇的长度就会增加，同时玩家的得分也会增加。这款游戏充分展示了如何使用...
Jquery实现简易贪吃蛇游戏教程
标题“贪吃蛇(Jquery)”和描述中提到的知识点主要集中在使用jQuery实现的贪吃蛇游戏开发。在下面的内容中，我们将详细解析相关的知识点： ### jQuery简介 jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过...
jQuery贪吃蛇
04-05
jQuery贪吃蛇小游戏，可设置难度等级，键盘方向键控制游戏。
贪吃蛇(Jquery)
03-10
贪吃蛇 Jquery 简单易读 逻辑清晰 适合初学者 var x=200,y=200;//初始位置 var speed=20;//移动距离 var time = 100 ; //蛇的速度 var NodeCount = 5;//初始蛇身长度 var FoodCount = 5;//初始食物数量 var direction = 'd'; // w 向上 d 向右 a 左 s下
jQuery写的贪吃蛇
06-02
这个是用jQuery写的贪吃蛇，有详细的代码和注释，感兴趣的可以看一下
jquery版贪吃蛇
04-22
代码基础功能实现，新手，界面丑陋。
使用js+jq实现贪吃蛇网页游戏
aiguan9054的博客
06-26 261
html上的基本框架 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇游戏</title> 6 <link re...
jQuery实现贪吃蛇
qq_43574493的博客
10-07 1036
实现最简单的贪吃蛇小游戏，主要需要三个步骤 绘制地图 实现贪吃蛇的移动 判断贪吃蛇当前的运态
如何使用jquery编写贪吃蛇小游戏
weixin_42535010的博客
03-31 681
如何使用jquery编写贪吃蛇小游戏首先利用canvas创建画布给canvas设置一个小样式并链入jqueryCDN创建画布检测浏览器是否兼容canvas利用面向对象定义x,y,宽，高以及颜色创建蛇的对象循环创建身体添加蛇的公有属性画蛇的方法让蛇动起来首先检测碰到墙壁再检测蛇头与蛇身添加键盘监听随机产生食物产生随机函数判断矩形是否重合调用绘制图像 首先利用canvas创建画布 <canvas...
使用jQuery制作贪吃蛇小游戏
m0_53397599的博客
06-28 168
第一步:先把蛇身弄出来 蛇身由一系列方块组成,初始的长度是4,每次迟到方块失误增加一节蛇身。 定义一个蛇身的结构,用数组保存一堆矩形,包括蛇身。 第二步:蛇的前进 蛇的移动:根据方向移动,一次移动一个格，根据左右上下键移动。 第三部:食物方块的随机生成 需要随机的食物 需要判断食物生成不在蛇身上 第四步:吃食物 吃到方块失误是否增加一个蛇身 迟到方块食物后生成一个新的食物方块 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值