原生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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
IE8 原生JSON支持
Apr 13 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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 高手之路(二)
2006/10/09 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python编程中的异常处理教程
2015/08/21 Python
浅谈Python 对象内存占用
2016/07/15 Python
pyenv命令管理多个Python版本
2017/03/26 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python map及filter函数使用方法解析
2020/08/06 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
测绘工程系学生的自我评价
2013/11/30 职场文书