Html5 version of Snake game production (classic gameplay)

Reminiscing about the classic mini-games, I used Html5 to make a little snake-eating mini-game, completing the functions of the core classic gameplay.

The game can be controlled by the computer's keyboard "direction keys", or by clicking the buttons on the screen. (Support mobile terminals)

Click here to play

The movement of the snake is to move in a grid of 18 x 18, each movement will move a small grid, and the speed can be adjusted to make it more difficult.

Realize the function

1. Made the scene of the game.
2. The control and movement of the little snake.
3. After eating the target, the snake will grow longer.
4. Target points appear randomly.
5. Touch the edge of the screen, Game Over behind the snake.

If the movement is too slow, you can modify the movement speed of the snake.

Source address: pro.youyu001.com

technology used

1. Animate the snake head using frame-by-frame animation.
2. The position data of the snake is recorded using an array.
3. Use the array to judge the position where the snake cannot move, and judge the game logic.
4. Join and keyboard for game control.
5. The logic of items such as snakes and food is handled in an object-oriented manner.

code description

1. The creation of the game area , the 18 x  18 size space is used for movement .

var mapsize = {x:18,y:18};//地图比例 18X18
var maparr = [];//地图方块数组
var bg = new PIXI.Sprite.fromImage("res/snake/di.jpg");
app.stage.addChild(bg);
for(var i=0;i<mapsize.x;i++){
    for(var j=0;j<mapsize.y;j++){
        var box = new PIXI.Sprite.fromImage("res/snake/kuai.png");
        box.anchor.set(0.5,0.5);
        box.x = 45+j*30;
        box.y = 45+i*30;
        app.stage.addChild(box);
    }
}

2. By means of object encapsulation , the attributes and method logic in the snake object are defined . (See the source code for the specific implementation)

function Snake(x, y){//蛇对象
    var self = this;
    this.view = new PIXI.extras.AnimatedSprite.fromImages(snakeurl);
    this.view.rotation = Math.PI/180*270;
    this.view.anchor.set(0.5,0.5);
    this.view.x = x;
    this.view.y = y;
    app.stage.addChild(this.view);
    this.snakebodyarr = [self];//蛇全身部件数组
    var snakebodyarrsize = 3;//初始蛇身长3个单位
    self.last_direction = "right";//最后一次蛇头移动方向
    self.next_time_direction = "right";//下次的移动方向
    var food = null;
    this.Move_Method = function(){//蛇头移动方法
    }
    this.add_Parts = function(url,rotation){//增加蛇身体
    }
    function add_Parts(url,x,y,rotation,father){//初始化蛇身体+尾巴
    }
    function BodyMove_Method(){//蛇身体移动方法
    }
    function bodyrotation(direction){//蛇头旋转替换下节蛇身纹理
    }
    function next_food(x,y){//检查与食物的碰撞
    }
    function naxt_snakehand(x,y){//检查蛇头位置
    }
    function next_step(x,y){//检查下次移动位置情况
    }
    this.addFood = function(snakeheadx,snakeheady){//生成食物
    }
    this.interference_check = function(x,y,skx,sky){//检查碰撞
    }
    this.remove = function(){//移除蛇和食物
    }
}

3. Calculate the moving speed of the snake through the frame rate

Define a variable for recording movement time correlation

var speedtime = 30;//记录小蛇移动的间隔帧数

In the frame rate function, execute the following code. The snake moves every 0.5 seconds

//小蛇定时移动
speedtime--;
if(speedtime == 0) {
    snake.Move_Method();//小蛇移动
    speedtime = 30-Math.round(snake.snakebodyarr.length*0.1);
}

4. Control the movement direction through keyboard events

When the mouse clicks on the arrow keys, change the moving direction variable of the snake

function keyDown(event){//键盘监听
    var event = event || window.event;
    switch (event.keyCode){
    case 37:
        if(snake.last_direction=="right") {
            return;
        }
        snake.next_time_direction = "left";
        break;
    case 39:
        if(snake.last_direction=="left") {
            return;
        }
        snake.next_time_direction = "right"; 
        break;
    case 38:
        if(snake.last_direction=="down") {
            return;
        }
        snake.next_time_direction = "up";
        break;
    case 40:
        if(snake.last_direction=="up") {
            return;
        }
        snake.next_time_direction = "down";
        break;
    }
    return false;
}

5. The game failed to verify

Check if you can move smoothly next time

function next_step(x,y){//检查下次移动位置情况
    for(var i=1;i<self.snakebodyarr.length;i++){
        var snake = self.snakebodyarr[i];
        if(x==snake.view.x&&y==snake.view.y){
            app.stage.addChild(self.view);
            addgameout();
        }
    }
}

game over event

function gameend(){//游戏结束界面
    if(snake.snakebodyarr.length!=324){
        return false;
    }
    app.ticker.remove(zp);
    left.view.interactive = false;
    right.view.interactive = false;
    up.view.interactive = false;
    down.view.interactive = false;
    snake.view.stop();

    var gameover = new PIXI.Sprite.fromImage("res/map/gameover.png");
    gameover.x = 198;
    gameover.y = 320;
    app.stage.addChild(gameover);
    gameover.interactive = true;
    gameover.on("pointertap",gameoverclick);
    function gameoverclick(){//游戏结束的点击事件
        app.stage.removeChild(gameover);
        add playgame();
        snake.remove();
    }
    return true;
}

There are still many areas to be improved in the game, and many new functions can be added, such as: passing through walls, adding a boss or something...