代码随便写写,尚有许多不足,PC与手机端皆可运行手机端滑屏操作,PC端方向键操作疑问:生成食物,与判断是否可以移动方面有两种实现方式,1.使用js内存,数组循环判断2.使用dom的query方法哪种比较快,哪种比较好?目前的代码是用第二种方法实现在线地址:http://wangx ...
代码随便写写,尚有许多不足,PC与手机端皆可运行
手机端滑屏操作,PC端方向键操作
疑问:
生成食物,与判断是否可以移动方面
有两种实现方式,
1.使用js内存,数组循环判断
2.使用dom的query方法
哪种比较快,哪种比较好?
目前的代码是用第二种方法实现
在线地址:
http://wangxinsheng.herokuapp.com/snake
截图:
部分代码:
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="description" content="html5 snake game"> 6 <meta name="keywords" content="snake,html5,canvas,web,game"> 7 <meta name="author" content="WangXinsheng"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black">10 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">11 <meta http-equiv="X-UA-Compatible" content="chrome=1">12 <meta http-equiv="Pragma" content="no-cache">13 <meta http-equiv="Cache-Control" content="no-cache">14 <meta equiv="Expires" content="0">15 <meta http-equiv="content-script-type" content="text/javascript">16 <title>CopyRight©WangXinsheng</title>17 <script src='/images/loading.gif' data-original="game/requestNextAnimationFrame.js"></script>18 <style type="text/css">19 html {color:#000;background:gray;margin:0px; overflow:hidden;}20 body {-webkit-user-select:none;margin:0px;}21 #gameWorld {background-color:#C6EEC6}22 #opp{color:red; font-size:30px; font-weight:bold; text-align:center;vertical-align:middle; cursor:pointer;}23 </style>24 </head>25 <body>26 <canvas id="gameWorld" style="position: absolute; left: 0px; top: 0px;">27 <p>You need a modern browser to view this.</p>28 </canvas>29 <div id="opp" style="position: absolute; left: 0px; top: 0px;">点击开始游戏</div>30 <ul style='display:none' id='dataDom'></ul>31 </body>32 <script src='/images/loading.gif' data-original="game/snakeGame_min.js"></script>33 </html>
原标题:[原创]html5游戏_贪吃蛇
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。