html5中的output标签和canvas标签实现贪吃蛇

 //清空整个画布 ctx.clearRect(0,0,480,480); //绘制网格 for(var i=0;i i++){ ctx.stroke >
 在贪吃蛇中利用画布绘制蛇身及食物：
 //绘制蛇的身体 for(var i=0;i snake.length;i++){ ctx.fill >
HTML5标签output：
 output 元素用于不同类型的输出，比如计算或脚本输出：
 div  output id= result onforminput= resCalc() /output  /div  script  document.getElementById( result ).html' target='_blank'>value = score; /script 
 !DOCTYPE html  html  head  meta charset= utf-8  meta http-equiv= Content-Type content= text/html  meta name= Keywords content= Html5  meta name= Desciption content= 贪吃蛇V1.0  meta name= Author content= 沙漠胡杨  meta name= Time content= 2015/4/14  title 贪吃蛇 /title  style type= text/css *{margin:0;padding:0;}body{font-size:12px;font-family: 微软雅黑 background:#CCC;}h1{font-size:36px;color:#fff;text-shadow:1px 1px 5px #000;margin:30px auto;text-align:center;position:relative;}#snakeCanvas{background:#fff;box-shadow:3px 3px 5px #666;margin:0 auto;display:block;}#score,#result{font-size:32px;color:#fff;text-shadow:1px 1px 5px #000;}#score{position:absolute;top:150px;right:300px;}#result{position:absolute;top:150px;right:240px;} /style  /head  body  h1 贪吃蛇游戏 /h1  div  p id= score 得分: p  output id= result /output  /div  !--画布--  canvas id= snakeCanvas width= 480 height= 480 /canvas  /body  script type= text/javascript 第一步：准备画布1、分成N个方格，为每个小方格设定为16px*16px 30*30个2、初始化一条蛇3、初始化一个食物第二步：实现动画1、让蛇移动（监听键盘事件，上下左右或WASD控制方向）2、捕捉食物（蛇身体增长，另外产生一个食物）第三步：让蛇自动前行var canvas=document.getElementById( snakeCanvas var ctx=canvas.getContext( 2d //画笔var width=16;//移动速度var speed=200;/*计分规则：蛇身每增加一节，分数加10，在吃到下一个食物前每改变一次方向，减一分*/var score=0;document.getElementById( result ).value = score; //蛇的身体var snake=[];//指定初始长度为6var snakelen=6;//初始化for(var i=0;i snakelen;i++)snake[i]=new Cell(i,0,-1);var head=snake[snakelen-1];//蛇的身体构成的元素，x坐标，y坐标，d方向：1左 -1右 2上 -2下function Cell(x,y,d){this.x=x;this.y=y;this.d=d;return this;//食物对象function Food(x,y){this.x=x;this.y=y;return this;//初始食物的出现位置var foodX=Math.ceil(Math.random()*28+1);var foodY=Math.ceil(Math.random()*28+1);//定义食物var food=new Food(foodX,foodY);//绘制游戏基本元素function draw(){//清空整个画布ctx.clearRect(0,0,480,480);//绘制网格for(var i=0;i i++){ctx.stroke >
 !DOCTYPE html  html  head  meta charset= utf-8  meta http-equiv= Content-Type content= text/html  meta name= Keywords content= Html5  meta name= Desciption content= 贪吃蛇V1.0  meta name= Author content= 沙漠胡杨  meta name= Time content= 2015/4/14  title 贪吃蛇 /title  style type= text/css *{margin:0;padding:0;}body{font-size:12px;font-family: 微软雅黑 background:#CCC;}h1{font-size:36px;color:#fff;text-shadow:1px 1px 5px #000;margin:30px auto;text-align:center;position:relative;}#snakeCanvas{background:#fff;box-shadow:3px 3px 5px #666;margin:0 auto;display:block;}#score,#result{font-size:32px;color:#fff;text-shadow:1px 1px 5px #000;}#score{position:absolute;top:150px;right:300px;}#result{position:absolute;top:150px;right:240px;} /style  /head  body  h1 贪吃蛇游戏 /h1  div  p id= score 得分: p  output id= result /output  /div  !--画布--  canvas id= snakeCanvas width= 480 height= 480 /canvas  /body  script type= text/javascript 第一步：准备画布1、分成N个方格，为每个小方格设定为16px*16px 30*30个2、初始化一条蛇3、初始化一个食物第二步：实现动画1、让蛇移动（监听键盘事件，上下左右或WASD控制方向）2、捕捉食物（蛇身体增长，另外产生一个食物）第三步：让蛇自动前行var canvas=document.getElementById( snakeCanvas var ctx=canvas.getContext( 2d //画笔var width=16;//移动速度var speed=200;/*计分规则：蛇身每增加一节，分数加10，在吃到下一个食物前每改变一次方向，减一分*/var score=0;document.getElementById( result ).value = score; //蛇的身体var snake=[];//指定初始长度为6var snakelen=6;//初始化for(var i=0;i snakelen;i++)snake[i]=new Cell(i,0,-1);var head=snake[snakelen-1];//蛇的身体构成的元素，x坐标，y坐标，d方向：1左 -1右 2上 -2下function Cell(x,y,d){this.x=x;this.y=y;this.d=d;return this;//食物对象function Food(x,y){this.x=x;this.y=y;return this;//初始食物的出现位置var foodX=Math.ceil(Math.random()*28+1);var foodY=Math.ceil(Math.random()*28+1);//定义食物var food=new Food(foodX,foodY);//绘制游戏基本元素function draw(){//清空整个画布ctx.clearRect(0,0,480,480);//绘制网格for(var i=0;i i++){ctx.stroke >
以上就是html5中的output标签和canvas标签实现贪吃蛇的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。