[原创]JavaScript贪吃蛇游戏

最新推荐文章于 2025-05-21 09:52:23 发布

原创最新推荐文章于 2025-05-21 09:52:23 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #random #float #input #border

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这是一个用HTML和JavaScript实现的在线贪吃蛇游戏。玩家通过键盘控制蛇的方向，使其吃到地图上的食物并逐渐增长身体长度，同时避免撞到自己或墙壁。游戏提供暂停、重玩等功能。

一个很精致(个人是这么认为的，尽管没有界面)的贪吃蛇游戏，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <title>Snake</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#prompt { margin: auto; width: 402px; font-size: 12px; color: green; background-color: pink; } #prompt input { font-size: 12px; background-color: #555555; cursor: pointer; color: orange; } #snake { border: 1px solid orange; margin: auto; position: relative; width: 400px; height: 300px; } #snake span { float: left; width: 8px; height: 8px; border: 1px solid #feffef; background-color: #ffeeff; } #score { color: blue; float: right; } #state { color: red; } #config { width: 402px; font-size: 12px; background-color: lightblue; margin: auto; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="prompt"> 贪吃蛇,希望你喜欢! 按w上,s下,a左,d右控制移动方向,p暂停/继续<br /> <input id="replay" type="button" value="重玩" /> 游戏状态: <span id="state">进行中>>...</span> <span id="score">得分: 0000</span> </div> <div id="snake"></div> <div id="config"> 速度控制: <select name="spd" id="spd"> <option value="333">3格/秒</option> <option value="400">2.5格/秒</option> <option value="500" selected="selected">2格/秒</option> <option value="666">1.5格/秒</option> <option value="1000">1格/秒</option> </select> 墙壁可穿: <input name="cycle" id="cycle" type="checkbox" /> <span style="float: right;" mce_style="float: right;">Designed By Wind Fantasy.</span> </div> </body> </html>