h5如何实现贪吃蛇小游戏

h5制作贪吃蛇

html

规划一个游戏界面

<div class="mian">
        <canvas id='huaban'></canvas>
    </div>

css

html,
        body {
            padding: 0;
            margin: 0;
        }

        body {
            background: black;
        }

        .mian {
            margin: auto;
            width: 800px;
            height: 500px;
            margin-top: 30px;
            background: rgba(255, 251, 251, 0.089);
        }

js

var s_X = 0, s_Y = 0;//存储鼠标实时的位置
        var c_w = window.innerWidth / 2 - 400, c_h = 30;//初始窗口的大小
        var life = true;//蛇的生命
        var body_arr = [],//身体继承存储数组 
            body_jc = [],
            food_color = ['#1db0b8', '#de8100', '#3b200c', '#ff534d', '#edd0be'], //食物随机颜色存储的数组
            _bg,//背景的对象
            sk,//蛇的对象 
            speed = 1000 / 120,//定时器的速度
            food_number = 1,//单位大小内食物的个数
            zanti = 1,//暂停
            time = 0;//整体的时间线
        var food = [
            [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
            [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
            [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
            [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
            [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
            [[], [], [], [], [], [], [], [], [], [], [], [],