原生js+canvas实现贪吃蛇效果

本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

页面布局展示：worm.html

 
 
 
 
 
 
 
 
 
 
 
 
 
 

  

  

  

   
UP
  
  

  
  

  

   
LEFT
  
  

  

   
RIGHT
  
  
  

  

  

   
DOWN
  
  

  
 
 
 

节点类的js  ：Node.js

/* 节点类 */
function Node (x, y) {
 this.x=x;
 this.y=y;
 this.equals=function (i, j) {
 return this.x==i && this.y==j;
 };
 
}

舞台类js：Stage.js

/** 舞台类 */
function Stage () {
 this.width=50;
 this.height=50;
 this.worm=new Worm();
 
 /* 在canvas中绘制舞台的内容 */
 this.print=function (ctx) {
 for(i=0; i 
 

蛇类js：Worm.js

/** 蛇类 */
var UP=0;
var DOWN=1;
var LEFT=2;
var RIGHT=3;
 
var DIR=UP;
 
var SCORE=0;
var SPEED=300;
//蛇类初始化的形状
function Worm () {
 this.nodes=[];
 this.nodes[this.nodes.length]=new Node(20,10);
 this.nodes[this.nodes.length]=new Node(20,11);
 this.nodes[this.nodes.length]=new Node(20,12);
 this.nodes[this.nodes.length]=new Node(20,13);
 this.nodes[this.nodes.length]=new Node(20,14);
 this.nodes[this.nodes.length]=new Node(20,15);
 this.nodes[this.nodes.length]=new Node(21,15);
 this.nodes[this.nodes.length]=new Node(22,15);
 this.nodes[this.nodes.length]=new Node(23,15);
 this.nodes[this.nodes.length]=new Node(24,15);
 this.nodes[this.nodes.length]=new Node(24,16);
 this.nodes[this.nodes.length]=new Node(24,17);
 this.nodes[this.nodes.length]=new Node(24,18);
 this.nodes[this.nodes.length]=new Node(24,19);
 
 /* 蛇会走一步 */
 this.step=function () {
 //计算出头结点 把头节点添加到nodes数组中
 var oldHead=this.nodes[0];
 var newHead;
 switch (DIR){
  case UP:
  if(oldHead.y-1<0){
   newHead=new Node(oldHead.x, 49);
  }else{
   newHead=new Node(oldHead.x, oldHead.y-1);
  }
  break;
  case DOWN:
  if(oldHead.y+1>49){
   newHead=new Node(oldHead.x, 0);
  }else{
   newHead=new Node(oldHead.x, oldHead.y+1);
  }
  break;
  case LEFT:
  if(oldHead.x-1<0){
   newHead=new Node(49, oldHead.y);
  }else{
   newHead=new Node(oldHead.x-1, oldHead.y);
  }
  break;
  case RIGHT:
  if(oldHead.x+1>49){
   newHead=new Node(0, oldHead.y);
  }else{
   newHead=new Node(oldHead.x+1, oldHead.y);
  }
  break;
 }
 this.nodes.unshift(newHead);
 
 if(!this.food.equals(newHead.x, newHead.y)){
  //把尾节点删掉 (在没有吃到食物的时候)
  this.nodes.pop();
 }else{
  //吃到了食物 重新生成食物
  this.food=this.randomFood();
  SCORE+=10;
  SPEED-=50;
  endPrint();
  startPrint();
 }
 };
 
 /* 判断i，j节点是否是当前蛇身子的一部分 */
 this.contains=function (i, j) {
 for(k=0; k 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。