html5中的output标签和canvas标签实现贪吃蛇
程序员文章站
2022-05-27 11:50:16
...
操作方法：
按键盘上下左右或者WASD移动方向。
计分规则：
蛇身每增加一节，分数加10，在吃到下一个食物前每改变一次方向，减一分。
ps：分数可能会是负值{:4_105:}
HTML5标签canvas：
canvas 元素用于在网页上绘制图形。
在贪吃蛇中利用画布绘制背景网格：
按键盘上下左右或者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('result').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=[];
//指定初始长度为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('result').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('result').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('result').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('result').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('result').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标签实现贪吃蛇的详细内容，更多请关注其它相关文章！
推荐阅读
-
WordPress中给媒体文件添加分类和标签的PHP功能实现
-
JQuery中select标签绑定的onchange事件然后弹出选择的值并实现跳转和传参
-
WordPress中给媒体文件添加分类和标签的PHP功能实现，
-
JQuery中select标签绑定的onchange事件然后弹出选择的值并实现跳转和传参
-
html5中的output标签和canvas标签实现贪吃蛇
-
WordPress中给媒体文件添加分类和标签的PHP功能实现，_PHP教程
-
关于HTML5中p和span标签的介绍
-
html5中output标签的onforminput事件失效的解决办法
-
html5中output标签的onforminput事件失效的解决办法
-
WordPress中给媒体文件添加分类和标签的PHP功能实现，_PHP教程