你的位置:首页 > 软件开发 > Java > [原创]html5游戏_贪吃蛇

[原创]html5游戏_贪吃蛇

发布时间:2015-03-20 20:00:32
代码随便写写,尚有许多不足,PC与手机端皆可运行手机端滑屏操作,PC端方向键操作疑问:生成食物,与判断是否可以移动方面有两种实现方式,1.使用js内存,数组循环判断2.使用dom的query方法哪种比较快,哪种比较好?目前的代码是用第二种方法实现在线地址:http://wangx ...

代码随便写写,尚有许多不足,PC与手机端皆可运行

手机端滑屏操作,PC端方向键操作

疑问:

生成食物,与判断是否可以移动方面

有两种实现方式,

1.使用js内存,数组循环判断

2.使用dom的query方法

哪种比较快,哪种比较好?

目前的代码是用第二种方法实现

在线地址:

http://wangxinsheng.herokuapp.com/snake

截图:

[原创]html5游戏_贪吃蛇

部分代码:

html:

[原创]html5游戏_贪吃蛇[原创]html5游戏_贪吃蛇
 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&copy;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 (#换成@)。