原生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 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue渲染方式render和template的区别
Jun 05 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图片验证码制作实现分享(全)
2012/05/10 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP微信红包API接口
2015/12/05 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
jQuery实用基础超详细介绍
2013/04/11 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
质检部部长职责
2013/12/16 职场文书
小学老师寄语大全
2014/04/04 职场文书
公司任命书模板
2014/06/06 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
创业计划书之家教中心
2019/09/25 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
MySQL 数据库范式化设计理论
2022/04/22 MySQL