美工统筹SEO，为企业电子商务营销助力！
html5饕餮蛇游戏利用63行代码完善完成一佰互联网站扶植(www.taishanly.com) 宣布时候：2020-04-20 08:56:53 阅读数: 93 |
| 之前也很少存眷html5，感受挑选html已渐渐成为趋向，想领会下。就找了个游戏进修了，写完这个游戏感受html5和js连系很慎密，若是js不是出格好。估量必要先补习下js，这个只是小我的倡议，不必然精确。另有一个便是，思惟和逻辑要出格清晰，不然写游戏能够很疾苦。 饕餮蛇，最首要的功效点： 1，蛇的挪动 2，转变蛇的标的目的 3，安排食品 4，增添捐躯 5,怎样挂的。 第一次写游戏，第一次写html5 感受仍是很费劲的。写完了，给大师分享下。相互交换.............不懂的或有倡议的，能够留言给我。。。代码很短，就60行。 不过这个是个半制品，等写完成了。再更新下 复制代码代码以下: <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var time = 160 ; //蛇的速率 var cxt=c.getContext("2d"); var x = y = 8; var a = 0; //食品坐标 var t = 20; //捐躯长 var map = []; //记实蛇运转途径 var size = 8; //蛇身单位巨细 var direction = 2; // 1 向上 2 向右 0 左 3下 interval = window.setInterval(set_game_speed, time); // 挪动蛇 function set_game_speed(){ // 挪动蛇 switch(direction){ case 1:y = y-size;break; case 2:x = x+size;break; case 0:x = x-size;break; case 3:y = y+size;break; } if(x>400 || y>400 || x<0 || y<0){ alert("你挂了，持续尽力吧!失利缘由：碰鼻了.....");window.location.reload(); } for(var i=0;i<map.length;i++){ if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){ alert("你挂了，持续尽力吧！失利缘由：撞到本身了.....");window.location.reload(); } } if (map.length>t) { //坚持捐躯长度 var cl = map.shift(); //删除数组第一项，并且前往原元素 cxt.clearRect(cl["x"], cl["y"], size, size); }; map.push({"x":x,"y":y}); //将数据增加到原数组尾部 cxt.fillStyle = "#006699";//外部添补色彩 cxt.strokeStyle = "#006699";//边框色彩 cxt.fillRect(x, y, size, size);//绘制矩形 if((a*8)==x && (a*8)==y){ //吃食品 rand_frog();t++; } } document.onkeydown = function(e) { //转变蛇标的目的 var code = e.keyCode - 37; switch(code){ case 1 : direction = 1;break;//上 case 2 : direction = 2;break;//右 case 3 : direction = 3;break;//下 case 0 : direction = 0;break;//左 } } // 随机安排食品 function rand_frog(){ a = Math.ceil(Math.random()*50); cxt.fillStyle = "#000000";//外部添补色彩 cxt.strokeStyle = "#000000";//边框色彩 cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形 } // 随机安排食品 rand_frog(); </script> </body> </html> |
TAG标签： html5饕餮蛇游戏利用63行代码完善完成 |
上一篇：HTML中利用SVG与SVG预约义外形元素先容 下一篇： html5若何实时更新缓存文件(js、css或图片) |
| [前往消息列表] |
