从0到1学习JavaScript编写贪吃蛇游戏


Posted in Javascript onJuly 28, 2020

本文实例为大家分享了JavaScript编写贪吃蛇游戏的具体代码,供大家参考,具体内容如下

游戏截图

从0到1学习JavaScript编写贪吃蛇游戏

1.画出游戏界面

var c=document.getElementById("myCanvas");
 var cxt=c.getContext("2d");//获取地图

2.给小蛇设置参数

var time = 160 ; //蛇的速度
 var x = y = 8; 
   var t = 20; //蛇身长
   var map = []; //记录蛇运行路径
 var size = 8; //蛇身单元大小

3.移动小蛇以及判断游戏失败条件

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 = "green";//内部填充颜色
  cxt.strokeStyle = "green";//边框颜色
  cxt.fillRect(x, y, size, size);//绘制矩形
  if((a*8)==x && (a*8)==y){ //吃食物
  rand_frog();t++;//吃到食物蛇身加长
  Score_change();
  }
 }

4.改变蛇的方向

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;//左
 }
 }

5.随机生成食物

//随机生成食物 
 function rand_frog(){
   a = Math.ceil(Math.random()*50);
   cxt.fillStyle = "red";//内部填充颜色
   cxt.strokeStyle = "red";//边框颜色
   cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
}
// 随机放置食物
rand_frog();

6.设置得分情况

//计算得分
function Score_change(){
 s=s+10;
 score.value=s; 
}

完整源代码:

从0到1学习JavaScript编写贪吃蛇游戏

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 #Javascript
JS代码简洁方式之函数方法详解
Jul 28 #Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
13个PHP函数超实用
2015/10/21 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
出纳岗位职责
2013/11/09 职场文书
自考生自我评价分享
2014/01/18 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
人与自然观后感
2015/06/16 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL