第一篇博客 内容:贪吃蛇游戏

<!DOCTYPE HTML> 
<html> 
	<meta charset="utf-8">
<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas> 
<script type="text/javascript"> 
	var c=document.getElementById("myCanvas"); 
	var time = 160 ; //蛇的速度 
	var cxt=c.getContext("2d"); 
	var x = y = 8; 
	var a = 0; //食物坐标 
	var b = 0;//另一个食物坐标
	var t = 20; //蛇身长 
	var map = []; //记录蛇运行路径 
	var size = 8; //蛇身单元大小 
	var direction = 2; // 1 向上 2 向右 0 左 3下 
	setTimeout("set_game_speed()", time); // 移动蛇 
	function set_game_speed(){ // 移动蛇 
		switch(direction){ //规定方向
			case 1:y = y-size;break; 
			case 2:x = x+size;break; 
			case 0:x = x-size;break; 
			case 3:y = y+size;break; 
		} 
		if(x>400){ 
			x=0;
		} 
		if(y>400){
			y=0;
		}
		if(x<0){
			x=400;
		}
		if(y<0){
			y=400;
		}//碰到墙壁时从另一侧出来
		for(var i=0;i<map.length;i++){ 
			if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){ 
				alert("你挂了,继续努力吧!失败原因:撞到自己了.....\n最终得分:"+(t-20)+"分");
				window.location.reload();
				clearTimeout(interval);
			} 
		} 
		if (map.length>t) { //保持舍身长度 
			var cl = map.shift(); //删除数组第一项,并且返回原元素 
			cxt.clearRect(cl['x'], cl['y'], size, size); 
		}; 
		map.push({'x':x,'y':y}); //将数据添加到原数组尾部 
		cxt.fillStyle = "#006699";//内部填充颜色 
		cxt.strokeStyle = "#006699";//边框颜色 
		cxt.fillRect(x, y, size, size);//绘制矩形 
		if((a*8)==x && (b*8)==y){ //吃食物 
			rand_frog();//放置食物
			t++;
			if(time>=80){
				time=time-5;	
			}
		} 
		
		interval =setTimeout("set_game_speed()", time);;
	} 
	
	document.onkeydown = function(e) { //改变蛇方向 
		var code = e.keyCode - 37; 
		var gg= direction
		switch(code){ 
			case 1 : direction = 1;
			break;//上
			case 2 : direction = 2;
			break;//右
			case 3 : direction = 3;
			break;//下
			case 0 : direction = 0;
			break;//左
		} 
		if((gg==1&&direction==3)||(gg==3&&direction==1)||(gg==2&&direction==0)||(gg==0&&direction==2)){
			direction=gg;
		}
	} 
	
	// 随机放置食物 
	function rand_frog(){ 
		a = parseInt(Math.random()*49); 
		b = parseInt(Math.random()*49); 
		var wz=0;
		cxt.fillStyle = "#000000";//内部填充颜色 
		cxt.strokeStyle = "#000000";//边框颜色 
		for(var i=0;i<map.length;i++){ 
			if( parseInt(map[i].x)==a*8 && parseInt(map[i].y)==b*8){ 
				wz=1;
				rand_frog;
			} 
		} 
		if(wz==0){
			cxt.fillRect(a*8, b*8, 8, 8);//绘制矩形 
		}
	} 
	// 随机放置食物 
	rand_frog(); 
</script> 
</body> 
</html> 

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值