从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中的constructor和prototype
Apr 07 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
JS实现求5的阶乘示例
Jan 21 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php广告加载类用法实例
2014/09/23 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
python实现清屏的方法
2015/04/30 Python
python实现多线程抓取知乎用户
2016/12/12 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python构建指数平滑预测模型示例
2019/11/21 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
tensorflow自定义激活函数实例
2020/02/04 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python中的django是做什么的
2020/07/31 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
python 录制系统声音的示例
2020/12/21 Python
波兰购物网站:MALL.PL
2019/05/01 全球购物
公务员培训心得体会
2013/12/28 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
学生会任命书范本
2015/09/21 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL