Heim >Web-Frontend >HTML-Tutorial >Das Ausgabe-Tag und das Canvas-Tag in HTML5 implementieren Greedy Snake
Das Ausgabe-Tag und das Canvas-Tag in HTML5 implementieren Greedy Snake
- 黄舟Original
- 2017-07-03 10:33:381093Durchsuche
Bedienungsmethode:
Drücken Sie die Tastatur nach oben, unten, links, rechts oder in die WASD-Bewegungsrichtung.
Bewertungsregeln:
Für jeden weiteren Abschnitt des Schlangenkörpers wird die Punktzahl um 10 erhöht. Bei jedem Richtungswechsel vor dem Verzehr des nächsten Futters wird ein Punkt abgezogen.
ps: Die Punktzahl kann negativ sein {:4_105:}
HTML5-Tag-Canvas:
Das Canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet.
Verwenden Sie die Leinwand, um das Hintergrundgitter in Snake zu zeichnen:
//清空整个画布
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();
}Verwenden Sie die Leinwand, um den Körper und die Nahrung der Schlange in Snake zu zeichnen:
//绘制蛇的身体
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-Tag-Ausgabe:
Die Das Ausgabeelement wird für verschiedene Arten der Ausgabe verwendet, z. B. für Berechnungen oder Skriptausgaben:
<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>Das obige ist der detaillierte Inhalt vonDas Ausgabe-Tag und das Canvas-Tag in HTML5 implementieren Greedy Snake. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die Verwendung und Anwendung des Ausgabe-Tags in HTML5Nächster Artikel：Die Verwendung und Anwendung des Ausgabe-Tags in HTML5