canvas原生js写的贪吃蛇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>矩形</title>

<style type="text/css">

	*{

		padding: 0;

		margin: 0;

	}

	.wrap{

		width: 500px;

		height: 500px;

		border: 1px solid #ccc;

		margin: 0 auto;

		position: relative;

	}

	canvas{

		position: absolute;

		top: 0;

		left: 0;

	}

	#gridC{

		z-index: 2;

	}

	#canvas{

		z-index: 1;

	}

</style>

</head>

<body>

	<div class="wrap">

		<canvas id="gridC" width="500" height="500"></canvas>

		<canvas id="canvas" width="500" height="500"></canvas>

	</div>

</body>

<script type="text/javascript">

    var theCanvas = document.getElementById('canvas');

    var ctx = theCanvas.getContext("2d");

	var run = false;

	var maxBound = {};

	var config = {

		gridX:20,

		gridY:20

	}

	var body = [

		{

			x:8,

			y:8

		},

		{

			x:8,

			y:9

		},

		{

			x:8,

			y:10

		}

	];

	var food = {

				x:0,

				y:0

			}

	var keyCodeMethod = {

		'38':function(){

			//上  : x不变,y减一

			move('y',-1);

		},

		'40':function(){

			//下: x不变，y加一

			move('y',1);

		},

		'37':function(){

			//左：y不变，x减一

			move('x',-1);

		},

		'39':function(){

			//右: y 不变，x加一

			move('x',1);

		}

	}

	drawnAll();

	window.onkeydown = function(e){

		var method = keyCodeMethod[e.keyCode];

		if(method){

			method();

		}

	}

	//移动

	function move(axis,speed){

		for(var i = body.length-1; i > 0; i--){

			body[i].x = body[i-1].x;

			body[i].y = body[i-1].y;

		}

		body[0][axis] = body[0][axis] + speed;

		//判断死亡

		if(!isValid(body[0])){

			gameOver();

		}

		//吃东西

		eat(body[0]);

		//数据修改完成，全部重新渲染

		drawnAll();

	}

	//判断死亡

	function isValid(option){

		option = option || {};

		var valid = true;

		if(option.x < 0){

			option.x = 0;

			valid = false;

		}

		if(option.x > maxBound.x){

			option.x = maxBound.x;

			valid = false;

		}

		if(option.y < 0){

			option.y = 0;

			valid = false;

		}

		if(option.y > maxBound.y){

			option.y = maxBound.y;

			valid = false;

		}

		return valid;

	}

	//吃东西

	function eat(option){

		option = option || {};

		if(food && option.x == food.x && option.y == food.y){

			//吃到食物

			body.push({

				x:option.x,

				y:option.y

			});

			//吃到食物就需要再创建一个食物

			food = null;

			createFood();

		}

	}

	//创建食物

	function createFood(){

		var pos = axisPoint();

		while(!validFood(pos)){

			pos = axisPoint();

		}

		food = pos;

	}

	//随机创建位置

	function axisPoint(){

		var x = Math.floor(Math.random()*maxBound.x);

		var y = Math.floor(Math.random()*maxBound.y);

		return {x:x,y:y};

	}

	//验证食物的位置是否可用,不能再身体上

	function validFood(option){

		option = option || {};

		var flag = true;

		for(var i = 0; i < body.length; i++){

			if(option.x == body[i].x && option.y == body[i].y){

				flag = false;

				break;

			}

		}

		return flag;

	}

	//将原始坐标转化为canvas坐标

	function pointTransform(option,color){

		option = option || {};

		var obj = {

			width:config.gridX,

			height:config.gridY,

			color:color||''

		};

		obj.x = option.x * config.gridX;

		obj.y = option.y * config.gridY;	

		return obj;

	}

	//收集可用的参数列表

	function createOptionArr(){

		var arr = [];

		//身体

		for(var i = 0; i < body.length; i++){

			arr.push(pointTransform(body[i],'green'));

		}

		//食物

		if(food){

			arr.push(pointTransform(food,'pink'));

		}

		//设置头部的颜色

		arr[0].color = 'red';

		return arr;

	}

	//游戏结束

	function gameOver(){

		alert('游戏结束');

		console.log('游戏结束');

	}

	//画所有

	function drawnAll(){

		ctx.clearRect(0,0,500,500);

		var arr = createOptionArr();

		for(var i = arr.length-1; i >= 0; i-- ){

			drawReat(arr[i]);

		}

	}

	//画矩形

	function drawReat(option){

		option  = option || {};

		var x = option.x;

		var y = option.y;

		var width = option.width;

		var height = option.height;

		var radius = option.radius||0;

		var color = option.color || 'green';

		var type = option.type || 'fill';

	    ctx.beginPath();

	    ctx.moveTo(x, y+radius);

	    ctx.lineTo(x, y+height-radius);

	    ctx.quadraticCurveTo(x, y+height, x+radius, y+height);

	    ctx.lineTo(x+width-radius, y+height);

	    ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);

	    ctx.lineTo(x+width, y+radius);

	    ctx.quadraticCurveTo(x+width, y, x+width-radius, y);

	    ctx.lineTo(x+radius, y);

	    ctx.quadraticCurveTo(x, y, x, y+radius);

	    ctx[type + 'Style'] = color;

	    ctx.closePath();

	    ctx[type]();

	} 

	//网格

	maxBound = drawGrip();

	function drawGrip(){

		var gridC = document.getElementById('gridC');

   		var gridCtx = gridC.getContext("2d");

		var width = gridC.width;

		var height = gridC.height;

		var gridX = config.gridX;

		var gridY = config.gridY;

		var maxBound = {

			x:0,

			y:0

		}

		//画横线

		for(var i = gridY; i < height; i=i+gridY){

			drawLine(gridCtx,0,i,width,i);

			maxBound.y++;

		}

		//画竖线

		for(var i = gridX; i < width; i = i + gridX){

			drawLine(gridCtx,i,0,i,height);

			maxBound.x++;

		}

		return maxBound;

	}

	function drawLine(ctx,startX,startY,endX,endY){

		ctx.lineWidth=1;

		ctx.beginPath();

		ctx.moveTo(startX,startY);

		ctx.lineTo(endX,endY);

		ctx.closePath();

		ctx.strokeStyle="#ddd";

		ctx.stroke();

	}

</script>

</html>

canvas原生js写的贪吃蛇的更多相关文章

原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
20行JS代码实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
原生 js 写分页
欢迎留言或者加本人QQ172360937咨询这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
用原生JS写移动动画案例及实际应用
js很强大相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
原生JS写的ajax函数
参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

随机推荐

Servlet3.0 multipart 文件上传技术
Servlet3.0 javaConfig配置传统的servlet都是在web.xml中配置,从Servlet 3.0开始提供了ServletContainerInitializer接口,允许使用代 ...
Tomcat8配置用户名密码
配置内容: 1.vim tomcat-user.xml 添加以下内容 <role rolename="manager-gui"/> <role rolenam ...
time时间模块
时间模块和时间有关系的我们就要用到时间模块.在使用模块之前,应该首先导入这个模块. #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time( ...
移动端H5混合开发，Touch触控，拖拽，长按, 滑屏实现方案
概述近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...
DB2的进程/线程解析（转）
今天看到一个名词,数据库实例用户和实例隔离用户,那么什么是实例隔离用户呢,于是搜索以下,就涉及到了进程. 援引DB2中国上面的回答: 要理解DB2的fenced user, 需要先理解db2的fe ...
初探Spring Cloud Config
Spring Cloud Config提供了分布式系统中配置功能的服务端与客户端支持.对于不同环境的应用程序它的服务端提供了一种中心化的配置管理方式.并且其不仅适用于Spring的应用程序,其它语言开 ...
[No0000EC]C# 字符串（String）
在 C# 中,可以使用字符数组来表示字符串,但是,更常见的做法是使用 string 关键字来声明一个字符串变量.string 关键字是 System.String 类的别名. 创建 String 对象 ...
CSS：盒模型和position定位
盒模型页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...
优化网站设计（九）：减少DNS查找的次数
前言网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
php之运算符
运算符优先级相同,运算符的结合方向决定了该如何运算, 一.运算符优先级组合方向运算符附加信息无 clone new clone和new 左 [ array 右 ** 算术运算符右 ++ -- ...

canvas原生js写的贪吃蛇

canvas原生js写的贪吃蛇的更多相关文章

随机推荐

热门专题