cari

Rumah >hujung hadapan web >tutorial js >如何使用JS代码写出贪吃蛇游戏（详细教程）

如何使用JS代码写出贪吃蛇游戏（详细教程）

亚连
亚连asal
2018-06-12 14:41:151787semak imbas

本篇文章给大家分享了用嘴简单的JS代码来实现经典贪吃蛇游戏的全部内容，有兴趣的朋友参考学习下。

曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊

完整脚本代码：

<!doctype html> 
<html> 
<body> 
 <canvas id="can" width="400" height="400" style="background: Black"></canvas> 
 <script> 
 var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d"); 
 function draw(t, c) { 
  ctx.fillStyle = c; 
  ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18); 
 } 
 document.onkeydown = function(e) { 
  fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n 
 }; 
 !function() { 
  sn.unshift(n = sn[0] + fx); 
  if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19) 
  return alert("GAME OVER"); 
  draw(n, "Lime"); 
  if (n == dz) { 
  while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0); 
  draw(dz, "Yellow"); 
  } else 
  draw(sn.pop(), "Black"); 
  setTimeout(arguments.callee, 130); 
 }(); 
 </script> 
</body> 
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在zTree树插件中如何实现全国五级地区点击后加载

如何实现node+express个性化聊天室？

vue如何制作自动建站项目（详细教程）

Atas ialah kandungan terperinci 如何使用JS代码写出贪吃蛇游戏（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Java express JS
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在HTTP中gzip压缩问题Artikel seterusnya：在Javascript中如何将路径转换为base64编码

Artikel berkaitan

Lihat lagi