Rumah  >  Artikel  >  hujung hadapan web  >  传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享

传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享

黄舟
黄舟asal
2017-12-04 11:20:261871semak imbas

《传智播客JavaScript面向对象完成贪吃蛇游戏视频教程》介绍了关于JavaScript面向对象的知识,利用面向对象的编程思想去完成贪吃蛇游戏。写的比较乱,有个逻辑错误:蛇吃了果果后应该是蛇尾加一节,写成了蛇头部增加一节- -。可用键盘的上下左右键操作;


L8_ATYC[(SHNO4I[4GS6J4N.png


课程播放地址: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+&#39;<p id="mapItem_&#39;+j+&#39;_&#39;+i+&#39;" class="mapItem"></p>&#39;;
        }
    }
    $("#game_map").html(maps);  //放地图的容器
}

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

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



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

  1. 笔记.docx

  2. 画图.xlsx

  3. snake.html(源码)

Atas ialah kandungan terperinci 传智播客JavaScript面向对象完成贪吃蛇游戏视频教程资料(课件、源码)分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn