Implémentez le jeu Snake en utilisant 63 lignes de code HTML5-Tutoriel H5-php.cn

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

不言

Libérer： 2018-06-11 14:21:35

original

2716 Les gens l'ont consulté

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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