Heim > Artikel > Web-Frontend > Implementieren Sie das Snake-Spiel mit 63 Zeilen HTML5-Code

Implementieren Sie das Snake-Spiel mit 63 Zeilen HTML5-Code

不言Original: 2018-06-11 14:21:352672Durchsuche

Dieser Artikel stellt hauptsächlich die Implementierung des Snake-Spiels mit 63 Zeilen HTML5-Code vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

Snake, The main Funktionspunkte:

1. Bewegung der Schlange

3. Opferung erhöhen

5. Wie man auflegt?

Die konkrete Umsetzung ist wie folgt: Ich hoffe, dass es hilfreich ist alle. Ich habe HTML5 bisher selten viel Aufmerksamkeit geschenkt, aber ich habe das Gefühl, dass die Wahl von HTML allmählich zu einem Trend geworden ist, und ich würde gerne mehr wissen. Ich habe ein Spiel gefunden, von dem ich lernen kann. Nachdem ich dieses Spiel geschrieben habe, habe ich das Gefühl, dass HTML5 und JS sehr eng integriert sind, auch wenn JS nicht besonders gut ist. Ich denke, ich muss zuerst js lernen. Dies ist nur ein persönlicher Vorschlag und möglicherweise nicht korrekt. Eine andere Sache ist, dass Ihr Denken und Ihre Logik sehr klar sein müssen, sonst kann das Schreiben von Spielen sehr schmerzhaft sein.

Es ist das erste Mal, dass ich ein Spiel schreibe, und das erste Mal, dass ich HTML5 schreibe. Es fühlt sich immer noch sehr schwierig an. Sobald ich mit dem Schreiben fertig bin, werde ich es mit Ihnen teilen. Kommunizieren Sie miteinander............. Wenn Sie etwas nicht verstehen oder Vorschläge haben, können Sie mir eine Nachricht hinterlassen. . . Der Code ist sehr kurz, nur 60 Zeilen.

Aber das ist noch ein Work-in-Progress, der darauf wartet, abgeschlossen zu werden. Aktualisieren Sie den

-Code wie folgt:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein . Mehr verwandte Bitte beachten Sie den Inhalt der chinesischen PHP-Website! Verwandte Empfehlungen:

HTML5 und jQuery zur Implementierung der intelligenten Such-Matching-Funktion

HTML5-Implementierung So verwenden Sie Tasten zum Steuern des Hintergrundmusikwechsels

Das obige ist der detaillierte Inhalt vonImplementieren Sie das Snake-Spiel mit 63 Zeilen HTML5-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 jquery html JS

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：Einführung in die HTML5-Verlaufs-APINächster Artikel：Einführung in die HTML5-Verlaufs-API

In Verbindung stehende Artikel

Mehr sehen