javascript实现贪吃蛇小游戏


Posted in Javascript onJuly 28, 2020

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
</body>
<script>
 // 贪吃蛇:
 // 键盘的方向键,控制蛇的方向,碰撞食物,实现增加长度的效果,撞到墙壁或自身,游戏结束
 // 分析:
 // 地图:提供边界
 // 食物:随机出现,可以被碰撞(坐标重复)
 // 蛇:初始的固定长度,移动,改变方向,碰撞食物,碰撞墙,碰撞自己(坐标重复)
 
 class Map{
 constructor(){
 // 提前设定将来的地图的样式数据
 this.w = 800;
 this.h = 400;
 this.c = "#ccc";
 // 执行创建地图方法
 this.createEle();
 }
 createEle(){
 this.mapEle = document.createElement("div");
 this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:0 auto;position:relative;border:solid 10px black;`;
 document.body.appendChild(this.mapEle);
 }
 }
 class Food{
 constructor(){
 // 提前设定将来的食物的样式数据
 this.w = 20;
 this.h = 20;
 this.c = "red";
 this.x = 0;
 this.y = 0;
 // 执行创建食物方法
 this.createEle();
 }
 createEle(){
 this.foodEle = document.createElement("div");
 // 设置left和top时要注意,将地图假设成了20个像素的一个格子,注意位置的换算
 this.foodEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute;left:${this.x * this.w}px;top:${this.y * this.h}px;`;
 // console.log(m.mapEle);
 m.mapEle.appendChild(this.foodEle);
 }
 randomPos(){
 // 随机位置,随机产生的是格子的位置,不是真正的像素
 this.x = random(0,(m.w-this.w) / this.w);
 this.y = random(0,(m.h-this.h) / this.h);
 // 设置位置时,要换算成像素,然后再生效
 this.foodEle.style.left = this.x * this.w + "px";
 this.foodEle.style.top = this.y * this.h + "px";
 }
 }

 // 至少得有多个元素(蛇节)组成
 // 每个元素都要有自己的标签,位置,宽高,颜色
 // 单个元素,使用对象包含所有信息
 // 所有元素怎么办?来个数组,包裹起来
 class Snake{
 constructor(){
 // 1.提前设定将来的蛇节的样式数据
 this.w = 20;
 this.h = 20;
 // 2.因为蛇由多个设计组成,每个蛇节都有自己的独立信息,所以数据结构设计成如下格式
 this.body = [{
 ele:null,
 x:4,
 y:3,
 c:randomColor()
 },{
 ele:null,
 x:3,
 y:3,
 c:randomColor()
 },{
 ele:null,
 x:2,
 y:3,
 c:randomColor()
 }];

 // 7-1.提前设置默认方向
 this.d = "right";

 // 3.开始创建蛇节元素,设置样式
 this.createEle();
 }
 createEle(){
 // 4.使用循环多次创建,因为有多个蛇节
 for(var i=0;i<this.body.length;i++){
 // 12.创建之前,需要判断元素是否已经存在,如果已经存在,不需要创建
 if(!this.body[i].ele){
  this.body[i].ele = document.createElement("div");
  m.mapEle.appendChild(this.body[i].ele);
 }
 this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c};position:absolute;left:${this.body[i].x * this.w}px;top:${this.body[i].y * this.h}px;`;
 }
 // 找到蛇头
 this.body[0].ele.innerHTML = "0";

 // 5.延迟之后,开始移动
 setTimeout(()=>{
 this.move();
 },300);
 }
 move(){
 // 6.从最后一个元素向前找前一个元素的坐标,直到第一个
 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;
 }
 // 7.第一个元素根据默认方向,决定想哪走
 switch(this.d){
 case "left":
  this.body[0].x -= 1;
  break;
 case "right":
  this.body[0].x += 1;
  break;
 case "top":
  this.body[0].y -= 1;
  break;
 case "bottom":
  this.body[0].y += 1;
  break;
 }
 
 // 8.移动过程中,判断是否撞到边界,任意一个边界都不行
 if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > ((m.w-this.w) / this.w) || this.body[0].y > ((m.h-this.h) / this.h)){
 alert("撞墙了");
 // 利用return的停止,结束程序
 return;
 }

 // 9.移动过程中,判断是否与食物的坐标重复,如果重复
 if(this.body[0].x === f.x && this.body[0].y === f.y){
 // 给蛇增加一个蛇节
 this.body.push({
  ele:null,
  x:this.body[this.body.length-1].x,
  y:this.body[this.body.length-1].y,
  c:randomColor()
 })
 // 刷新食物的坐标
 f.randomPos();
 }

 // 10.移动过程中,判断蛇头的坐标是否与某个任意一个蛇节的坐标重复
 for(var i=1;i<this.body.length;i++){
 if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
  // 如果重复,撞到自己,结束程序
  alert("撞到自己了");
  return;
 }
 }

 // 以上只是在修改坐标,生效了么?设置回去了么?
 // 走的过程中有可能吃到食物,增加一个蛇节(元素),创建元素
 // 11.所以,使用创建蛇节方法,重新设置蛇节的位置以及判断是否需要创建新元素
 this.createEle();
 }
 direct(type){
 // 14.处理键盘穿件来的code值
 // 处理之前要先判断,当前是否按下了相反方向
 // 如果是相反方向,直接结束判断,不执行
 // 如果不是相反方向,改变初始的默认方向
 switch(type){
 case 37:
  if(this.d === "right") break;
  this.d = "left";
  break;
 case 38:
  if(this.d === "bottom") break;
  this.d = "top";
  break;
 case 39:
  if(this.d === "left") break;
  this.d = "right";
  break;
 case 40:
  if(this.d === "top") break;
  this.d = "bottom";
  break;
 }
 }
 }

 function random(a,b){
 return Math.round(Math.random()*(a-b)+b)
 }
 function randomColor(){
 return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
 }

 var m = new Map();
 
 var f = new Food();
 // 为了测试,先用计时器,重复执行,看一看随机效果
 // setInterval(() => {
 f.randomPos();
 // }, 500);

 var s = new Snake();
 // 13.当按下键盘时,将按下的键盘的code值,传给蛇的专属处理方法
 document.onkeydown = function(eve){
 var e = eve || window.event;
 var code = e.keyCode || e.which;
 s.direct(code);
 }


 // 因为后期要做不允许掉头的效果
 // 所以,采取当前方法:两个分支处理方向


</script>
</html>

javascript实现贪吃蛇小游戏

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

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

Javascript 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
中止javascript执行的方法
Feb 14 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
You might like
PHP学习 运算符与运算符优先级
2008/06/15 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python操作excel让工作自动化
2019/08/09 Python
用Python写一个自动木马程序
2019/09/17 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
党的群众路线学习材料
2014/05/16 职场文书
李敖北大演讲稿
2014/05/24 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
公司员工培训管理制度
2015/08/04 职场文书
团支部书记竞选稿
2015/11/21 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书