首页 / JQUERY / jQuery实现贪吃蛇小游戏方法实例

jQuery实现贪吃蛇小游戏方法实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现贪吃蛇小游戏方法实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9303字，纯文字阅读大概需要14分钟。

内容图文

关于JS实现贪吃蛇的文章有很多，本文我们主要用jQury来实现贪吃蛇小游戏，下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法，文中给出的是吸纳思路和示例代码，需要的朋友可以参考下。

前言

相信贪吃蛇的游戏大家都玩过。在那个水果机还没有流行，人手一部诺基亚的时代，贪吃蛇是手机中的必备游戏。笔者闲的无聊的时候就拿出手机来玩上几局，挑战一下自己的记录。

后来上大学了，用c语言做过贪吃蛇的游戏，不过主要是通过函数来控制（PS：现在让我看代码都看不懂(⊙﹏⊙)）。现在学习前端框架之后，通过jQuery来实现一个贪吃蛇的游戏效果，虽然游戏界面比（bu）较（ren）简（zhi）陋（shi），但是主要学习一下游戏中面向对象和由局部到整体的思想。

设计思想

在开始写代码前首先让我们来构思一下整体游戏的实现过程：

jQuery实现贪吃蛇小游戏方法实例 - 文章图片

需要的对象

首先既然是贪吃蛇，那么游戏中肯定要涉及到两个对象，一个是蛇的对象，另一个是食物的对象。食物对象肯定要有一个属性就是食物的坐标点，蛇对象有一个属性是一个数组，用来存放蛇身体所有的坐标点。

如何移动

另外全局需要有一个定时器来周期性的移动蛇的身体。由于蛇的身体弯弯曲曲有各种不同的形状，因此我们只处理蛇的头部和尾部，每次移动都根据移动的方向的不同来添加新的头部，再把尾部擦去，看起来就像蛇在向前爬行一样。

方向控制

由于蛇有移动的方向，因此我们也需要在全局定义一个方向对象，对象中有上下左右所代表的值。同时，在蛇对象的属性中我们也需要定义一个方向属性，用来表示当前蛇所移动的方向。

碰撞检测

在蛇向前爬行的过程中，会遇到三种不同的情况，需要进行不同的判断检测。第一种情况是吃到了食物，这时候就需要向蛇的数组中添加食物的坐标点；第二种情况是碰到了自己的身体，第三种是碰到了边界，这两种情况都导致游戏结束；如果不是上面的三种情况，蛇就可以正常的移动。

开始编程

整体构思有了，下面就开始写代码了。

搭建幕布

首先整个游戏需要一个搭建活动的场景，我们通过一个表格布局来作为整个游戏的背景。

<style type="text/css">
#pannel table{
 border-collapse:collapse;
}
#pannel td{
 width: 10px;
 height: 10px;
 border: 1px solid #000;
}
#pannel td.food{
 background: green;
}
#pannel td.body{
 background: #f60;
}
</style>
<p id="pannel">
</p>
<select name="" id="palSize">
 <option value="10">10*10</option>
 <option value="20">20*20</option>
 <option value="40">30*30</option>
</select>
<select name="" id="palSpeed">
 <option value="500">速度-慢</option>
 <option value="250">速度-正常</option>
 <option value="100">速度-快</option>
</select>
<button id="startBtn">开始</button>

pannel就是我们的幕布，我们在这个里面用td标签来画上一个个的“像素点”。我们用两种样式来表现不同的对象，.body表示蛇的身体的样式，.food表示食物的样式。

var settings = {
 // pannel面板的长度
 pannelSize: 10,
 // 贪吃蛇移动的速度
 speed: 500,
 // 贪吃蛇工作线程
 workThread: null,
};
function setPannel(size){
 var content = [];
 content.push('<table>');
 for(let i=0;i<size;i++){
 content.push('<tr>');
 for(let j=0;j<size;j++){
 content.push('<td class="td_'+i+'_'+j+'"></td>');
 }
 content.push('</tr>');
 }
 content.push('</table>');
 $('#pannel').html(content.join(''));
}
setPannel(settings.pannelSize);

我们定义了一个全局的settings用来存放全局性的变量，比如幕布的大小、蛇移动的速度和工作的线程。然后通过一个函数把幕布画了出来，最后的效果就是这样：

jQuery实现贪吃蛇小游戏方法实例 - 文章图片

方向和定位

既然我们的“舞台”已经搭建完了，怎么来定义我们“演员”的位置和移动的方向呢。首先定义一个全局的方向变量，对应的数值就是我们的上下左右方向键所代表的keyCode。

var Direction = {
 UP: 38,
 DOWN: 40,
 LEFT: 37,
 RIGHT: 39,
};

我们在上面画幕布的时候通过两次遍历画出了一个类似于中学里学的坐标系，有X轴和Y轴。如果每次都用{x:x,y:y}来表示会很（mei）麻（bi）烦（ge），我们可以定义一个坐标点对象。

function Position(x,y){
 // 距离X轴长度，取值范围0~pannelSize-1
 this.X = x || 0;
 // 距离Y轴长度，取值范围0~pannelSize-1
 this.Y = y || 0;
}

副咖–食物

既然定义好了坐标点对象，那么可以先来看一下简单的对象，就是我们的食物（Food）对象，上面说了，它有一个重要的属性就是它的坐标点。

function Food(){
 this.pos = null;
 // 随机产生Food坐标点，避开蛇身
 this.Create = function(){
 if(this.pos){
 this.handleDot(false, this.pos, 'food');
 }
 let isOk = true;
 while(isOk){
 let x = parseInt(Math.random()*settings.pannelSize),
 y = parseInt(Math.random()*settings.pannelSize);
 if(!$('.td_'+x+'_'+y).hasClass('body')){
 isOk = false;
 let pos = new Position(x, y);
 this.handleDot(true, pos, 'food');
 this.pos = pos;
 }
 }
 };
 // 画点
 this.handleDot = function(flag, dot, className){
 if(flag){
 $('.td_'+dot.X+'_'+dot.Y).addClass(className);
 } else {
 $('.td_'+dot.X+'_'+dot.Y).removeClass(className);
 }
 };
}

既然食物有了坐标点这个属性，那么我们什么时候给他赋值呢？我们知道Food是随机产生的，因此我们定义了一个Create函数用来产生Food的坐标点。但是产生的坐标点又不能在蛇的身体上，所以通过一个while循环来产生坐标点，如果坐标点正确了，就终止循环。此外为了方便我们统一处理坐标点的样式，因此定义了一个handleDot函数。

主咖–蛇

终于到了我们的主咖，蛇。首先定义一下蛇基本的属性，最重要的肯定是蛇的body属性，每次移动时，都需要对这个数组进行一些操作。其次是蛇的方向，我们给它一个默认向下的方向。然后是食物，在蛇的构造函数中我们传入食物对象，在后续移动时需要判断是否吃到食物。

function Snake(myFood){
 // 蛇的身体
 this.body = [];
 // 蛇的方向
 this.dir = Direction.DOWN;
 // 蛇的食物
 this.food = myFood;
 // 创造蛇身
 this.Create = function(){
 let isOk = true;
 while(isOk){
 let x = parseInt(Math.random()*(settings.pannelSize-2))+1,
 y = parseInt(Math.random()*(settings.pannelSize-2))+1;
 console.log(x,y)
 if(!$('.td_'+x+'_'+y).hasClass('food')){
 isOk = false;
 let pos = new Position(x, y);
 this.handleDot(true, pos, 'body')
 this.body.push(pos);
 }
 }
 };
 this.handleDot = function(flag, dot, className){
 if(flag){
 $('.td_'+dot.X+'_'+dot.Y).addClass(className);
 } else {
 $('.td_'+dot.X+'_'+dot.Y).removeClass(className);
 }
 };
}

移动函数处理

下面对蛇移动的过程进行处理，由于我们每次都采用添头去尾的方式移动，因此我们每次只需要关注蛇的头和尾。我们约定数组的第一个元素是头，最后一个元素是尾。

this.Move = function(){
 let oldHead = Object.assign(new Position(), this.body[0]),
 oldTail = Object.assign(new Position(), this.body[this.body.length - 1]),
 newHead = Object.assign(new Position(), oldHead);
 switch(this.dir){
 case Direction.UP:
 newHead.X = newHead.X - 1;
 break;
 case Direction.DOWN:
 newHead.X = newHead.X + 1;
 break;
 case Direction.LEFT:
 newHead.Y = newHead.Y - 1;
 break;
 case Direction.RIGHT:
 newHead.Y = newHead.Y + 1;
 break;
 default:
 break;
 }
 // 数组添头
 this.body.unshift(newHead);
 // 数组去尾
 this.body.pop();
};

检测函数处理

这样我们对蛇身数组就处理完了。但是我们还需要对新的头（newHead）进行一些碰撞检测，判断新头部的位置上是否有其他东西（碰撞检测）。

// 食物检测
this.eatFood = function(){
 let newHead = this.body[0];
 if(newHead.X == this.food.pos.X&&newHead.Y == this.food.pos.Y){
 return true;
 } else {
 return false;
 }
};
// 边界检测
this.konckWall = function(){
 let newHead = this.body[0];
 if(newHead.X == -1 || 
 newHead.Y == -1 || 
 newHead.X == settings.pannelSize || 
 newHead.Y == settings.pannelSize ){
 return true;
 } else {
 return false;
 }
};
// 蛇身检测
this.konckBody = function(){
 let newHead = this.body[0],
 flag = false;
 this.body.map(function(elem, index){
 if(index == 0)
 return;
 if(elem.X == newHead.X && elem.Y == newHead.Y){
 flag = true;
 }
 });
 return flag;
};

重新绘制

因此我们需要对Move函数进行一些扩充：

this.Move = function(){
 // ...数组操作
 if(this.eatFood()){
 this.body.push(oldTail);
 this.food.Create();
 this.rePaint(true, newHead, oldTail);
 } else if(this.konckWall() || this.konckBody()) {
 this.Over();
 } else {
 this.rePaint(false, newHead, oldTail);
 }
};
this.Over = function(){
 clearInterval(settings.workThread);
 console.log('Game Over');
};
this.rePaint = function(isEatFood, newHead, oldTail){
 if(isEatFood){
 // 加头
 this.handleDot(true, newHead, 'body');
 } else {
 // 加头
 this.handleDot(true, newHead, 'body');
 // 去尾
 this.handleDot(false, oldTail, 'body');
 }
};

因为在Move函数处理数组的后我们的蛇身还没有重新绘制，因此我们很巧妙地判断如果是吃到食物的情况，在数组中就把原来的尾部添加上，这样就达到了吃食物的效果。同时我们定义一个rePaint函数进行页面的重绘。

jQuery实现贪吃蛇小游戏方法实例 - 文章图片

游戏控制器

我们的“幕布”、“演员”和“动作指导”都已经到位，那么，我们现在就需要一个“摄影机”进行拍摄，让它们都开始“干活”。

function Control(){
 this.snake = null;
 // 按钮的事件绑定
 this.bindClick = function(){
 var that = this;
 $(document).on('keydown', function(e){
 if(!that.snake)
 return;
 var canChangrDir = true;
 switch(e.keyCode){
 case Direction.DOWN:
 if(that.snake.dir == Direction.UP){
 canChangrDir = false;
 }
 break;
 case Direction.UP:
 if(that.snake.dir == Direction.DOWN){
 canChangrDir = false;
 }
 break;
 case Direction.LEFT:
 if(that.snake.dir == Direction.RIGHT){
 canChangrDir = false;
 }
 break;
 case Direction.RIGHT:
 if(that.snake.dir == Direction.LEFT){
 canChangrDir = false;
 }
 break;
 default:
 canChangrDir = false;
 break;
 }
 if(canChangrDir){
 that.snake.dir = e.keyCode;
 }
 });
 $('#palSize').on('change',function(){
 settings.pannelSize = $(this).val();
 setPannel(settings.pannelSize);
 });
 $('#palSpeed').on('change',function(){
 settings.speed = $(this).val();
 });
 $('#startBtn').on('click',function(){
 $('.food').removeClass('food');
 $('.body').removeClass('body');
 that.startGame();
 });
 };
 // 初始化
 this.init = function(){
 this.bindClick();
 setPannel(settings.pannelSize);
 };
 // 开始游戏
 this.startGame = function(){
 var food = new Food();
 food.Create();
 var snake = new Snake(food);
 snake.Create();
 this.snake =snake;
 settings.workThread = setInterval(function(){
 snake.Move();
 },settings.speed);
 }
 this.init();
}

我们给document绑定一个keydown事件，当触发按键时改变蛇的移动方向，但是如果和当前蛇移动方向相反时就直接return。最后的效果如下：

jQuery实现贪吃蛇小游戏方法实例 - 文章图片

可以戳这里查看实现效果

点击这里下载源码

总结

实现了贪吃蛇的一些基本功能，比如移动、吃点、控制速度等，页面也比较的简单，就一个table、select和button。后期可以添加一些其他的功能，比如有计分、关卡等，也可以添加多个点，有的点吃完直接GameOver等等。

内容总结

以上是互联网集市为您收集整理的jQuery实现贪吃蛇小游戏方法实例全部内容，希望文章能够帮你解决jQuery实现贪吃蛇小游戏方法实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295641.html

来源：【匿名】

【上一篇】jQuery控制元素隐藏和显示实例分享【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实现贪吃蛇小游戏方法实例】教程文章相关的互联网学习教程文章

jquery工具方法proxy【代码】

proxy : 改变this指向使用方法1：function show(){　　alert(this);}$.proxy(show,document)(); //document使用方法2：function show(n1,n2){　　alert(n1);　　alert(n2);　　alert(this);}$.proxy(show,document)(3,4); //document 3 4$.proxy(show,document,3,4)(); //document 3 4$.proxy(show,document,3)(4); //document 3 4使用方法3：var obj = {　　show:function(){　　　　alert(this);　　}};$(document).cl...

[ jquery 文档处理 appendTo(content) ] 此方法用于把所有匹配的元素追加到另一个指定的元素集合中【代码】

把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。实例:<html lang=‘zh-cn‘> <head> ...

jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理【代码】

//对外接口jQuery.extend({queue: function( elem, type, data ) {//入队。元素、队列名字、存进去的函数//jQuery.queue( this, type, function( next, hooks ) {})var queue;if ( elem ) {type = ( type || "fx" ) + "queue";//不写队列名字就是fx// $.queue( document , ‘q1‘ , aaa||[aaa,bbb] ); queue = data_priv.get( elem, type );//get方法var cache = this.cache[ this.key( elem ) ];return type === undefined ? c...

jquery获取url参数及url加参数的方法

转——http://www.jb51.net/article/73896.htm<script src="js/jquery-1.7.2.min.js"type="text/javascript"></script><script type="text/javascript">$(function() {//方法二：(function($) {$.getUrlParam = function(name) {varreg = newRegExp("(^|&)"+ name + "=([^&]*)(&|$)");varr = window.location.search.substr(1).match(reg);if(r != null) returnunescape(r[2]); returnnull;}})(jQuery);//方法二：varxx = $.getUrl...

jQuery中绑定事件的几种方法

以click事件为例，jQuery中绑定事件有三种方法：（1）target.click(function(){}); （2）target.bind("click",function(){}); （3）target.live("click",function(){});第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已第二、三种方法都是绑定事件，但是二者又有很大的不同，下面着重讲解一下，因为这个如果用到Jquery的框架的话是用的挺多的，尤其要注意二者的区别。【bind和live的区别】 live方...

Jquery的toggle()方法

toggle()并不是仅仅能显示/隐藏而已它的格式如下 toggle(fn1,fn2,fn3.....)也就是说，它的参数可以说不定数目的若干个方法，然后每个方法按顺序轮番调用$(document).ready(function(){ $("button").toggle(function(){ $("p").wrap("<div></div>"); }, function(){ $("p").unwrap(); }});原文：http://www.cnblogs.com/tommy-huang/p/4070717.html

转：使用jquery获取url以及jquery获取url参数的方法

转：使用jquery获取url以及jquery获取url参数的方法使用jquery获取url以及jquery获取url参数的方法原文：http://www.cnblogs.com/Eric-Ting/p/3940026.html

jQuery插件扩展方法【代码】

jQuery为扩展插件提拱了两个方法，分别是：jQuery.extend(object) —— 给jQuery对象添加方法。jQuery.fn.extend(object) —— 为扩展jQuery类本身.为类添加新的方法； fn表示什么呢？下面代码是jQuery源代码中定义的fn：jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//…… }; 从上面代码我们不难看出 jQuery.fn = jQuery.prototype。对于prototype肯定不会陌生， javascript没有明确的类...

js/jquery常用方法------复制粘贴至剪切板

1.添加引用<script src="/XX/XX/clipboard.min.js"></script>（自己在网上下载） 2.复制按钮<button class="btn btn-info" type="button" id="btnCopy" title="复制" data-clipboard-action="copy" data-clipboard-target="#ShortURL">　　复制 </button>（加粗部分属性是必须的）<table id="table_list"></table> (此处我想操作复制的内容针对表格，这里的表格我用的jqgrid) 3.复制内容承载的文本域<textarea id="...

jquery给元素添加样式表的方法

//1、获取和设置样式$("#tow").attr("class")获取ID为tow的class属性$("#two").attr("class","divClass")设置Id为two的class属性。//2、追加样式$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2//3、移除样式$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。$(#two).removeClass("divClass divClass2")移除多个样式。//4、切换类名$("#two").toggleClass("anotherClass") //重复...

Jquery第四课 Javascript中this的使用方法【代码】

thiskeyword的使用在JavaScript中使用thiskeyword表示调用方法的对象，这与大部分面向对象语言是一样的。可是因为call、apply、bind等函数的影响。我们能够改变this所代指的对象。使用call或者apply调用的函数中，this代指传入的第一个參数对象，假设传入null或者undefined。则表示全局对象(window)。通过对象调用函数（方法），函数中的this表示调用该函数的对象。单独调用的函数中this表示全局对象。varmyObject={sayHello:func...

[ jquery 过滤器 prevUntil([exp|ele][,fil]) ] 此方法用于在选择器的基础之上搜索查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止【代码】

此方法用于在选择器的基础之上搜索查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止:如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提...

jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用【代码】

jQuery 中文API文档 http://jquery.cuishifeng.cn/jQuery 取出数组字典的值<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body> <script>li = [1, 2, 3, 4, 5]$.each(li, function(i, x){console.log(i, x) // i 为索引，x为 value})dic={name:"yuan", sex:"male"}$.each(dic, function(i, x){console.log(i,x) // i 为...

jQuery.validator.addMethod自定义方法密码验证补充【代码】

用jQuery的插件密码校验：html和js代码：<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head><th:block th:include="include :: header(‘修改用户密码‘)" /><th:block th:include="include :: select2-css" /><meta charset="UTF-8"> </head> <body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-user-resetP...

JQUERY方法给TABLE动态增加行

比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab").append(trHTML);//在table最后面添加一行$("#tab tr:eq(2)").after(trHTML); // 在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行...

首页 / JQUERY / jQuery实现贪吃蛇小游戏方法实例

jQuery实现贪吃蛇小游戏方法实例

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实现贪吃蛇小游戏方法实例】教程文章相关的互联网学习教程文章

jquery工具方法proxy【代码】

[ jquery 文档处理 appendTo(content) ] 此方法用于把所有匹配的元素追加到另一个指定的元素集合中【代码】

jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理【代码】

jquery获取url参数及url加参数的方法

jQuery中绑定事件的几种方法

Jquery的toggle()方法

转：使用jquery获取url以及jquery获取url参数的方法

jQuery插件扩展方法【代码】

js/jquery常用方法------复制粘贴至剪切板

jquery给元素添加样式表的方法

Jquery第四课 Javascript中this的使用方法【代码】

[ jquery 过滤器 prevUntil([exp|ele][,fil]) ] 此方法用于在选择器的基础之上搜索查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止【代码】

jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用【代码】

jQuery.validator.addMethod自定义方法密码验证补充【代码】

JQUERY方法给TABLE动态增加行

JQUERY - 相关标签

实例 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程