《最新html小游戏代码.doc》由会员分享，可在线阅读，更多相关《最新html小游戏代码.doc（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精品资料html小游戏代码.html小游戏代码HTML小游戏帮助你理解学习html的乐趣，那么现在让我们来看 看一些小程序代码 小游戏贪吃蛇让你学习如何建立一个小游戏首先我们先打开html5软件或者打开你的DW软件建立一个html，然后建一个文件夹最好保存在桌面，如有需要可以添加你需要的一些图片作为取材背景。然后敲上我们的代码<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="1000" height="500" style=&quo
2、t;border:5px solid #C06 ; "></canvas> /注意如果需要贪吃蛇的背景图片需要在style里面加入background加入你的图片地址<script type="text/javascript">var c=document.getElementById("myCanvas");var time = 60 ; /蛇的速度 数值越大蛇运行速度越慢var cxt=c.getContext("2d");var x = y = 8;var a = 0; /食物坐标 随机显
3、示出你的食物坐标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;b
4、reak;if(x>1000 | y>500 | x<0 | y<0)for(var i=0;i<map.length;i+)if( parseInt(mapi.x)=x && parseInt(mapi.y)=y)alert("你挂了，继续努力吧！失败原因：撞到自己了.");window.location.reload();if (map.length>t) /保持舍身长度var cl = map.shift(); /删除数组第一项，并且返回原元素cxt.clearRect(clx, cly, size, size);m
5、ap.push(x:x,y:y); /将数据添加到原数组尾部cxt.fillStyle = "#C06"/内部填充颜色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;brea
6、k;/上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>直接输入然后运行即可！学html寻找你的乐趣！网页编辑设计，游戏开发喜欢的点一点！欢迎你的欣赏开心代码站！