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 相关文章推荐
jquery使用jxl插件导出excel示例
Apr 14 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
Openlayers学习之地图比例尺控件
Sep 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python制作填词游戏步骤详解
2019/05/05 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
企业消防安全责任书
2014/07/23 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
警示教育观后感
2015/06/17 职场文书
二胎满月酒致辞
2015/07/29 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
警用民用对讲机找不同
2022/02/18 无线电
Nginx动静分离配置实现与说明
2022/04/07 Servers