La balise de sortie et la balise canevas en HTML5 implémentent un serpent gourmand-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

La balise de sortie et la balise canevas en HTML5 implémentent un serpent gourmand

黄舟

Jul 03, 2017 am 10:33 AM

canvas html5 output

Méthode de fonctionnement :
Appuyez sur le clavier vers le haut, le bas, la gauche, la droite ou dans le sens du mouvement WASD.
Règles de notation :
Pour chaque section supplémentaire du corps du serpent, le score sera augmenté de 10. Chaque fois que la direction est modifiée avant de manger l'aliment suivant, un point sera soustrait.
ps : Le score peut être négatif {:4_105:}

Tag HTML5 canvas :
L'élément canvas est utilisé pour dessiner des graphiques sur les pages Web.
Utilisez un canevas pour dessiner la grille d'arrière-plan dans Snake :

  //清空整个画布
                                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();
                                }

Copier après la connexion

Utilisez un canevas pour dessiner le corps et la nourriture du serpent dans Snake :

   //绘制蛇的身体
                                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();
                                }

Copier après la connexion

Sortie de la balise HTML5 :
Le L'élément de sortie est utilisé pour différents types de sortie, tels que la sortie de calcul ou de script :

 <div>
                        <output id="result" onforminput="resCalc()"></output>
                </div>
                <script>
                        document.getElementById(&#39;result&#39;).value = score;
                </script>

Copier après la connexion

<!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>

Copier après la connexion

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Économie dans R.E.P.O. Expliqué (et enregistrer des fichiers)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7563

Tutoriel CakePHP

1385

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles