html小游戏代码.doc_第1页
html小游戏代码.doc_第2页
html小游戏代码.doc_第3页
html小游戏代码.doc_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML小游戏帮助你理解学习html的乐趣，那么现在让我们来看 看一些小程序代码 小游戏贪吃蛇让你学习如何建立一个小游戏首先我们先打开html5软件或者打开你的DW软件建立一个html，然后建一个文件夹最好保存在桌面，如有需要可以添加你需要的一些图片作为取材背景。然后敲上我们的代码<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="1000" height="500" style="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; /食物坐标 随机显示出你的食物坐标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>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);map.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;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();&
人人文库> 全部分类> 教育资料 > 幼儿教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论