文档章节

如何用js实现贪吃蛇

smile_微笑
 smile_微笑
发布于 2017/09/07 12:26
字数 1441
阅读 45
收藏 0

如何用js实现贪吃蛇

用自己学过的js知识来实现贪吃蛇游戏

首先就是贪吃蛇的游戏规则(不用说了,大家都玩过)

如何实现呢?

1.可以用html+css的方式来实现(样式需要多些一点) 2.用canvas画布的方式(这个看起来高大上,好就用这个)

编程方式可以使用面向对象、面向过程的方式(我这里选择的面向过程的方式,后面可以改成面向对象的方式)

首先全局定义几个方法中需用到的变量

  • width = 15; //这个是代表每个格子的宽度

  • snakeCount = 6; //这个是表示蛇身体的长度(初始值是6可以修改)

  • snake = [] //存储蛇当前的位置坐标

  • foodX foodY //用来表示食物的坐标

  • toGo //保存当前移动的方向

需要实现以下几个方法:

1.绘制的方法(包含绘制背景地图,绘制蛇当前的位置,食物的位置)

  function drawRect(){
       //选用450*450正方形格子进行绘制(因为定义每个格子是大小是15*15 所以需要绘制30个格子)
        for(var i=0;i<30;i++){
            ctx.strokeStyle="#000000";
            ctx.beginPath();//开始路径
  
            //起点
            ctx.moveTo(i*15,0);
            //终点
            ctx.lineTo(i*15,450);
  
            //起点
            ctx.moveTo(0,i*15);//移动到指定点
            //终点
            ctx.lineTo(450,i*15);//从当前的点到指定点画直线
  
            ctx.closePath();//结束路径
            //绘制线
            ctx.stroke();//对当前路径进行描边
        }
        //绘制蛇(循环遍历蛇当前自身的长度数值,然后取出坐标数组snake存储的每个格子的坐标值进行绘制)
        for(var i=0;i<snakeCount;i++){
            //设置矩形的填充颜色
            ctx.fillStyle = "#000";
            if(i==snakeCount-1)ctx.fillStyle = "red";			
            //绘制矩形 x,y,width,height
            ctx.fillRect(snake[i].x,snake[i].y,15,15);
        }
  
       //绘制食物(这个比较简单就一个格子 直接填充喜欢的颜色就行了)
        
        ctx.fillStyle="#66ff99";
        //绘制矩形 x,y,width,height
        ctx.fillRect(foodX,foodY,15,15);//填充一个矩形
        ctx.fill();
  
    }

2.蛇移动的方法move

function move(){
        //传入当前移动的方向值toGo 从全局变量获取
        //每次往数组里面压进去对应的坐标值(此时此刻脑子里必须有一个坐标系 哈哈 )
		switch(toGO){
			//向左(每移动一个格子x坐标需要-一个格子的长度15,y坐标不变)
			case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y});
			break;
			//向上(每移动一个格子x坐标不变,y坐标-一个格子的长度15)
			case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15});
			break;
			//向右(每移动一个格子x坐标需要+一个格子的长度15,y坐标不变)
			case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
			break;
			//向下(最后一个留给你自己思考了)
			case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15});
			break;
		}

		//删除第一个元素(往前移动一个格子之后,尾巴的格子需要删除掉(这样才能保证蛇的长度不变))
		snake.shift();
		
		
		//重新绘制(既然上面都已经计算好坐标了,剩下的事就是我们需要将上面的数据绘制出来,不然就是天方夜谭 ,绘制之前别忘了清除之前的画布,千万不要留下任何作案痕迹)
		ctx.clearRect(0,0,450,450);
		
		//每次移动之后必须检测当前位置是否合法(不合法就不让你继续游戏了)
		isDead();
		//我每次移动之后必须检测当前位置有木有星星给我吃(因为我饿了)
		isEat();
		(好了,完事具备 ,啥也别说了,最后一步开始画了,调用前面声明的方法drawRect)
		drawRect();
	}

3.随机出现食物的方法

  function addFood(){
  		//随机坐标 向下取整
  		foodX = Math.floor(Math.random()*30)*15;
  		foodY = Math.floor(Math.random()*30)*15;
  		
  		//这里有一个坑(食物不能增加到蛇的身上,所以要判断一下,如果随机生成坐标是蛇当前自身占据的位置,必须要重新生成,不然还怎么玩...)
  		for(var i=0;i<snakeCount-1;i++){
  			if(foodX == snake[i].x && foodY == snake[i].y){
  				addFood();
  			}
  		}
  	}

4.检测当前位置是否有食物的方法:

  function isEat(){
    //如果蛇头部的坐标等于食物位置的坐标,那就不好意思,表示吃掉
  		if(snake[snakeCount-1].x==foodX&&snake[snakeCount-1].y==foodY){
  			//重新生成食物
  			addFood();
  			//蛇长度加1
  			snakeCount++;
  			//往数组添加一个元素
  			snake.unshift({x:-15,y:-15});
  		}
  	}

5.既然是游戏就必须有游戏规则(违反了就中断游戏)

  //定义游戏规则
	function isDead(){
		//判断边界
		if(snake[snakeCount-1].x>435||snake[snakeCount-1].y>435
		||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){
			alert("wendy想不开自杀了!");
			window.location.reload();
		}
		//判断自身 遍历蛇身上所有坐标 判断是否与蛇头重叠	
		for(var i=0;i<snakeCount-1;i++){
			if(snake[snakeCount-1].x==snake[i].x&&snake[snakeCount-1].y==snake[i].y){
				alert("wendy咬啥不好,咬自己屁股!");
				window.location.reload();
			}
		}
	}

6.好了 最后一步了 游戏启动的方法

function btnstart(){
         //设置蛇移动速度
       (哎 有点懒,就让它自己动吧,当然也可以用手动按键实现)
        setInterval(move,150);
        //监听键盘事件
        document.onkeydown = function(e){
            //浏览器的兼容性
            var e = e||window.event;		
            keyDown(e);(为了代码风格好看点 我就把这个方法定义到下面)
        }
 }
 function keyDown(e){
 		//keyCode键码  
 		switch(e.keyCode){
 			case 37: toGO=1;(按键后,保存方向值到全局变量)
 			break;
 			case 38: toGO=2;
 			break;
 			case 39: toGO=3;
 			break;
 			case 40: toGO=4;
 			break;
 		}
 }   
 

7.这里才是真的最后一步了,因为要放到浏览器执行所以页面加载时调用

//当前页面加载完成执行这个方法,要进如这个画布
	window.onload = function(){
		start();//这个start是蛇和食物最初始出现的位置
		btnstart();
	} 

© 著作权归作者所有

共有 人打赏支持
smile_微笑
粉丝 2
博文 55
码字总数 69100
作品 0
深圳
程序员
100行JS实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交...

xhload3d
2014/03/06
0
7
React Native iOS混合开发实战教程

在做RN开发的时候通常离不了JS 和Native之间的通信,比如:初始化RN时Native向JS传递数据,JS调用Native的相册选择图片,JS调用Native的模块进行一些复杂的计算,Native将一些数据(GPS信息,...

JiaPengHui
09/15
0
0
iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗
05/11
0
0
CC框架实践(3): 让jsBridge更优雅

前言 CC框架下如何让我们的jsBridge更加优雅? jsBridge是作为js和java之间通信的桥梁,本身它的职责只是完成通信。 本文不是介绍js与java通信过程的实现,你可以使用第三方库(如:JsBridg...

lucky_billy
06/20
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5

没有更多内容

加载失败,请刷新页面

加载更多

MySQL数据库集群-PXC方案

网盘下载地址 MySQL数据库集群-PXC方案 PXC是开源的MySQL集群技术,如中国移动、阿里巴巴、腾讯、去哪网等企业均采用或者借鉴了PXC解决方案,可见该方案具有极佳的稳定性。本课程将在Linux环...

qq__2304636824
15分钟前
1
0
vue脚手架搭建项目

npm install -g vue-clivue init webpack my-projectcd my-projectnpm run dev

帝子兮
18分钟前
2
0
es6 字符串拓展方法

es6 include();返回Boolean,该字符串是否包含该字符 startWith() 返回Boolean,该字符串开头是否是该字符 endWith() 返回Boolean,该字符串结尾是否是该字符 repeat() 重复该字符串多少次,...

莫西摩西
18分钟前
1
0
Java语言实现word转PDF(10分钟解决)

前言: 经常做OA办公项目的同学一定和我一样被各种线上的office操作整疯了。基本上涉及到Java操作office的时候就会想到POI和openoffice.这两种方案都是需要找各种jar包,然后用里面繁杂的api。...

山里的红杏
20分钟前
1
0
Flask部分源码阅读

Flask主要依赖于Werkzeug和Jinja这两个库,是很简洁的Python Web框架。 Werkzeug 是一个WSGI的工具包,是Flask的核心库。 Jinja 则是一个模板渲染的库,主要负责渲染返回给客户端的html文件。...

Jian_Ming
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部