社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 主體

html5中的output標籤和canvas標籤實現貪吃蛇

黄舟
發布： 2017-07-03 10:33:38
原創
1079 人瀏覽過

操作方法：
        按鍵盤上下左右或WASD移動方向。
計分規則：
        蛇身每增加一節，分數加10，在吃到下一個食物前每改變一次方向，減一分。
        ps：分數可能會是負值{:4_105:} 

HTML5標籤canvas：
        canvas 元素用於網頁上繪製圖形。
        在貪吃蛇中利用畫布繪製背景格：

  //清空整个画布
                                ctx.clearRect(0,0,480,480);
                                //绘制网格
                                for(var i=0;i<30;i++){
                                        ctx.strokeStyle="#ccc";//线条颜色
                                        ctx.beginPath();
                                        //绘制横线
                                        ctx.moveTo(0,i*width);
                                        ctx.lineTo(480,i*width);
                                        //绘制竖线
                                        ctx.moveTo(i*width,0);
                                        ctx.lineTo(i*width,480);
                                        ctx.closePath();
                                        ctx.stroke();
                                }
登入後複製

        在貪吃蛇中利用畫布繪製蛇身及食物：

   //绘制蛇的身体
                                for(var i=0;i<snake.length;i++){
                                        ctx.fillStyle="black";//填充颜色
                                        //蛇的头部
                                        if(i==snake.length-1){
                                                ctx.fillStyle="red";
                                        }
                                        ctx.beginPath();
                                        ctx.rect(snake[i].x*width,snake[i].y*width,width,width);
                                        ctx.closePath();
                                        ctx.fill();
                                        ctx.stroke();
                                }
登入後複製

HTML5標籤output：
   元素用於不同類型的輸出，例如計算或腳本輸出：

 <div>
                        <output id="result" onforminput="resCalc()"></output>
                </div>
                <script>
                        document.getElementById(&#39;result&#39;).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(&#39;result&#39;).value = score; 

//蛇的身体
var snake=[];
//指定初始长度为6
var 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<30;i++){

ctx.strokeStyle="#ccc";//线条颜色
ctx.beginPath();

//绘制横线
ctx.moveTo(0,i*width);
ctx.lineTo(480,i*width);

//绘制竖线
ctx.moveTo(i*width,0);
ctx.lineTo(i*width,480);

ctx.closePath();
ctx.stroke();
}

//绘制蛇的身体
for(var i=0;i<snake.length;i++){
ctx.fillStyle="black";//填充颜色
//蛇的头部
if(i==snake.length-1){
ctx.fillStyle="red";
}
ctx.beginPath();
ctx.rect(snake[i].x*width,snake[i].y*width,width,width);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//绘制食物
drawFood();

//判断是否吃到食物
if(head.x==food.x&&head.y==food.y){

//增加蛇身的长度

var newCell=new Cell(food.x,food.y,head.d);
snake[snake.length]=newCell;
head=newCell;

//随机产生一个食物
initFood();
food=new Food(foodX,foodY);
drawFood();

score=score+10;
document.getElementById(&#39;result&#39;).value = score; 

}
}
//初始化食物的x,y坐标，随机位置
function initFood(){
//Math.random()返回一个0-1之间的随机数
//Math.ceil()向上取整
foodX=Math.ceil(Math.random()*28+1);
foodY=Math.ceil(Math.random()*28+1);
//判断是否跟蛇的身体有重叠
for(var i=0;i<snake.length;i++){
if(snake[i].x==foodX&&snake[i].y==foodY){
initFood();//递归产生食物坐标
}
}
}
//绘制食物
function drawFood(){
ctx.fillStyle="green";
ctx.beginPath();
ctx.rect(food.x*width,food.y*width,width,width);
ctx.closePath();
ctx.fill();
}

draw();
//监听键盘的事件
document.onkeydown=function(e){
//keyCode 上38下40左37右39
//W87 S83 A65 D68
var keyCode=e.keyCode;
var direction;
//alert(keyCode);
switch(keyCode){
case 38:
case 87:
direction=2;break;//上
case 40:
case 83:
direction=-2;break;//下
case 37:
case 65:
direction=1;break;//左
case 39:
case 68:
direction=-1;break;//右

default:break;
}
//控制蛇的移动方向
if(head.d+direction!=0&&(keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==65||keyCode==68||keyCode==37||keyCode==83||keyCode==87)){
if(head.d!=direction){score--;document.getElementById(&#39;result&#39;).value = score; }
moveSnake(direction);

}
}

//移动蛇的方法
function moveSnake(direction){
var newSnake=[];
var newCell=new Cell(head.x,head.y,head.d);
//循环除开头以外的身体部分
for(var i=0;i<snake.length;i++){
newSnake[i-1]=snake[i]
}
newSnake[snake.length-1]=newCell;
newCell.d=direction;

switch(direction){
case 2:
newCell.y--;break;//上
case -2:
newCell.y++;break;//下
case 1:
newCell.x--;break;//左
case -1:
newCell.x++;break;//右
}

snake=newSnake;
head=snake[snake.length-1];
checkDeath();
draw();

}
//自动移动
function moveClock(){
moveSnake(head.d);
}

setInterval(moveClock,speed);

//判断游戏是否结束
function checkDeath(){
//判断是否出边界
if(head.x>=30||head.y>=30||head.x<0||head.y<0){
alert("很遗憾，您输了！" + "\n" + "您的得分为："+"\n"+score);
window.location.reload();
}
//判断是否碰到自己
for(var i=0;i<snake.length-2;i++){
if(head.x==snake[i].x&&head.y==snake[i].y){
alert("很遗憾，您输了！" + "\n" + "您的得分为："+"\n"+score);
window.location.reload();
}
}
}

 
</script>
</html>
登入後複製
登入後複製
<!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(&#39;result&#39;).value = score; 

//蛇的身体
var snake=[];
//指定初始长度为6
var 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<30;i++){

ctx.strokeStyle="#ccc";//线条颜色
ctx.beginPath();

//绘制横线
ctx.moveTo(0,i*width);
ctx.lineTo(480,i*width);

//绘制竖线
ctx.moveTo(i*width,0);
ctx.lineTo(i*width,480);

ctx.closePath();
ctx.stroke();
}

//绘制蛇的身体
for(var i=0;i<snake.length;i++){
ctx.fillStyle="black";//填充颜色
//蛇的头部
if(i==snake.length-1){
ctx.fillStyle="red";
}
ctx.beginPath();
ctx.rect(snake[i].x*width,snake[i].y*width,width,width);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//绘制食物
drawFood();

//判断是否吃到食物
if(head.x==food.x&&head.y==food.y){

//增加蛇身的长度

var newCell=new Cell(food.x,food.y,head.d);
snake[snake.length]=newCell;
head=newCell;

//随机产生一个食物
initFood();
food=new Food(foodX,foodY);
drawFood();

score=score+10;
document.getElementById(&#39;result&#39;).value = score; 

}
}
//初始化食物的x,y坐标，随机位置
function initFood(){
//Math.random()返回一个0-1之间的随机数
//Math.ceil()向上取整
foodX=Math.ceil(Math.random()*28+1);
foodY=Math.ceil(Math.random()*28+1);
//判断是否跟蛇的身体有重叠
for(var i=0;i<snake.length;i++){
if(snake[i].x==foodX&&snake[i].y==foodY){
initFood();//递归产生食物坐标
}
}
}
//绘制食物
function drawFood(){
ctx.fillStyle="green";
ctx.beginPath();
ctx.rect(food.x*width,food.y*width,width,width);
ctx.closePath();
ctx.fill();
}

draw();
//监听键盘的事件
document.onkeydown=function(e){
//keyCode 上38下40左37右39
//W87 S83 A65 D68
var keyCode=e.keyCode;
var direction;
//alert(keyCode);
switch(keyCode){
case 38:
case 87:
direction=2;break;//上
case 40:
case 83:
direction=-2;break;//下
case 37:
case 65:
direction=1;break;//左
case 39:
case 68:
direction=-1;break;//右

default:break;
}
//控制蛇的移动方向
if(head.d+direction!=0&&(keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==65||keyCode==68||keyCode==37||keyCode==83||keyCode==87)){
if(head.d!=direction){score--;document.getElementById(&#39;result&#39;).value = score; }
moveSnake(direction);

}
}

//移动蛇的方法
function moveSnake(direction){
var newSnake=[];
var newCell=new Cell(head.x,head.y,head.d);
//循环除开头以外的身体部分
for(var i=0;i<snake.length;i++){
newSnake[i-1]=snake[i]
}
newSnake[snake.length-1]=newCell;
newCell.d=direction;

switch(direction){
case 2:
newCell.y--;break;//上
case -2:
newCell.y++;break;//下
case 1:
newCell.x--;break;//左
case -1:
newCell.x++;break;//右
}

snake=newSnake;
head=snake[snake.length-1];
checkDeath();
draw();

}
//自动移动
function moveClock(){
moveSnake(head.d);
}

setInterval(moveClock,speed);

//判断游戏是否结束
function checkDeath(){
//判断是否出边界
if(head.x>=30||head.y>=30||head.x<0||head.y<0){
alert("很遗憾，您输了！" + "\n" + "您的得分为："+"\n"+score);
window.location.reload();
}
//判断是否碰到自己
for(var i=0;i<snake.length-2;i++){
if(head.x==snake[i].x&&head.y==snake[i].y){
alert("很遗憾，您输了！" + "\n" + "您的得分为："+"\n"+score);
window.location.reload();
}
}
}

 
</script>
</html>
登入後複製
登入後複製

以上是html5中的output標籤和canvas標籤實現貪吃蛇的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
canvas html5 output
來源：php.cn
上一篇：html5之output標籤的使用與應用 下一篇：使用output標籤標註JavaScript傳回值的實例分析
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
取得畫布的*兩個*高度值？ 我正在嘗試獲取此畫布的兩個高度值。 <canvaswidth="886"height="792"style="display...
來自於 2024-04-05 09:32:33
0
1
1360
如何從多個畫布匯出 jpg 我有多個畫布，這些畫布用作圖層。 canvasc1=backgroundimage.canvasc2=charactorimage.canvasc3=itemimage.我的原始碼...
來自於 2024-04-03 21:02:43
0
1
319
為什麼每次儲存我的vite react專案時，都會在頁面主體中新增新的canvas元素，而不是取代現有的canvas元素？ 我正在嘗試開始學習ThreeJs（我也是JavascriptWeb開發的新手）。看了一些教學後，我從vite和react開始，然後從基本的旋轉立方體開始。該部分有效。但是根據我所讀...
來自於 2024-03-30 09:57:49
0
1
396
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板