JS+Canvas实现贪吃蛇小游戏

context.beginPath();
var bgImg = new Image();
bgImg.src = "img/background.png";
context.drawImage(bgImg, 0, 0, 600, 600);
context.closePath();

//随机数
function selectfrom() {
 　　return Math.floor(Math.random() * 14 + 1);
}

var x = selectfrom() * （600/16）;
var y = selectfrom() * （600/16）;

var canvas = document.getElementById("mycanvas");//画布主体
var context = canvas.getContext("2d");
var timer;//计时器
const WIDTH = canvas.width;//画布宽
const HEIGHT = canvas.height;//画布高
const XSUM = 16; //画布宽分为几格
const YSUM = 15; //画布高分为几格
const MAXFFOD = 2; //最大食物数量
var score = 0;//定义记录游戏得分
var xsplit = WIDTH / XSUM; //x每一格子的宽度
var ysplit = HEIGHT / YSUM; //y每一格子的高度
var foodcount = 0; //当前食物数量
var sinak = []; //贪吃蛇坐标集
var get = []; //礼物坐标集
var MoveTo = 1; //移动方向 默认1（右）

//画贪吃蛇
function drawsinak(sl) { //sl默认长度
    context.beginPath();
    context.fillStyle = "#000";
    var ling = 0; //贪吃蛇被打印长度
    for (var r = 0; r < sinak.length; r++) {
        context.fillRect(sinak[r].split(',')[0], sinak[r].split(',')[1], xsplit, ysplit);
        ling++;
    }
    if (ling == 0) {
        for (var i = 0; i < sl; i++) {
            context.fillRect(xsplit * (7 - i), ysplit * 6, xsplit, ysplit); //默认出生点：7，6默认中心点
            sinak.push(xsplit * (7 - i) + ',' + ysplit * 6);
        }
    }
    context.fill();
    context.closePath();
}

context.beginPath();
  var x = selectfrom(XSUM - 2) * xsplit;
  var y = selectfrom(YSUM - 2) * ysplit;
  context.fillStyle = "red";
  for (var i = 0; i < get.length; i++) {
      context.fillRect(get[i].split(',')[0], get[i].split(',')[1], xsplit, ysplit);
      context.fill();
      foodcount++;
  }
  if (MAXFFOD > foodcount) {
      context.fillRect(x, y, xsplit, ysplit);
      context.fill();
      foodcount++;
      get.push(x + ',' + y);
  }
  context.closePath();

//移动方法
//[c]移动方向 上右下左 0123
function sinakMove(c) {
    context.beginPath();
 
    //默认右侧为头
    var tou = sinak[0]; //头
    var weiba = sinak[sinak.length - 1]; //尾巴
 
    var oldX = tou.split(',')[0]; //头部旧X坐标
    var oldY = tou.split(',')[1]; //头部旧Y坐标
 
    var newX = 0; //头部最新X坐标
    var newY = 0; //头部最新Y坐标
 
    //计算头部最新XY坐标
    switch (c) {
        case 0:
            newX = oldX;
            newY = oldY - ysplit;
            break;
        case 1:
            newX = (oldX - 0) + xsplit;
            newY = oldY;
            break;
        case 2:
            newX = oldX;
            newY = (oldY - 0) + ysplit;
            break;
        case 3:
            newX = oldX - xsplit;
            newY = oldY;
            break;
    }
 
    var flag = 0; //有沒有吃到礼物 0沒有1有
 
    //如果吃到了礼物，则不消减尾部最后元素
    for (var i = 0; i < get.length; i++) {
        if (newX == get[i].split(',')[0] && newY == get[i].split(',')[1]) {
            sinak.unshift(newX + ',' + newY);
            foodcount--; //礼物计数减少1个
            get.splice(i, 1); //清空礼物
            flag = 1;
        }
    }
    //如果沒有吃到礼物，则判断是否碰到障碍或吃到自己
    if (flag == 0) {
        for (var i = 0; i < sinak.length; i++) {
            if (newX == sinak[i].split(',')[0] && newY == sinak[i].split(',')[1]) {
                if (confirm('吃掉了自己,游戏失败！是否重新开始？')) {
                    location.reload(true);
                } else {
                    context.clearRect(0, 0, WIDTH, HEIGHT);
                }
            }
        }
        if (xsplit * (XSUM - 2) < newX || ysplit * (YSUM - 2) < newY || newX == 0 || newY == 0) {
            if (confirm('撞墙了,游戏失败！是否重新开始？')) {
                location.reload(true);
            }
        }
    }
 
    //如果没有吃到礼物，那么进行普通移动
    if (flag == 0) {
        sinak.unshift(newX + ',' + newY);
        sinak.splice(sinak.length - 1, 1);
    }
 
    //画蛇
    for (var r = 0; r < sinak.length; r++) {
        context.fillRect(sinak[r].split(',')[0], sinak[r].split(',')[1], xsplit, ysplit);
    }
    context.closePath();
}

//键盘事件
document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    var move = 0; //移动方向
    if (e && e.keyCode == 37) { //左
        move = (MoveTo == 1 ? 1 : 3);
    } else if (e && e.keyCode == 38) { //上
        move = (MoveTo == 2 ? 2 : 0);
    } else if (e && e.keyCode == 39) { //右
        move = (MoveTo == 3 ? 3 : 1);
    } else if (e && e.keyCode == 40) { //下
        move = (MoveTo == 0 ? 0 : 2);
    } else if (e && e.keyCode == 32) {//暂停游戏
        clearInterval(timer);
    }
    MoveTo = move; //修改当前移动方向
};