用html实现贪吃蛇游戏思路,贪吃蛇游戏
贪吃蛇作为一款经典游戏,获得了很多人的青睐,之所以能经久不衰,是因为贪吃蛇从游戏设计之始,就进行了全方位的考虑。不仅要做到有趣,更要做到设计美观,简洁大方。游戏设计要从布局,框架结构,按钮,贪吃蛇的行走方向,编程语言几个方面进行全面的考虑
贪吃蛇,最主要的功能点:1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的,具体实现如下,简单实用就60行,感兴趣的朋友可以参考下哈,希望对大家有所帮助
以前也很少关注HTML5,感觉选择html已经慢慢成为趋势,想了解下。就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好。估计需要先补习下js,这个只是个人的建议,不一定准确。还有一个就是,思维和逻辑要特别清楚,不然写游戏可能很痛苦。
贪吃蛇,最主要的功能点:1,蛇的移动2,改变蛇的方向3,放置食物4,增加舍身5,怎么挂的。
第一次写游戏,第一次写html5感觉还是很吃力的。写完了,给大家分享下。互相交流.............不懂的或者有建议的,可以留言给我。。。代码很短,就60行。
不过这个是个半成品,等写完成了。再更新下
复制代码代码如下:
varc=document.getElementById("myCanvas");
vartime=160;//蛇的速度
varcxt=c.getContext("2d");
varx=y=8;
vara=0;//食物坐标
vart=20;//舍身长
varmap=[];//记录蛇运行路径
varsize=8;//蛇身单元大小
vardirection=2;//1向上2向右0左3下
interval=window.setInterval(set_game_speed,time);//移动蛇
functionset_game_speed(){//移动蛇
switch(direction){
case1:y=y-size;break;
case2:x=x+size;break;
case0:x=x-size;break;
case3:y=y+size;break;
}
if(x>400||y>400||x<0||y<0){
alert("你挂了,继续努力吧!失败原因:碰壁了.....");window.location.reload();
}
for(vari=0;i
if(parseInt(map[i].x)==x&&parseInt(map[i].y)==y){
alert("你挂了,继续努力吧!失败原因:撞到自己了.....");window.location.reload();
}
}
if(map.length>t){//保持舍身长度
varcl=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.οnkeydοwn=function(e){//改变蛇方向
varcode=e.keyCode-37;
switch(code){
case1:direction=1;break;//上
case2:direction=2;break;//右
case3:direction=3;break;//下
case0:direction=0;break;//左
}
}
//随机放置食物
functionrand_frog(){
a=Math.ceil(Math.random()*50);
cxt.fillStyle="#000000";//内部填充颜色
cxt.strokeStyle="#000000";//边框颜色
cxt.fillRect(a*8,a*8,8,8);//绘制矩形
}
//随机放置食物
rand_frog();
贪吃蛇是一项益智游戏,不仅要做到有趣,更要做到设计美观,简洁大方。游戏设计要从布局,框架结构,按钮,贪吃蛇的行走方向,编程语言几个方面进行全面的考虑,贪吃蛇的形象要符合大众的审美,行走方向及遇到墙之后的反应进行全面的考虑,只有从更全面的角度出发,才能让一个游戏获得更多人的青睐。
用html实现贪吃蛇游戏思路,贪吃蛇游戏相关推荐
- 数独游戏思路html,数独游戏的前端实现
之前学习目的写的一个数独游戏,用jquery模块形式.mvc模式实现的. 1. controller.sudoku.js// Controller Sudoku.js (function ($) { ...
- c语言——游戏思路及其相关函数
c语言--贪吃蛇制作思路及其相关函数 游戏思路 游戏制作思考点 相关完全的代码 相关函数 sleep函数 system函数 getch函数 kbhit()函数 gotoxy函数 HideCursor( ...
- 50行的python游戏代码_50行代码实现贪吃蛇(具体思路及代码)
[下载文档: 50行代码实现贪吃蛇(具体思路及代码).txt ] (友情提示:右键点上行txt文档名->目标另存为) 50行代码实现贪吃蛇(具体思路及代码) 最近一直在准备用来面试的几个小de ...
- C语言 小游戏之贪吃蛇
还记得非常久曾经听群里人说做贪吃蛇什么的,那时候大一刚学了C语言,认为非常难,根本没什么思路. 前不久群里有些人又在谈论C语言贪吃蛇的事了,看着他们在做,我也打算做一个出来. 如今大三,经过了这一年半 ...
- 基于RT-Thread实现的小游戏(贪吃蛇、俄罗斯方块)
前言:本实现基于stm32芯片,移植RT_Thread Nano系统源码,实现两个小游戏(贪吃蛇/俄罗斯方块).本实验提供完整的IAR工程源码并且有很多注释,是一个不错的参考例程.关键知识点:OLED ...
- JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
一.效果展示 二.<贪吃蛇>基本实现思路 蛇头部分+蛇身体部分:采用对象形式来存储坐标,并将每个坐标对象放到一个snake数组中,方便使用.设置每个方格宽度30px,高度30px,画布高度 ...
- java游戏贪吃蛇_Java实现贪吃蛇游戏
最近JAVA和JSwing上手练习了一下贪吃蛇,供大家参考,具体内容如下 欢迎交流和加入新的内容 用到了JSwing,下面是一些具体的思路 实现 * 蛇: 采用单链表记录首尾,整个蛇被分为lattic ...
- 你真以为贪吃蛇是个简单的游戏?
博客搬家:最爱午后红茶 诺基亚手机经典游戏,规则不多说~ 先上一个多年前火了一段时间的 gif 动态图以表达敬意: 听说这是一个俄罗斯人用程序实现的. 所以这里想谈一下 贪吃蛇如何才能把地图填满? 我 ...
- 摸鱼宝典(一)——贪吃蛇游戏改版:贪吃龙 · 双龙戏珠小游戏(Python)
啊哈哈哈,最近闲来无事,随手写了个小游戏,在学习的时候摸鱼和划水那是必备啊!还等什么?快来体验这款独特的改版贪吃蛇 --<贪吃龙 · 双龙戏珠>小游戏吧! [Tip:源码下载链接在文章最下 ...
- Java游戏开发——贪吃蛇
最近在重构代码,思路和制作过程都有不少变化,为了避免混淆,我将之前的博客内容移到了我的有道云笔记里,通过链接可以查看历史文章. 旧版:http://note.youdao.com/noteshare? ...
最新文章
- 微波人体感应模块 24G 24.125g 感应开关微波传感器模块
- c语言运算符的语法,C语言中条件运算符的语法为
- 【python】一个简单的贪婪爬虫
- UA OPTI512R 傅立叶光学导论14 Wiener-Khinchine定理,Rayleigh定理与矩定理
- ML之DT之CART:分类与回归树CART算法的简介、应用、经典案例之详细攻略
- html的input的id,请求[“inputId”]不能在cshtml上工作
- 仅剩296个免费名额,AI工程师进阶必修课今日领取
- SpringBoot yml 配置
- python是什么类型的语言-Python是什么?简单了解pythonp-入门
- javascript小实例,阻止浏览器默认行为,真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法...
- mysql中regexp用法_MySQL中REGEXP正则表达式使用大全
- ERP、CRM、SCM、电子商务、BI、ITSS
- html页面内容的收缩和展开效果,jquery简单实现网页层的展开与收缩效果
- 华为路由器:首次登陆配置Console、Telnet登录、Web登录
- Gateway网关- 微服务(十四)
- Excel绘制CDF图
- kuwo.php采集,PHP获取酷我音乐MP3外链
- Go包管理工具Vendor使用教程
- Hadoop in action 第45678章
- [大数据]数据可视化 -- 练习卷(下)