社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > html5中的output标签和canvas标签实现贪吃蛇

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

黄舟
发布： 2017-07-03 10:33:38
原创
1091 人浏览过

操作方法：
        按键盘上下左右或者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：
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
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板