网页版贪吃蛇(HTML 5)

最新推荐文章于 2024-04-28 17:47:23 发布
最新推荐文章于 2024-04-28 17:47:23 发布
阅读量3.1k 收藏 4
点赞数
原文链接：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

weixin_30876945
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
❤️创意网页：贪吃蛇游戏 - 创造一个经典的小游戏
VLOKL的博客
07-30 769
❤️创意网页：贪吃蛇游戏 - 创造一个经典的小游戏
使用原生JS实现简单版的网页小游戏-贪吃蛇
Web-BUG记录坎坷路
07-06 4109
今天给大家分享一个游戏，用我们所熟悉的JS实现一个贪吃蛇小游戏，自娱自乐一下 首先先整理一下思路： 点击开始游戏 startpage消失 游戏开始 随机出现食物，出现三节蛇开始运动 上下左右 改变方向运动 判断吃到食物 食物消失，蛇加一 判读游戏结束，弹出框 如下图中的一些效果： 接下我们用我们所熟悉的JS实现贪吃蛇小游戏 首先我们基本HTML页面： <!DOCT...
HTML+CSS+JS实现 贪吃蛇游戏源码_贪吃蛇源码html
2301_79099287的博客
04-28 140
【代码】HTML+CSS+JS实现 贪吃蛇游戏源码_贪吃蛇源码html。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
H5网页版贪吃蛇源代码
热门推荐
hnliu's blog
06-15 1万+
H5网页版贪吃蛇源代码，新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。重命名文件及后缀名为index.html。将文章最下面的两个图片保存下来，蓝色背景大图重命名为back.jpg，骷髅头的命名为pirate.png。在index.html同级目录下新建一个文件夹叫做image，然后将两张背景图放入image文件夹。现在index.html就可以正常运行了，双击就可以运行。
HTML5贪吃蛇中文版
12-01
HTML5贪吃蛇中文版是一款使用HTML5技术，特别是Canvas元素构建的网页版经典游戏——贪吃蛇。这个项目不仅提供了游戏的实现，还包含了详尽的中文注释，非常适合初学者学习和开发者参考。 首先，我们要理解HTML5是超...
JavaScript 网页版贪吃蛇游戏代码
10-23
JavaScript版贪吃蛇游戏，网页小游戏代码分享，这类小游戏可以很好的用JS来实现，游戏速度由快、中、慢可选，按“空格键” 开始/暂停，方向键控制蛇身运动方向，若要想研究代码原理，可关注代码中的注释，写的非常好...
jQuery贪吃蛇网页版游戏代码
07-29
jQuery简单网页贪吃蛇大战小游戏代码，带分类统计，吃的越多，分数越多，贪吃蛇越长。实现代码来讲解贪吃蛇游戏的实现。因为贪吃蛇游戏的难点主要是JS 部分。利用jQuery实现网页版贪吃蛇游戏代码以及利用jQuery实现...
html和js实现的网页版本贪吃蛇项目
04-04
《HTML与JavaScript实现的网页版贪吃蛇项目详解》 贪吃蛇，这款经典的游戏，以其简单的规则和无尽的挑战性，深受广大玩家的喜爱。如今，借助HTML和JavaScript技术，我们可以将它移植到网页上，让玩家在浏览器中就能...
网页版贪吃蛇.zip
最新发布
05-28
6. 画布绘图：HTML5的Canvas元素提供了一个可以在网页上进行图形绘制的接口。在网页版贪吃蛇中，可能使用canvas进行游戏画面的渲染，包括绘制蛇、食物以及其他游戏元素，实现游戏的图形化显示。 7. 循环与定时器：...
网页版贪吃蛇
05-31
12种模式。经典蛇(简单),经典蛇(一般),经典蛇(困难),自由蛇(简单),自由蛇(一般),自由蛇(困难),五步蛇(困难),五步蛇(噩梦),五步蛇(无解),迷藏蛇(一般),迷藏蛇(困难),迷藏蛇(简单),
用html做贪吃蛇
02-06
贪吃蛇html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击index.html即可开始贪吃蛇，加油！！！
网页贪吃蛇
11-19
javascript+html编写的贪吃蛇，思想的面向对象的思想，把蛇看成一个对象
JS网页版贪吃蛇小游戏.zip
07-11
JS网页版贪吃蛇小游戏
html网页版贪吃蛇，页面绝对精美，带加速，带穿墙
01-03
此款贪吃蛇是我们网页设计课程的期中作业，页面保证精美，带三种不同的模式，不穿墙不加速的普通模式，穿墙稍加速的模式和不穿墙极速模式。
基于HTML5的贪吃蛇游戏的设计与实现
YQEMMMM的博客
10-26 5845
基于HTML5的贪吃蛇游戏的设计与实现 功能要求： 贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。 实现效果： 一、界面布局设计 1. 整体界面设计 1）使用<div>划分区域 2）CSS外部样式表snake.css 2.
javascript俄罗斯方块 面向对象编程（jQuery）（附带百度网盘链接）
weixin_45851686的博客
09-11 1260
这个俄罗斯方块游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），方块类（block.js）,地图类（Map.js）,方块形状对象类（blockjson.js） ，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行) 目录 1.html&css页面搭建： 2.游戏类 Game.js: 3.方块类 block.js： 4.地图类：map.js 5.方块形状对象类blockjson.js: 6.百度网盘链接： 游戏页面 ind...
分享一篇网页贪吃蛇代码
iamfeima的博客
10-31 1065
贪吃蛇         * {         margin: 0;         padding: 0;         font-family: "Microsoft YaHei";     }         #page {         margin-right: auto;         margin-left: au
制作一个网页版贪吃蛇游戏html
05-30
好的，以下是一个简单的贪吃蛇游戏的 HTML 代码，你可以在浏览器中打开并运行它： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="400" height="400"></canvas> <script> let canvas = document.getElementById('gameCanvas'); let ctx = canvas.getContext('2d'); let snake = [{x: 10, y: 10}]; let food = {x: 5, y: 5}; let direction = 'right'; function update() { // 更新贪吃蛇的位置 let head = {x: snake[0].x, y: snake[0].y}; switch (direction) { case 'left': head.x--; break; case 'right': head.x++; break; case 'up': head.y--; break; case 'down': head.y++; break; } snake.unshift(head); // 检测是否吃到食物 if (head.x === food.x && head.y === food.y) { food.x = Math.floor(Math.random() * 20); food.y = Math.floor(Math.random() * 20); } else { snake.pop(); } // 检测游戏是否结束 if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) { gameOver(); } for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver(); } } } function draw() { // 绘制背景 ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制贪吃蛇 ctx.fillStyle = 'green'; for (let i = 0; i < snake.length; i++) { ctx.fillRect(snake[i].x * 20, snake[i].y * 20, 20, 20); } // 绘制食物 ctx.fillStyle = 'red'; ctx.fillRect(food.x * 20, food.y * 20, 20, 20); } function gameOver() { clearInterval(gameLoop); alert('游戏结束！'); } function gameLoop() { update(); draw(); } document.addEventListener('keydown', event => { switch (event.keyCode) { case 37: // left arrow if (direction !== 'right') { direction = 'left'; } break; case 38: // up arrow if (direction !== 'down') { direction = 'up'; } break; case 39: // right arrow if (direction !== 'left') { direction = 'right'; } break; case 40: // down arrow if (direction !== 'up') { direction = 'down'; } break; } }); let gameLoop = setInterval(() => { gameLoop(); }, 100); </script> </body> </html> ``` 这个代码创建了一个 400x400 的画布，用于绘制贪吃蛇游戏。它定义了一个 `canvas` 元素、一个 `gameLoop` 函数和一些变量，以及一些用于更新和绘制游戏状态的函数。它还通过 `setInterval` 函数每 100 毫秒调用一次 `gameLoop` 函数来运行游戏。 你可以将这个代码复制到一个文本编辑器中，并将文件保存为 `.html` 格式，然后在浏览器中打开它，就可以玩贪吃蛇游戏了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值