<!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写的贪吃蛇的更多相关文章

  1. 原生js写的贪吃蛇网页版游戏特效

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

  2. 用js写一个贪吃蛇小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  4. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 61.H5---利用canvas+原生js进行鼠标跟随绘图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  7. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  8. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  9. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

随机推荐

  1. io流和序列化

    1.使用File操作文件 public class IoTest { public static void main(String[] args) throws IOException { /* 01 ...

  2. cmd识别不了mysql命令

    问题现象:安装配置过MySQL和环境变量,当时用的好好的,过了几天再试发现cmd识别不了了: 之前maven的mvn命令也遇到过这个问题. 原因:win10中配成这个样子,重启之后会时效: 解决方法: ...

  3. RabbitMQ in Depth札记——AMQ协议

    RPC传输 作为AMQP的实现,RabbitMQ使用RPC(remote procedure call)模式进行远程会话.而不同于一般的RPC会话--客户端发出指令,服务端响应,但服务端不会向客户端发 ...

  4. SQL Server2012远程访问设置

    http://jingyan.baidu.com/article/a681b0de3bdb7b3b19434667.html?qq-pf-to=pcqq.group 1.打开SQL server201 ...

  5. 从一个点的长度是多少说起（Talking started from the length of a point on the real number line）

    From the perspective of analytical geometry, an interval is composed of infinitely many points, whil ...

  6. LeetCode 693 Binary Number with Alternating Bits 解题报告

    题目要求 Given a positive integer, check whether it has alternating bits: namely, if two adjacent bits w ...

  7. 《linux 文件目录》- touch/rm/mv/cat/head/tail/cp/mkdir/chmod/chown/find/locate/which/whereis

    一:基本 / 根目录下目录结构定义 /bin 常见的用户指令 ls/echo ...... 等 /boot 内核和启动文件 /dev 设备文件 /etc 系统和服务配置文件 /home 用户家目录 / ...

  8. Shiro 自定义角色 认证

    转载,原博文的地址在:https://ailongni.iteye.com/blog/2086022 由于Shiro filterChainDefinitions中 roles默认是and,/** = ...

  9. iOS APP 在前台时弹出本地通知

    iOS10 之后使用才有效果 1.在 AppDelegate.m 文件里面添加下面的方法. - (void)userNotificationCenter:(UNUserNotificationCent ...

  10. python 合并列表 从大到小排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- a = [1,2,3,4,5] b = [6,7,8,9,10] a.extend(b) a.reverse ...