This article shares with you all the content of the classic Snake game using simple JS code. Friends who are interested can refer to it.
In the past, Nokia's Snake was all the rage. In an era when games were scarce, it was too difficult to implement using Java. Now, you can create a simple demo with just 20 lines of code to create a web page. Times are progressing
Full script code:
<!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>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement node express personalization chatroom?
How to create an automatic website building project with vue (detailed tutorial)
The above is the detailed content of How to write a snake game using JS code (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!