用html5的63行代码实现贪吃蛇游戏

这篇文章主要介绍了关于用html5的63行代码实现贪吃蛇游戏,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

贪吃蛇,最主要的功能点:

1、蛇的移动

2、改变蛇的方向

3、放置食物

立即学习“前端免费学习笔记(深入)”;

4、增加舍身

5、怎么挂的,

具体实现如下,简单实用就60行,感兴趣的朋友可以参考下哈,希望对大家有所帮助以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下。就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好。估计需要先补习下js,这个只是个人的建议,不一定准确。还有一个就是,思维和逻辑要特别清楚,不然写游戏可能很痛苦。  

第一次写游戏,第一次写html5 感觉还是很吃力的。写完了,给大家分享下。互相交流………….不懂的或者有建议的,可以留言给我。。。代码很短,就60行。
不过这个是个半成品,等写完成了。再更新下 

代码如下:

nbsp;HTML>     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;it) { //保持舍身长度 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();   

登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

HTML5和jQuery实现搜索智能匹配的功能

HTML5和jQuery实现搜索智能匹配的功能

以上就是用html5的63行代码实现贪吃蛇游戏的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3124513.html

(0)
上一篇 2025年3月29日 19:17:50
下一篇 2025年2月28日 12:06:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 关于HTML5 history API 的介绍

    HTML5 history API介绍 history是个全局变量,即window.history 属性和方法如下: length:历史堆栈中的记录数。 back(): 返回上一页。 foward(): 前进到下一页。 go([delta]…

    编程技术 2025年3月29日
    000
  • 关于HTML5本地存储的相关讲解

    编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。 历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:  HTTP cookie。…

    编程技术 2025年3月29日
    100
  • HTML5 video标签的播放控制

    这篇文章主要介绍了html5 video标签的播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签video(播放器)初始化需要做的一些工作…

    编程技术 2025年3月29日
    100
  • html5实现兼容各大浏览器的播放器的解析

    这篇文章主要介绍了html5实现完美兼容各大浏览器的播放器,需要的朋友可以参考下 歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出…

    编程技术 2025年3月29日
    100
  • 如何使用jQuery和HTML5实现手机摇一摇的换衣特效

    经常我们玩微信都会用到查到附近的人,都是在app上实现手机摇一摇的功能。现在,我们将此技术搬移到手机web上,供大家学习,有需要的小伙伴可以参考下。 手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用H…

    编程技术 2025年3月29日
    100
  • HTML5的本地存储IndexedDB

    这篇文章主要介绍了关于html5的本地存储indexeddb,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。下面通过本文重点给…

    编程技术 2025年3月29日
    100
  • HTML5如何实现视频直播功能

    最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下来将围绕这两种视频流协议来展开H5直播主题分享,下面通过本文给大家分享HTM…

    2025年3月29日 编程技术
    100
  • HTML5 实现访问本地文件的方法

    这篇文章主要介绍了关于html5 实现访问本地文件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 今天,我将向大家分享一个简单的应用,用来演示使用FileReader的方法, FileReader是HTML5里提供的一…

    编程技术 2025年3月29日
    100
  • 在HTML5在线预览PDF格式的代码

    本篇文章主要介绍了HTML5在线预览PDF的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 简介 PDF.js is a Portable Document Format (PDF) viewer th…

    编程技术 2025年3月29日
    100
  • 关于HTML5 input placeholder 的颜色修改

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS  input[placeho…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论