Rumah >hujung hadapan web >tutorial js >传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享
《传智播客JavaScript面向对象完成贪吃蛇游戏视频教程》介绍了关于JavaScript面向对象的知识,利用面向对象的编程思想去完成贪吃蛇游戏。写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -。可用键盘的上下左右键操作;
课程播放地址:http://www.php.cn/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.php.cn/xiazai/learn/2117
笔记.docx
画图.xlsx
snake.html(源码)
Atas ialah kandungan terperinci 传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!