//清空整個畫布 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教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。