Chuanzhi Podcast JavaScript object-oriented completion of the Snake game video tutorial materials (courseware, source code) sharing

"Chuanzhi Podcast JavaScript object-oriented video tutorial to complete the Snake game" introduces the knowledge about JavaScript object-oriented, and uses object-oriented programming ideas to complete the Snake game. The writing is rather confusing, and there is a logical error: after the snake eats the fruit, it should add a section to the snake's tail, but it is written to add a section to the snake's head - -. You can use the up, down, left and right keys on the keyboard;

## Course playback address: //m.sbmmt.com/course/591.html

The teacher’s teaching style:

The teacher’s lectures are vivid, witty, witty and touching. A vivid metaphor is like the finishing touch, opening the door to wisdom for students; an appropriate humor brings a knowing smile to students, like drinking a glass of mellow wine, giving people aftertaste and nostalgia; a philosopher's aphorisms, cultural references Proverbs are interspersed from time to time in the narration, giving people thinking and warning.

The more difficult point in this video is Snake:

Thoughts

The main points of Snake The problem needs to be solved

Turn, each point of the snake body must turn when passing the turning point

To eat, every time one is eaten, the snake body will increase by one point

Failure, hitting the wall or hitting the snake is considered a failure

Basically, "Snake" is difficult in these three places. In this order, the difficulty is from high to low. The easiest thing is not to hit the wall. Judgment failed. The hardest part is steering, and then eating. Let’s solve these problems step by step from the very beginning.

Some variables

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;  //是否开始

Initializing the map

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);  //放地图的容器
}

The map is very simple, but please note that it must start with 0,0 in the first line and 0,1 in the second line. , and so on, it is a two-dimensional array, which is directly related to positioning, so such a structure must be guaranteed.

Each point generated has an ID based on vertical and horizontal coordinates, which will be the necessary thing to control these points

Here we also recommend downloading source code resources: //m.sbmmt.com/xiazai/learn/2117

1. Notes.docx

2. Drawing.xlsx

##snake.html (source code)

The above is the detailed content of Chuanzhi Podcast JavaScript object-oriented completion of the Snake game video tutorial materials (courseware, source code) sharing. For more information, please follow other related articles on the PHP Chinese website!