angularJs 版贪吃蛇

最新推荐文章于 2023-03-08 10:03:32 发布

knife1220

最新推荐文章于 2023-03-08 10:03:32 发布

阅读量241

点赞数

分类专栏： angularJs

本文链接：https://blog.csdn.net/caideb/article/details/84569962

版权

angularJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
	.greentd{
		width:100%;
		height:100%;
		background-color:green;
	}

	.redtd{
		width:100%;
		height:100%;
		background-color:red;
	}

	.yellowtd{
		width:100%;
		height:100%;
		background-color:yellow;
	}

	td{
		width:50px;
		height:50px;
	}
</style>
</head>
<body>

<table ng-app="testapp" ng-controller="ctrl">
  <tr ng-repeat="tr in map">
	<td ng-repeat="td in tr track by $index">
		<div ng-if="td==0" class='greentd'>
		</div>
		<div ng-if="td==1" class='yellowtd'>
		</div>
		<div ng-if="td==2" class='redtd'>
		</div>
	</td>
  </tr>
  <tr><td cols=10>得分:{{score}}</td></tr>
</table>

<script>
	var R;
	var app = angular.module('testapp', []);
	app.controller('ctrl',function($scope,$rootScope,$interval){

		R=$rootScope;
		$rootScope.score=0;
		$rootScope.stop=0;
		$rootScope.map = [
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0],
							[0,0,0,0,0,0,0,0,0,0]
						];
		$rootScope.snake=[[0,4],[0,5],[1,5]];
		$rootScope.food=[5,5];
		$rootScope.dir=4;//1--left  2--right   3--up  4--down

		$rootScope.nextType=function(){
			var lastbody=$rootScope.snake[$rootScope.snake.length-1];
			var x=lastbody[0];
			var y=lastbody[1];
			if($rootScope.dir==1){
				if(y-1>=0)
					y--;
				else
					return -1;
			}else if($rootScope.dir==2){
				if(y+1<=9){
					y++;
				}else
					return -1;
			}else if($rootScope.dir==3){
				if(x-1>=0){
					x--;
				}else{
					return -1;
				}
			}else if($rootScope.dir==4){
				if(x+1<=9){
					x++;
				}else{
					return -1;
				}
			}
			return $rootScope.map[x][y];
		}

		//随机食物
		$rootScope.createFood=function(){
			$rootScope.food=[Math.floor(Math.random()*9),Math.floor(Math.random()*9)];
		}
		
		//换方向
		$rootScope.changeDir=function(newdir){
			console.log(newdir);
			$rootScope.dir=newdir;
		}
		
		//蛇移动
		$rootScope.move=function(){
			var type=$rootScope.nextType();
			if(type==0){
				//空地
			for(var i=0;i<$rootScope.snake.length;i++){
				if(i<$rootScope.snake.length-1){
					var sbody=$rootScope.snake[i+1];
					$rootScope.snake[i]=[sbody[0],sbody[1]];
				}else{
					if($rootScope.dir==1){
						$rootScope.snake[i][1]--;
					}else if($rootScope.dir==2){
						$rootScope.snake[i][1]++;
					}else if($rootScope.dir==3){
						$rootScope.snake[i][0]--;
					}else if($rootScope.dir==4){
						$rootScope.snake[i][0]++;
					}
				}
			}
			}else if(type==1){
				//吃自己
				$rootScope.stop=1;
				alert("die ...");
			}else if(type==2){
				//吃食物
				$rootScope.snake.push([$rootScope.food[0],$rootScope.food[1]]);
				//$rootScope.food=[0,0];
				$rootScope.createFood();
				$rootScope.score++;
			}else if(type==-1){
				//出界
				$rootScope.stop=1;
				alert("die ...");
			}
		}
		

		//刷新地图
		$rootScope.refresh=function(){

			for(var i=0;i<$rootScope.map.length;i++){
				for(var j=0;j<$rootScope.map[i].length;j++){
					$rootScope.map[i][j]=0;
				}
			}

			for(var k=0;k<$rootScope.snake.length;k++){
				var sbody=$rootScope.snake[k];
				//console.log(sbody);
				$rootScope.map[sbody[0]][sbody[1]]=1;		
			}

			$rootScope.map[$rootScope.food[0]][$rootScope.food[1]]=2;
		}

		$rootScope.refresh();
		
		
		$interval(function(){
			if($rootScope.stop==0){
				$rootScope.move();
				$rootScope.refresh();
			}
		},500)
		
	});

	
</script>

<script>

	document.onkeydown=function(event){
              var e = event || window.event || arguments.callee.caller.arguments[0];
			  console.log(e.keyCode);
              if(e && e.keyCode==37){ //l
                  R.changeDir(1);
              }
              if(e && e.keyCode==38){ //u
				   R.changeDir(3);
              }            
             if(e && e.keyCode==39){ //r
				  R.changeDir(2);
             }
			 if(e && e.keyCode==40){ //d
				  R.changeDir(4);
             }
         }; 

</script>

</body>
</html>

2.效果

knife1220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs 版贪吃蛇

1.代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;&lt;s
复制链接

扫一扫