从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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
javascript常用的方法整理
Aug 20 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
vue.js学习之递归组件
Dec 13 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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桌面中心(三) 修改数据库
2007/03/11 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
学生个人的自我评价分享
2013/11/05 职场文书
大气污染防治方案
2014/05/19 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
教师个人事迹材料
2014/12/17 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
python常见的占位符总结及用法
2021/07/02 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python