视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享
2020-11-27 20:13:54 责编:小采
文档
 《传智播客JavaScript面向对象完成贪吃蛇游戏视频教程》介绍了关于JavaScript面向对象的知识,利用面向对象的编程思想去完成贪吃蛇游戏。写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -。可用键盘的上下左右键操作;

课程播放地址:http://www.gxlcms.com/course/591.html

该老师讲课风格:

教师讲课生动形象,机智诙谐,妙语连珠,动人心弦。一个生动形象的比喻,犹如画龙点睛,给学生开启智慧之门;一种恰如其分的幽默,引来学生会心的微笑,如饮一杯甘醇的美酒,给人以回味和留恋;哲人的警句、文化的箴言不时穿插于讲述中间,给人以思考和警醒。

本视频中较为难点贪吃蛇了:

思路

贪食蛇主要几个问题需要解决

转向,蛇身每个点在经过转向点的时候都要转向

吃,每吃掉一颗,蛇身就增加一个点

失败,撞墙或撞到蛇身上,都算失败

基本上,《贪食蛇》就难在这三个地方,这个顺序,难度从高到低,最简单的莫过去撞墙判断失败。最难的是转向,之后是吃。下面从最开始一步步的来解决这些问题。

一些变量

var mapItemX=60; //游戏地图横向点数
var mapItemY=31; //游戏地图纵向点数
var snakeLen=5; //蛇的初始长度
var snakeMoveDirection='E'; //蛇的移动方向
var snakeStartPoints={'x':5,'y':15}; //蛇的起始位置
var snake=new Array(); //用于存放蛇身点的坐标
var corner=new Array(); //用于存放转角点坐标
var cornerNum=0; //转角数
var timer,speed=100; //移动计时器和初始移动速度
var timeiner,timeSecond=0,timeMinute=0,timestr=0; //时间计时器,分,秒,总秒数
var mouseX,mouseY; //老鼠位置(吃的)
var start=false; //是否开始

初始化地图

function init(){
 var maps='';
 for(var i=0;i<mapItemY;i++){
 for(var j=0;j<mapItemX;j++){
 maps=maps+'<p id="mapItem_'+j+'_'+i+'" class="mapItem"></p>';
 }
 }
 $("#game_map").html(maps); //放地图的容器
}

地图很简单,不过要注意,必须保证以第一行0,0开始,第二行0,1开始,以此类推,它是一个二维数组,这直接关系到定位,所以必须得保证这样的结构。

生成的每一个点,都有一个根据纵横坐标组成的ID,它将是控制这些点的必要东西

这里还给大家推荐了源码资源的下载:http://www.gxlcms.com/xiazai/learn/2117

  1. 笔记.docx

  2. 画图.xlsx

  3. snake.html(源码)

下载本文
显示全文
专题