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

最新推荐文章于 2024-07-17 18:00:00 发布

七星王子

最新推荐文章于 2024-07-17 18:00:00 发布

阅读量113

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44455771/article/details/103319520

版权

<!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
评论
第一篇博客内容：贪吃蛇游戏

贪吃蛇代码是同学在网上复制下来的运用所学知识进行了改进，以及修复一些bug解决bug有：死亡时提示窗口反复弹出食物有时会出现在蛇身上食物只会出现在左上到右下的对角线上蛇移动时按反方向键会咬住自己新增功能：分数显示蛇吃到食物时会加移动速度源代码如下<!DOCTYPE HTML> <html> <meta charset="utf-8...
复制链接

扫一扫