网页版贪吃蛇(HTML 5)

2019/7/24 4:34:40 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/crystalplus/archive/2011/11/26/2264178.html

 (文字描述太繁琐了, 贪吃蛇算法很经典不多说, 那个伪播放器,不值一提。)

源码: 网页版贪吃蛇 【http://files.cnblogs.com/crystalplus/%E4%B8%A4%E4%B8%AA%E7%BD%91%E9%A1%B5%E6%A0%B7%E4%BE%8B(%E6%97%A0%E9%9F%B3%E4%B9%90%E7%89%88).7z】

显示截图:

//file : mian.css	
body
			{
			
				margin:0px;
				margin-top:20px;
				padding: 0px;
				background-color: gray; 
	
	
			}
			#base
			{
				width:1240px;
				margin-top:20px;
				padding-top: 20px;
				margin: 5px auto;
				padding: 20px;
				border:5px silver  groove;
				position:relative;
				
				box-shadow: 10px 10px 5px #888888;
				border-radius:20px;

				background-color:white;
	
			}
			
			
			#wow
			{
			
				width: 1000px;
				height:350px;
				float:left;
				position:relative;
				
				margin:15px;
				margin-left: 50px;
				padding:15px;
								
			}
			#c{
				
				background:fuchsia url('./def.jpg') no-repeat;
				background-position: -50px;
				margin: 5px;
				float:left;
				border-radius:25px;

				
					
			}
			
			#cav_con
			{
				background-color:black;
				border:15px black  solid;
				
				box-shadow: 10px 10px 5px black;
				border-radius:30px;
			}
			#mycanvas
			{
				background:white  no-repeat url('../images/bg.jpg');
				margin-top: 6px;
				float:left;
				border-radius:25px;


				
			}
			#content{
				background: fuchsia url('../images/slider.jpg') no-repeat;
				float:left;
			   width:336px;
				height:340px;
				
				margin: 10px;
				margin-left: 50px;
				color:fuchsia;
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold;
				border-radius: 25px;
				box-shadow: 10px 10px 5px black;


						}
			 #content p
			 {
			 	color:white; 
			 	padding:5px;
			 	font: bold 20px Tahoma;
				color: skyBlue;	
				}
			 
			#musicplay{
	
					position:relative;
					float:right;
					text-align:left;
					//margin-top:10px;
					top:0px;
					right:250px;
					}
			#support
			{
				clear:left;
	
			}
			
			footer{
				width:1220px;
				margin: 0px auto;
				padding:10px;
				margin-top:20px;
				border-top: 2px  teal groove;
				font-size:small;
				border-radius:10px;
				background: #EAEAEA;
				color: black;
				font-weight:bold;
				}

			span:hover
				{
					margin:5px;
					color:Skyblue;
					//font-size: 16px;}

  

// file: index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Just test</title>
		<link type="text/css" href="css/main.css" rel="stylesheet">
			<script src="style/modernizr-1.6.min.js"></script>
		
		<script>
		
		window.addEventListener("load", eventWindowLoaded, false);
		function eventWindowLoaded()
		{

			canvasApp();
		
		}
		
		function canvasSupport()
		{
			return Modernizr.canvas;
		}
		
		function canvasApp()
		{
			if(!canvasSupport())
			{	
			
				return;
			}
			else
			{
			
				var thecanvas = document.getElementById("mycanvas");
				var context = thecanvas.getContext('2d');
			}
			const GAME_STARTED = 1;
			const DOT_SIZE = 10;
			var dots = 3;
			var apple;
			
			var left = false;
			var right = true;
			var up = false;
			var down = false;
			var inGame = true;
			
			var keyPressList = [];
			
			var dotArray ;//= new Array();
			var head = new Image();
			head.src = "./images/head.png";
			var dot = new Image();
			dot.src = "./images/dot.png";
			
			var app = new Image();
			app.src = "./images/apple.png";
			
			var apple = new Apple(80, 50);
			
			initDots();
			
			paint();
			
			
			
			//const FRAME_RATE = 20;
			//var intervalTime = 1000 / FRAME_RATE;
			setInterval(repaint, 180);

						
			document.οnkeydοwn=function(e){
		
			e=e?e:window.event;
			//ConsoleLog.log(e.keyCode + "down");
			keyPressList[e.keyCode]=true;
		}
	
			document.οnkeyup=function(e){
			//document.body.οnkeyup=function(e){
				e=e?e:window.event;
				//ConsoleLog.log(e.keyCode + "up");
				keyPressList[e.keyCode]=false;
		};
		
			
			
		 function checkKeys() {
		
		//check keys
		
				if (keyPressList[38]==true && !down){
					left = false;
					right = false;
					up = true;
					}
			
				if (keyPressList[40]==true && !up){
					left = false;
					right = false;
					down = true;
				  }

		
				if (keyPressList[37] == true && !right) {
					left = true;
					up = false;
					down = false;  
				
				}
		
				if (keyPressList[39] == true && !left) {
					right = true;
					up = false;
					down = false; 
				}
			}
			
			
			function Dot(x1, y1)
			{
				this.PointX = x1;
				this.PointY = y1;
				this.getX = getPointX;
				this.getY = getPointY;
				this.setX = setPointX;
				this.setY = setPointY;

			}
			
			function getPointX()
			{
					return this.PointX;
			}
			
			function getPointY()
			{
					return this.PointY;
			}
			
			function setPointX(e)
			{
					this.PointX += e;
			}
			
			function setPointY(e)
			{
					this.PointY += e;
			}



			
			
			function initDots()
			{
			 dotArray = new Array();
				for(var z = 0; z < dots; z++)
				{
					dotArray.push(new Dot((50 - z * 10), 50));
					
					
				}
				
				apple.localApple();
				
			}
			
			
			
			function Apple(x, y)
			{
			
					this.x = x;
					this.y = y;
					this.localApple = LocalApple;
					this.getx = function(){ return this.x};
					this.gety = function() {return this.y};
			
			}
			
			function checkApple()
			{
				if(dotArray[0].getX() == apple.getx() && dotArray[0].getY() == apple.gety())
				{
				  dots++;
				  dotArray.push(new Dot(0, 0));
				  apple.localApple();
				  
				}
			}
			
			function LocalApple()
			{
				var rx = Math.round(Math.random() * 49);
				this.x =  rx * DOT_SIZE;
				
				var ry = Math.round(Math.random() * 31);
				this.y = ry * DOT_SIZE;
			}
			
			function checkCollision()
			{
				for(var z = dots  ; z > 0; z--)
				{	
					if((z > 4) && (dotArray[0] == dotArray[z] ))
					{
						inGame = false;
					}	
				}
				
				var px = dotArray[0].getX();
				var py = dotArray[0].getY();

				if( py == thecanvas.height)
					{
					 	inGame = false;

					}
				if( py == 0)
				{
					inGame = false;
				}
				
				if( px  == thecanvas.width)
					{
					 	inGame = false;

					}
				if( px == 0)
				{
					inGame = false;
				}

				
			}
			
			function move()
			{
			
				for(var q = dots -1; q > 0; q--)
				{
					dotArray[q ].PointX = dotArray[q -1 ].getX();	
					dotArray[q ].PointY = dotArray[q -1].getY();	
					//dotArray[q] = dotArray[q ];
										
				}
				
				if(left)
				{
					dotArray[0].PointX -= DOT_SIZE;
				}
				
				if(right)
				{
					dotArray[0].PointX += DOT_SIZE;//
					//dotArray[0].setX(DOT_SIZE);
					
				}
				
				if(up)
				{
					dotArray[0].PointY -= DOT_SIZE;
				}
				
				if(down)
				{
					dotArray[0].PointY += DOT_SIZE;
				}


			}
			
			function restart()
			{
				if (keyPressList[32]==true){
	    
						inGame = true;
						left = false;
						right = true;
						up = false;
						down = false; 

						dots = 3;
						delete dotArray;
						initDots();
						
		
					}
			
			}
			
			function gameOver()
			{
				//context.clearRect(0, 0, thecanvas.width, thecanvas.height);

				context.fillStyle = 'aqua';
				context.font = '30px _sans';
				context.textBaseline = 'top';
				context.fillText ("Game Over!", 150, 130); 
				context.fillText ("Press Space  key to restart!", 80, 160); 

				
			}
			
			function paint()
			{			
				context.clearRect(0, 0, thecanvas.width, thecanvas.height);
					
				  if (inGame) {
            
				  context.drawImage(app, apple.x, apple.y);
			      context.save();	
					 
          			 for (var e = 0; e < dots; e++) {
						 if (e == 0)
						 {
						  context.drawImage(head, dotArray[e].PointX, dotArray[e].PointY);
						}
						else
					   {
                			context.drawImage(dot, dotArray[e].PointX, dotArray[e].PointY);
                		}
				}
				context.restore();
          		  
				} else {
           		 gameOver();
        			}
			}
			
				
			function repaint()
			{
			 	if(inGame)
			 	{
			 		
			 		checkApple();
			 		move();
           	 	checkCollision();
           	 	//apple.localApple();	
           	 	checkKeys();
				
				}
				else
				{
					restart();				
				}
						
				 paint();
				
			}
			
			function drawScreen()
			{
					context.clearRect(0, 0, thecanvas.width, thecanvas.height);
					context.drawImage(head, x, y);
					context.drawImage(dot, x, y - 10);
					if(x == 0 || x == thecanvas.width )
					{
							Xstep =  -Xstep;
					}
					if(y == 0 || y == thecanvas.height)
					{
							Ystep = -Ystep;
					
					}
					
					
					x -= Xstep;
					y -= Ystep;  
					
			}
			//setInterval(drawScreen, 200);
				
		}	
		</script>
	</head>

	<body>
		<div id="base">
		<header >
			<h3 style="color:Skyblue;">: - )The Html Games!!! Snake</h3>
			<aside id="musicplay">
			<audio id="uu" autoplay="autoplay" preload="metadata" autobuffer  οnended="MusicPlayer()"  controls=""  >
				<source src="./music/music.mp3"></source>
				<source src="./music/music.ogg"></source>
			</audio>
			</aside>
			<script>

			function supportedAudioFormat(audio) {
			var returnExtension = "";
		
			 if (audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") {
				 returnExtension = ".mp3";
				 
			 }
			else if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
				returnExtension = ".ogg";
					
			}
			return returnExtension;
	
			}
	    	var count_one = 1;
	    	var con = document.getElementById("uu");
	    	con.volume = 0.36;
			//	con.controls="controls";
			var Mnames = new Array();
		    Mnames.push("music");
			Mnames[1] = "sanyue";
		    //Mnames[2] = "Sunshine Girl";
			//	Mnames.push("old boy");
			var where = "./music/";
		
			var audioType = supportedAudioFormat(con);

  	    	function MusicPlayer()
	    	{
				if(con.ended)
				{
					con.src= where + Mnames[count_one] + audioType;
					con.play();
				
				}

				if(count_one != Mnames.length - 1)
				{
				  count_one++;
				}
				else
				{
				count_one = 0;
				}
					
	     	}

			</script>

		</header>
		<div id="wow">
			<div id ="cav_con" style="float:left;">
			<canvas id="mycanvas" width="500px" height="320px" >
			Your browser does not support Html 5
			</canvas>
			</div>
			<div id="content"   >
				
			 <p > This is a Demo and Expression</p>
			 <p> ToRight : Right Array Key </p>

            

			<p>Fire :  Space Key</p>

			<P>ToLeft : Left Array Key </p>
			</div>
			
				
			
		</div>

		<!--<p id="support" οnclick="support_html()">Click me :- D, check whether your browser supports Html 5</p>-->
		
		<div id="support">
			<footer><span class="copyright"> 2011 Made By Thomas.</span></footer>
		
		</div>
		
	</div>
	
</body>
</html>

  

转载于:https://www.cnblogs.com/crystalplus/archive/2011/11/26/2264178.html

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->