JavaScript打造的小游戏贪吃蛇(详解)

发布时间：2018-08-24 22:10:36 所属栏目：语言来源：站长网

导读：作者：CNwander 测试：IE7 FF3.0.14 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/htm

作者：CNwander
测试：IE7 FF3.0.14

<!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=utf-8" /> <title>贪吃蛇 - by CNwander</title> <style type="text/css"> * {margin:0; padding:0} body {background:#333; -moz-user-select:none; text-align:center; font-size:12px} table {margin:80px auto 10px auto; overflow:hidden; border-collapse:collapse; } td {width:20px; height:20px; border:1px solid #eee; background:#f4f4f4} .cover {background:#39c;} .food {background:#093} .block {background:#333} .brake {background:#f00} .skate {background:#00f} #say {margin-top:50px; color:white} #help {width:420px; margin:0 auto; line-height:17px; color:white} #help span {float:left; margin-right:10px} #help .box {width:15px; height:15px; margin-right:5px; border:1px solid white} #btnStart {clear:both; width:100px; height:30px; margin-top:10px; padding:0; background:#bbb; color:#222; border:1px solid #fff; border-bottom-color:#000; border-right-color:#000; cursor:pointer} </style> </head> <body onselectstart="return false"> <div id="say">贪吃蛇</div> <div id="snakeWrap"></div> <div id="help"> <span class="box food"></span><span>绿色食物</span> <span class="box block"></span><span>灰色毒品</span> <span class="box skate"></span><span>蓝色滑板</span> <span class="box brake"></span><span>红色刹车</span> <span style="float:right">最高分：<strong id="score">0</strong></span> <input type="button" id="btnStart" value="开始游戏" /> </div> </body> </html><br /><center>烈火网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

Tips: (老鸟跳过，希望对新手有所帮助)

IE: element.innerText = FF: element.textContent；
setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (一不小心就犯错了)；
FF中，使用绑定在某元素上的键盘事件前，先让它获得焦点，document也不例外，这容易疏忽；
在IE中create table element，记得加tbody；
代码（有详细注释）：

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

JS怎样完成移动端的拖	css3渐变背景的兼容问
css3的focus-within选	CSS属性之字体文本列