recherche

Maison  >  Article  >  interface Web  >  Implémentez le jeu Snake en utilisant 63 lignes de code HTML5

Implémentez le jeu Snake en utilisant 63 lignes de code HTML5

不言
不言original
2018-06-11 14:21:352742parcourir

Cet article présente principalement l'implémentation du jeu Snake en utilisant 63 lignes de code HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Snake, The main. points de fonction :

1. Mouvement du serpent

2. Changer la direction du serpent

3. Placer la nourriture

4. 🎜>

5. Comment raccrocher ?

La mise en œuvre spécifique est la suivante. Elle est simple et pratique en 60 lignes. Les amis intéressés peuvent s'y référer. tout le monde. J'ai rarement prêté beaucoup d'attention au HTML5 auparavant, mais j'ai l'impression que le choix du HTML est progressivement devenu une tendance et j'aimerais en savoir plus. J'ai trouvé un jeu sur lequel apprendre. Après avoir écrit ce jeu, j'ai l'impression que HTML5 et JS sont très étroitement intégrés, même si JS n'est pas particulièrement bon. Je suppose que je dois d'abord apprendre js. Ceci est juste une suggestion personnelle et peut ne pas être exacte. Une autre chose est que votre réflexion et votre logique doivent être très claires, sinon écrire des jeux peut être très pénible.

C'est la première fois d'écrire un jeu et la première fois d'écrire du HTML5, cela semble toujours très difficile. Une fois que j’aurai fini de l’écrire, je le partagerai avec vous. Communiquez entre vous............. Si vous ne comprenez pas ou avez des suggestions, vous pouvez me laisser un message. . . Le code est très court, seulement 60 lignes.

Mais c'est un travail en cours, qui attend d'être terminé. Mettez à jour le code

comme suit : 

<!DOCTYPE HTML> 
<html> 
<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas> 
<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var time = 160 ; //蛇的速度 
var cxt=c.getContext("2d"); 
var x = y = 8; 
var a = 0; //食物坐标 
var t = 20; //舍身长 
var map = []; //记录蛇运行路径 
var size = 8; //蛇身单元大小 
var direction = 2; // 1 向上 2 向右 0 左 3下 
interval = window.setInterval(set_game_speed, time); // 移动蛇 
function set_game_speed(){ // 移动蛇 
switch(direction){ 
case 1:y = y-size;break; 
case 2:x = x+size;break; 
case 0:x = x-size;break; 
case 3:y = y+size;break; 
} 
if(x>400 || y>400 || x<0 || y<0){ 
alert("你挂了，继续努力吧!失败原因：碰壁了.....");window.location.reload(); 
} 
for(var i=0;i<map.length;i++){ 
if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){ 
alert("你挂了，继续努力吧！失败原因：撞到自己了.....");window.location.reload(); 
} 
} 
if (map.length>t) { //保持舍身长度 
var cl = map.shift(); //删除数组第一项，并且返回原元素 
cxt.clearRect(cl[&#39;x&#39;], cl[&#39;y&#39;], size, size); 
}; 
map.push({&#39;x&#39;:x,&#39;y&#39;:y}); //将数据添加到原数组尾部 
cxt.fillStyle = "#006699";//内部填充颜色 
cxt.strokeStyle = "#006699";//边框颜色 
cxt.fillRect(x, y, size, size);//绘制矩形 
if((a*8)==x && (a*8)==y){ //吃食物 
rand_frog();t++; 
} 
} 
document.onkeydown = function(e) { //改变蛇方向 
var code = e.keyCode - 37; 
switch(code){ 
case 1 : direction = 1;break;//上 
case 2 : direction = 2;break;//右 
case 3 : direction = 3;break;//下 
case 0 : direction = 0;break;//左 
} 
} 
// 随机放置食物 
function rand_frog(){ 
a = Math.ceil(Math.random()*50); 
cxt.fillStyle = "#000000";//内部填充颜色 
cxt.strokeStyle = "#000000";//边框颜色 
cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形 
} 
// 随机放置食物 
rand_frog(); 
</script> 
</body> 
</html>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. l'étude de tout le monde. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

HTML5 et jQuery pour implémenter la fonction de correspondance intelligente de recherche

Implémentation HTML5 Comment utiliser les boutons pour contrôler le commutateur de musique de fond

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!

php html5 jquery html JS
Déclaration：
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
Article précédent：Introduction à l'API d'historique HTML5Article suivant：Introduction à l'API d'historique HTML5

Articles Liés

Voir plus