html5贪吃蛇游戏使用63行代码完美实现


Posted in HTML / CSS onJune 25, 2013

以前也很少关注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>
HTML / CSS 相关文章推荐
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 #HTML / CSS
html5 offlline 缓存使用示例
Jun 24 #HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 #HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 #HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 #HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 #HTML / CSS
You might like
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
使用URL传输SESSION信息
2015/07/14 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php读取本地json文件的实例
2018/03/07 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python项目打包成二进制的方法
2020/12/30 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
高中军训感言400字
2014/02/24 职场文书
信息工作经验交流材料
2014/05/28 职场文书
比赛口号大全
2014/06/10 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
浅谈如何保证Mysql主从一致
2022/03/13 MySQL