*{margin:0; padding:0;}header {  display: block;  margin: 0 auto;  width: 500px;  text-align: center;}header h1 {  font-family: Arial;  font-weight: bold;}header #newGameButton {  display: block;  margin: 20px auto;  width: 100px;  padding: 10px 10px;  background-color: #8f7a66;  font-family: Arial;  color: white;  border-radius: 10px;  text-decoration: none;}header #newGameButton:hover {  background-color: #9f8b77;}header p {  font-family: Arial;  font-size: 25px;  margin: 20px auto;}canvas{  display:block;   border:medium double black;  margin:4px auto;}    
    
贪吃蛇小游戏
    New Game    
score:0
源码大师官网下载 迅雷下载 迅雷下载地址,vscode格式化css,换电脑ubuntu,怎样设置tomcat编码,appscan爬虫原理,php 裁剪 png,seo怎么做才能好,网站的keywords,多模板收款源码lzw
  
      Your browser doesn't support the canvas element.      var CANVAS = document.getElementById("canvas");var CTX = CANVAS.getContext("2d");var SNAKE = new Array();  //用队列模拟蛇身var DIR = "right";        //用来控制蛇头的方向var SIZE = 20;        //蛇身的宽度var FOODX = 0;      //食物的x坐标var FOODY = 0;      //食物的y坐标var HEADX = 0;    //蛇头的x坐标var HEADY = 0;    //蛇头的y坐标var MAXWIDTH = 200;    //画布的高度var MAXHEIGHT = 200;  //画布的宽度var TIME = 400;      //蛇的速度var SCORE = 0;      //计算玩家分数var interval = null;CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;window.onload = function(){  newgame();};document.getElementById("newGameButton").click(function(){  newgame();});function newgame(){  SNAKE = [];    //用队列模拟蛇身  DIR = "right";  //用来控制蛇头的方向  HEADX = 0;    //蛇头的x坐标  HEADY = 0;    //蛇头的y坐标  SCORE = 0;  window.clearInterval(interval);  interval = null;  //初始化画布  CTX.clearRect(0, 0, MAXWIDTH, MAXHEIGHT);  //画一条蛇  drawSnake();  //放置食物  setFood();  //移动蛇  interval = window.setInterval(move, TIME);}function move(){  switch(DIR){    case "up":HEADY = HEADY-SIZE;break;    case "right":HEADX = HEADX+SIZE;break;    case "down":HEADY = HEADY+SIZE;break;    case "left":HEADX = HEADX-SIZE;break;  }  if(HEADX>MAXWIDTH-SIZE || HEADY>MAXHEIGHT-SIZE || HEADX<0 || HEADY<0){    alert("你的分数为："+SCORE+"分，继续努力吧!失败原因：碰壁了.....");    window.location.reload();  }  for(var i=1;i<SNAKE.length;i++){    if(SNAKE[i][0] == SNAKE[0][0] && SNAKE[i][1] == SNAKE[0][1]){      alert("你的分数为："+SCORE+"分，继续努力吧！失败原因：撞到自己了.....");      window.location.reload();    }  }  if(SNAKE.length == MAXWIDTH *MAXHEIGHT){    alert("好厉害!么么哒~");    window.location.reload();  }  moveIn(HEADX, HEADY);//移动一格}document.onkeydown = function(e) { //改变蛇方向  var code = e.keyCode - 37;  switch(code){    case 1 : DIR = "up";break;//上    case 2 : DIR = "right";break;//右    case 3 : DIR = "down";break;//下    case 0 : DIR = "left";break;//左  }}//=============================画一条蛇=======================================================function drawSnake(){  CTX.fillStyle = "black";  //画蛇头  CTX.fillRect (HEADX, HEADY, SIZE, SIZE);  SNAKE.push([HEADX, HEADY]);    //画蛇身  switch(DIR){    case "up":       drawBody(HEADX, HEADY + SIZE, HEADX, HEADY + 2 * SIZE);      break;    case "right":       drawBody(HEADX - SIZE, HEADY, HEADX - 2 * SIZE, HEADY);      break;    case "down":       drawBody(HEADX, HEADY - SIZE, HEADX, HEADY - 2 * SIZE);      break;    case "left":       drawBody(HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY);      break;  }}function drawBody(x1, y1, x2, y2){  CTX.fillRect (x1, y1, SIZE, SIZE);   CTX.fillRect (x2, y2, SIZE, SIZE);   SNAKE.push([x1, y1]);  SNAKE.push([x2, y2]);}//===========================放置食物==============================function setFood(){  do{    FOODX = SIZE * Math.floor(Math.random() * MAXWIDTH / SIZE);    FOODY = SIZE * Math.floor(Math.random() * MAXHEIGHT / SIZE);  }while(foodInSnake());  CTX.fillStyle = "red";  CTX.fillRect (FOODX, FOODY, SIZE, SIZE);}function foodInSnake(){  for (var i = 0; i < SNAKE.length; i++) {    if(FOODX == SNAKE[i][0] && FOODY == SNAKE[i][1]){      return true;    }  }  return false;}//========================================移动一格===========================function moveIn(x, y){  CTX.fillStyle = "black";  CTX.fillRect(x, y, SIZE, SIZE);//重画蛇头    //把新蛇头添加到 SNAKE 数组  var newSnake = [[x, y]];  SNAKE = newSnake.concat(SNAKE);  if(false == eatFood()){//如果没吃到食物，减少一格蛇尾      var snakeTail = SNAKE.pop();//获得蛇尾位置    CTX.clearRect(snakeTail[0], snakeTail[1], SIZE, SIZE);//去掉蛇尾    }}function eatFood(){  if(HEADX == FOODX && HEADY == FOODY){    CTX.fillStyle = "block";    CTX.fillRect (FOODX, FOODY, SIZE, SIZE);    setFood();    SCORE++;    //$("#score").text(SCORE);    document.getElementById("score").innerHTML = SCORE;    return true;  }  return false;}  

思路：

function newgame(){  重置蛇和分数的数据；  清除interval；  初始化画布；  画一条蛇；  放置食物；  使用定时器（setInterval）使蛇移动（move函数）；}function move(){  根据方向改变蛇头下一格将要到达的位置；  判断游戏是否结束，以及显示结束的原因（包含输赢）；  蛇移动一格（moveIn函数）；}对键盘的方向键作监控，当改变方向时，修改全局变量DIR的值（用于存储方向）；function moveIn(){  在蛇头的前一格增加一格作为新的蛇头，并将蛇头的坐标作为第一个元素加入到代表蛇的数组中；  if(没吃到食物){    删除一格蛇尾，在画布中做相应改变；  }}