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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP6新特性分析
2016/03/03 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
Vuex 入门教程
2018/01/10 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python函数学习笔记
2008/10/07 Python
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python用threading实现多线程详解
2017/02/03 Python
python 获取字符串MD5值方法
2018/05/29 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
护士自我评价
2014/02/01 职场文书
人事专员的职责
2014/02/26 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
销售督导岗位职责
2015/04/10 职场文书