首頁 > web前端 > js教程 > 傳智播客JavaScript物件導向完成貪吃蛇遊戲影片教學資料(課件、原始碼)分享

傳智播客JavaScript物件導向完成貪吃蛇遊戲影片教學資料(課件、原始碼)分享

黄舟
發布: 2017-12-04 11:20:26
原創
1906 人瀏覽過

《傳智播客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+&#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(原始碼)

以上是傳智播客JavaScript物件導向完成貪吃蛇遊戲影片教學資料(課件、原始碼)分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板