html5-canvas(简单贪吃蛇)
Canvas画图
<script src="../js/jquery-1.11.3.js"></script>
<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 = 2; //蛇身长
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>600 || y>500 || x<0 || y<0){
alert("你碰壁啦#29.....");
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 = ranColor();//内部填充颜色
cxt.strokeStyle = "purple";//边框颜色
cxt.fillRect(x, y, size, size);//绘制矩形
if((a*8)==x && (a*8)==y){ //吃食物
food();t++;
}
}
function ranColor(){
var a = "#";
var t = "";
for(var i =0 ;i<6;i++){
t+=parseInt(Math.random()*16).toString(16);//由一行一个数字变成字符串:一行六个字;
}
a+=t;//让#跟字符串连接起来;
return a;
}
document.onkeydown = function(e) { //改变蛇方向
//alert(e.keyCode);
if(e.keyCode==32){//空格
clearInterval(interval);
}else if(e.keyCode==70){//F键
interval = window.setInterval(set_game_speed, time);
}
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 food(){
a = Math.ceil(Math.random()*50);
cxt.fillStyle = ranColor();//内部填充颜色
cxt.strokeStyle = "#000000";//边框颜色
cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
}
// 随机放置食物
food();
</script>
闲来无事,捣鼓一个小东西玩……突然想到了canvas,然后就来了条蛇玩= =……
可见我是得有多怕技术丢掉= =。下面步入正题。写的太粗糙,各位大神不喜勿喷= =,欢迎各路大神技术交流。
html5-canvas(简单贪吃蛇)相关推荐
- 基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
近重要在研究OAuth2,等demo完成了,会给大家来一个专题分享. 看到我身边的一个同事在玩 蛇蛇争霸 感觉蛮有意思的,这里找了一个 贪吃蛇的游戏 分享给大家. 按理说canvas与其应用是老生常谈 ...
- HTML5 Canvas实现贪吃蛇(二)
有了一个实心圆,就可想想大致的思路了. 游戏思路 全局变量:global 浏览器类型,区别PC浏览器和手机端的浏览器,broswerType: canvas的长和宽,paleWidth,paleHei ...
- html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下 实现思路: ps:这个只是思路,详细可看代码注释 一.先把蛇画出来 定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
- html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
- html5实现贪吃蛇,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
- Canvas实现贪吃蛇小游戏(面向对象)
Canvas实现贪吃蛇小游戏 我们常常在网页上制作的小游戏都是通过Canvas实现的,虽然我们也可以使用DOM来实现,但是这样会更加的节约资源. 我们书写这个小游戏的目的主要是为了适应js中关于面向对 ...
- 基于C语言Ncurse库和链表的简单贪吃蛇小游戏
参考:基于C语言Ncurse库和链表的简单贪吃蛇小游戏 作者:三速何时sub20 发布时间:2020-09-29 10:23:51 网址:https://blog.csdn.net/weixin_44 ...
- html与js简单小游戏,JS实现简单贪吃蛇小游戏
本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.使用语言 HTML+CSS+JavaScript 2.使用工具 visual studio code 3.GitHu ...
- php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
- 简单贪吃蛇c语言代码,一个C语言写简单贪吃蛇源代码.doc
一个C语言写简单贪吃蛇源代码 #include #include #include #include #include #include int grade=5,point=0,life=3; voi ...
最新文章
- 生命的真谛不在于你呼吸的次数,而在于那些令你无法呼吸的时刻
- Java高级技术笔记
- Java+eclipse的配置
- UIDynamicBehavior的行为类翻译
- css垂直居中如何实现
- python代码异常对照表格_Python表格py错误(pandas错误?)
- python类的数组属性_Python学习之数组类型一:
- 第一章 Windows编程基础(1~4课)
- ZZULIOJ:1001: 整数a+b
- cadvisor没有采集到容器信息解决方案
- IO流的知识点总结归纳
- CIO如何计算信息化的投资回报率?
- 关于 COPY 导入数据的问题
- 编码:隐匿在计算机软硬件背后的语言(2)--二进制
- xp计算机无法关机,WinXP电脑无法关机的解决方法
- python培训+价格上海
- CentOS6.5下搭建LAMP+FreeRadius+Daloradius Web管理和TP-LINK路由器、H3C交换机连接,实现,上网认证和记账功能
- 7-第一个汇编程序hello world
- mnist 数据集 下载 训练 测试 pytorch
- 乳腺肿瘤超声图像感兴趣区域的自动识别综述