原生js实现贪吃蛇游戏


Posted in Javascript onOctober 26, 2020

原生JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

原生js实现贪吃蛇游戏

代码:

<script>
 var timer = null;
 var oMain = document.getElementById("main");
 
 function Map(atom,xnum,ynum){//地图,设置单位大小,及根据单位大小创建地图
  this.atom = atom;
  this.xnum = xnum;
  this.ynum = ynum;
  
  this.create = function(){
  
  this.canvas = document.createElement("div");
  this.canvas.style.cssText = "position: relative;top: 40px;border: 1px solid red;background: #F1F1F1;"
  this.canvas.style.width = this.atom * this.xnum + "px";//画布宽
  this.canvas.style.height = this.atom * this.ynum + "px";//画布高
  main.appendChild(this.canvas);
  }
 }
 
 function Food(map){//食物
  this.width = map.atom;
  this.height = map.atom;
  //实现随机背景色
  this.bgColor = "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
 
  this.x = Math.floor(Math.random()*map.xnum);
  this.y = Math.floor(Math.random()*map.ynum);
  
  this.flag = document.createElement('div');
  this.flag.style.width = this.width + 'px';
  this.flag.style.height = this.height + 'px';
  this.flag.style.backgroundColor = this.bgColor;
  this.flag.style.borderRadius = '50%';
  this.flag.style.position = "absolute";
  this.flag.style.left = this.x * this.width + 'px';
  this.flag.style.top = this.y * this.height + 'px';
  
  map.canvas.appendChild(this.flag);
 }
 
 //重新开始
 function restart(map,snake){
  for(var i=0; i<snake.body.length; i++){
  map.canvas.removeChild(snake.body[i].flag);
  }
  snake.body = [
  {x : 2,y : 0},//蛇头
  {x : 1,y : 0},//蛇身
  {x : 0,y : 0}//蛇尾
  ]
  snake.direction = "right";
  snake.display();
  
  map.canvas.removeChild(food.flag);
  food = new Food(map);
 }
 
 function Snake(map){
  this.width = map.atom;
  this.height = map.atom;
  
  this.direction = "right";
  
  this.body = [
  {x : 2,y : 0},
  {x : 1,y : 0},
  {x : 0,y : 0}
  ]
  
  this.display = function(){
  for(var i=0; i<this.body.length; i++){
   if(this.body[i].x != null){
   var s = document.createElement('div');
   //将节点保存
   this.body[i].flag = s;
   
   //设置样式
   s.style.width = this.width + 'px';
   s.style.height = this.height + 'px';
   s.style.backgroundColor = "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
   s.style.borderRadius = '50%';
   
   //设置位置
   s.style.position = "absolute";
   s.style.left = this.body[i].x * this.width + 'px';
   s.style.top = this.body[i].y * this.height + 'px';
   
   //添加到地图
   map.canvas.appendChild(s);
   }
  }
  }
  
  this.run = function(){
  for(var i=this.body.length-1; i>0; i--){
   this.body[i].x = this.body[i-1].x;
   this.body[i].y = this.body[i-1].y
   
  }
  switch(this.direction){
   case "left":this.body[0].x -= 1;break;
   case "right":this.body[0].x += 1;break;
   case "up":this.body[0].y -= 1;break;
   case "down":this.body[0].y += 1;break;
  }
  //吃食物
  if(this.body[0].x == food.x && this.body[0].y == food.y){
   this.body.push({x : null,y : null,flag : null});
   
   map.canvas.removeChild(food.flag);
   food = new Food(map);
  }
  
  //判断游戏结束
  if(this.body[0].x<0 || this.body[0].x>map.xnum-1 || this.body[0].y<0 || this.body[0].y>map.ynum-1){
   clearInterval(timer);
   alert("GAME OVER!");
   restart(map,this);
   return false;
  }
  for(var i=4; i<this.body.length; i++){
   if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
   clearInterval(timer);
   alert("GAME OVER!");
   restart(map,this);
   return false;
   }
  }
  
  //删除原来
  for(var i=0; i<this.body.length; i++){
   if(this.body[i].flag != null){
   map.canvas.removeChild(this.body[i].flag);
   }
  }
  this.display();
  }
 }

 
 //创建地图对象
 var map = new Map(20,40,20);
 map.create();
 
 //创建食物对象
 var food = new Food(map);
 
 //创建蛇对象
 var snake = new Snake(map);
 snake.display();
 
 
 //加上键盘事件(改变蛇头方向)
 window.onkeydown = function(e){
  event = e || window.event;
  
  switch(event.keyCode){
  case 38:
   if(snake.direction != "down")//禁止掉头
   snake.direction = "up";
  break;
  case 40:
   if(snake.direction != "up")
   snake.direction = "down";
  break;
  case 37:
   if(snake.direction != "right")
   snake.direction = "left";
  break;
  case 39:
   if(snake.direction != "left")
   snake.direction = "right";
  break;
  }
 }
 
 var speed = 100;
 
 function start(){
  clearInterval(timer);
  timer = setInterval(function(){
  snake.run();
  document.getElementById("score").innerHTML = snake.body.length-3;
  start();
  },speed)
 }
 
 //难度
 document.getElementById("1").onclick = function(){
  speed = 100;
 }
 
 document.getElementById("2").onclick = function(){
  speed = 50;
 }
 
 document.getElementById("3").onclick = function(){
  speed = 20;
 }
 
 document.getElementById("begin").onclick = function(){
  start();
 }
 
 document.getElementById("pause").onclick = function(){
  
  clearInterval(timer);
 }
</script>

代码仅有js部分,完整代码可以上我的github免费下载

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

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

Javascript 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
jQuery实现简单评论区功能
Oct 26 #jQuery
You might like
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
英语自荐信范文
2013/12/11 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
公司投资建议书
2014/05/16 职场文书
推广普通话演讲稿
2014/05/23 职场文书
地震捐款倡议书
2014/08/29 职场文书
幼师小班个人总结
2015/02/12 职场文书
会议主持词通用版
2019/04/02 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
python生成随机数、随机字符、随机字符串
2021/04/06 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python使用pyecharts控件绘制图表
2022/06/05 Python