HTML5小试 双人贪吃蛇

最新推荐文章于 2022-03-23 14:18:12 发布
最新推荐文章于 2022-03-23 14:18:12 发布
阅读量733 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oirobot/article/details/74719227
版权 
<html>
	<head>
	</head>
	<body>
		<div style="float:left;">当前速度1：<button οnclick="jiancl()">-</button><span id="sudu">300ms</span><button οnclick="jiacl()">+</button></div>
		<div style="float:right;">当前速度2：<button οnclick="jiancl2()">-</button><span id="sudu2">300ms</span><button οnclick="jiacl2()">+</button></div>
		<canvas id="mcan" width="300px" height="200px" style="background-color:#CCFF99">您的浏览器版本过低</canvas>
	</body>
	<script type="text/javascript">
		var st1 = "红方 GAMEOVER!",st2 = "蓝方 GAMEOVER!";
		var obj = document.getElementById("mcan");
		var ctx = obj.getContext("2d");//canvas对象
		var width = 300,height = 200;
		var len = 10;//模块长宽
		var keyData = [{k:38,x:0,y:-len},{k:40,x:0,y:len},{k:37,x:-len,y:0},{k:39,x:len,y:0}];
		var keyData2 = [{k:87,x:0,y:-len},{k:83,x:0,y:len},{k:65,x:-len,y:0},{k:68,x:len,y:0}];
		//贪吃蛇
		var data = [[220,20]];//初始位置
		var data2 = [[20,20]];//初始位置
		var eatData;
		var sudu = 300,sudu2 = 300;
		getSj();//要吃的位置
		+function(){
			ctx.fillStyle = "red";
			ctx.fillRect(data[0][0],data[0][1],len,len);
			ctx.fillStyle = "blue";
			ctx.fillRect(data2[0][0],data2[0][1],len,len);
			//ctx.moveTo(0,0);
			//ctx.lineTo(50,20);
			//ctx.stroke();
		}();
		var si,i,si2,i2;
		document.onkeydown = function(e){
			var kcode = e.keyCode;
			if(kcode<97){
				if(kcode>36&&kcode<41){
					i = -1;
					if(kcode==38){i=0}
					else if(kcode==40){i=1}
					else if(kcode==37){i=2}
					else if(kcode==39){i=3}
					if(i!=-1){
						clearInterval(si);
						si = window.setInterval("testFunction()",sudu);
						animateDraw();	
					}
				}else{// 87 83 65 68
					i2 = -1;
					if(kcode==87){i2=0}
					else if(kcode==83){i2=1}
					else if(kcode==65){i2=2}
					else if(kcode==68){i2=3}
					if(i2!=-1){
						clearInterval(si2);
						si2 = window.setInterval("testFunction2()",sudu);
						animateDraw2();	
					}
				}
			}else{
				//188 190 97 98
				if(kcode==188){
					jiancl2();
				}else if(kcode==190){
					jiacl2();
				}else if(kcode==97){
					jiancl();
				}else if(kcode==98){
					jiacl();
				}
			}
		}
		function jiancl(){
			clearInterval(si);
			sudu = sudu-10;
			document.getElementById("sudu").innerHTML = sudu+"ms";
			si = window.setInterval("testFunction()",sudu);
			animateDraw();
		}
		function jiancl2(){
			clearInterval(si2);
			sudu2 = sudu2-10;
			document.getElementById("sudu2").innerHTML = sudu2+"ms";
			si2 = window.setInterval("testFunction2()",sudu2);
			animateDraw2();
		}
		function jiacl(){
			clearInterval(si);
			sudu = sudu+10;
			document.getElementById("sudu").innerHTML = sudu+"ms";
			si = window.setInterval("testFunction()",sudu);
		}
		function jiacl2(){
			clearInterval(si2);
			sudu2 = sudu2+10;
			document.getElementById("sudu2").innerHTML = sudu2+"ms";
			si2 = window.setInterval("testFunction2()",sudu2);
		}
		function testFunction(){
			animateDraw();
		}
		function testFunction2(){
			animateDraw2();
		}
		function animateDraw(){
			if(i!=-1){
				var x = data[0][0]+keyData[i].x;
				var y = data[0][1]+keyData[i].y;
				for(var m = 0;m<data2.length;m++){
					if(m!=0){
						if(x==data2[m][0]&&y==data2[m][1]){
							alert(st1);
							clearInterval(si);
							return;
						}
					}else{
						if(x==data2[0][0]&&y==data2[0][1]){
							if(data.length>data2.length){
								alert(st2);
								clearInterval(si);
								return;
							}else{
								alert(st1);
								clearInterval(si);
								return;
							}
						}
					}
				}
				if(x>=0&&x<width&&y>=0&&y<height){
					if(x==eatData[0]&&y==eatData[1]){
						getSj();
					}else{
						draw("#CCFF99",data.pop());
					}
					data.unshift([x,y]);
					draw("red",data[0]);
				}else{
					clearInterval(si);
					alert(st1+" GAME OVER!");
				}
			}
		}
		function animateDraw2(){
			if(i2!=-1){
				var x = data2[0][0]+keyData2[i2].x;
				var y = data2[0][1]+keyData2[i2].y;
				for(var m = 0;m<data.length;m++){
					if(m!=0){
						if(x==data[m][0]&&y==data[m][1]){
							alert(st2);
							return;
						}
					}else{
						if(x==data[0][0]&&y==data[0][1]){
							if(data2.length>data.length){
								alert(st1);
								clearInterval(si);
								return;
							}else{
								alert(st2);
								clearInterval(si);
								return;
							}
						}
					}
				}
				if(x>=0&&x<width&&y>=0&&y<height){
					if(x==eatData[0]&&y==eatData[1]){
						getSj();
					}else{
						draw("#CCFF99",data2.pop());
					}
					data2.unshift([x,y]);
					draw("blue",data2[0]);
				}else{
					clearInterval(si2);
					alert(st2);
				}
			}
		}
		function getSj(){
			var now=new Date();
			var x = now.getSeconds()%(width/len-1)*len;
			var y = now.getSeconds()%(height/len-1)*len;
			var b = false;
			for(var m = 0;m<data.length;m++){
				if(m.x==x&&m.y==y)b = true;
			}
			if(!b){
				eatData = [x,y];
				draw("#"+randomColor(),eatData);
			}	
		}
		function randomColor(){  
			var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);  
			if(rand.length == 6){  
				return rand;  
			}else{  
				return randomColor();  
			}
		}
		function draw(a,b){
			ctx.fillStyle = a;
			ctx.fillRect(b[0],b[1],len,len);
		}
	</script>
</html>

 


                

        

        

    




    

      

        

            

              
                
                  oirobot
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
c#双人贪吃蛇及代码

				
			

			

				

					07-27
				

			

		

		

			
				
c#开发的，支持双人同时进行，有障碍，内含源代码

			
		

	



                

              
                



	

		

			

				
					
双人版贪吃蛇+C源码

				
			

			

				

					01-09
				

			

		

		

			
				
使用贪吃蛇，VS 必须安装图形库才能运行程序 。
贪吃蛇比较简单，大多数人都会，留给初学者参考使用

			
		

	



                


  
              

                


	

		

			

				
					
双人贪吃蛇

				
			

			

				

					01-05
				

			

		

		

			
				
C语言的一个C语言的

			
		

	





	

		

			

				
					
【pygame】一个精简版的双人贪吃蛇

				
			

			

				

					ecnu_lmxgofgt的博客
				

				

					01-09
					
					1265
					
				

			

		

		

			
				
import pygame, sys, time, random
from pygame.locals import *

redColour = pygame.Color(255, 0, 0)
greenColour = pygame.Color(0, 255, 0)
blueColour = pygame.Color(0, 0, 255)
blackColour = pygame.Color(...

			
		

	



		

			
		



	

		

			

				
					
纯新手写的双人贪吃蛇，欢迎高手拍转

				
			

			

				

					bill600的专栏
				

				

					09-25
					
					834
					
				

			

		

		

			
				
<br />近期学习js，假期无事，参照网上的代码写了个双人玩的贪吃蛇。 <br />对网上的代码作了些改造,具体如下： <br />1，把m*n的二维数组变成m*n一维数组，映射关系为： <br />   A[r]------>a[i][j]; <br />   i = r%m; <br />   j = (r-r%m)/m; <br />   j<n; <br />2，对随机数的获取作了些改造， <br />3，蛇尾总是第一个加入的元素， <br /><br />代码编写仓促，也没写注释，望各位见谅<b

			
		

	





	

		

			

				
					
双人贪吃蛇源代码

				
			

			

				

					08-02
				

			

		

		

			
				
双人贪吃蛇 源代码中的点阵的头文件可以删除

			
		

	





	

		

			

				
					
双人贪吃蛇小游戏C++原创

				
			

			

				

					weixin_30846599的博客
				

				

					10-11
					
					665
					
				

			

		

		

			
				
大家好，我是小鸭酱，博客地址为：http://www.cnblogs.com/xiaoyajiang
/*贪吃蛇*/
#include<stdio.h>
#include<time.h>
#include<conio.h>
#include<stdlib.h>
#include<windows.h>

char qipa...

			
		

	





	

		

			

				
					
贪吃蛇大作战双人版完整代码

				
			

			

				

					wang__junhappy的博客
				

				

					12-13
					
					5569
					
				

			

		

		

			
				
贪吃蛇双人版。完整代码，详细问题不懂了问博主

			
		

	





	

		

			

				
					
贪吃蛇html游戏代码

					
热门推荐

				
			

			

				

					wjh091225的博客
				

				

					03-23
					
					1万+
					
				

			

		

		

			
				
贪吃蛇html游戏代码  拿来即用!
代码如下
<!DOCTYPE html>    html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map {  width: 400px; 
 height: 400px;...................
				

			
		

	





	

		

			

				
					
C语言双人贪吃蛇源代码

				
			

			

				

					12-27
				

			

		

		

			
				
该源代码为C语言双人/单人贪吃蛇 编译软件WIN-TC 操作系统WINDOWS XP SP3  有单人双人模式选择 开场动画 分数统计 随机障碍  速度变换
但是由于我的操作系统中delay（）的控制单位不是MS 所以在源代码中进行了一定的处理

			
		

	





	

		

			

				
					
c语言贪吃蛇游戏双人对战版源码

				
			

			

				

					06-03
				

			

		

		

			
				
贪吃蛇 。。。。。。。。。。。。。。。。。。。。。。。。

			
		

	





	

		

			

				
					
c语言写的双人贪吃蛇

				
			

			

				

					07-07
				

			

		

		

			
				
纯c语言写的双人贪吃蛇小游戏，没有用图形库

			
		

	





	

		

			

				
					
Pygame游戏源代码：网络版双人对战贪吃蛇

				
			

			

				

					09-21
				

			

		

		

			
				
Pygame游戏源代码：网络版双人对战贪吃蛇
包含代码、图片、声音等所有资源，可直接运行
游戏时先运行SnakeServer，启动服务器。在分别运行SnakeP1和SnakeP2启动两个客户端。服务器和两个客户端的IP可在源代码中直接修改。

			
		

	





	

		

			

				
					
贪吃蛇双人版(含源代码)

				
			

			

				

					07-29
				

			

		

		

			
				
贪吃蛇双人版(含源代码)
使用方法：左边控制键为wsad，分别代表 上下左右 方向
          左边控制键为几个箭头键，分别代表 上下左右 方向

			
		

	





	

		

			

				
					
HTML5贪吃蛇中文版

				
			

			

				

					12-01
				

			

		

		

			
				
HTML5贪吃蛇中文版基于HTML5 canvas制作，贪吃蛇网页版小游戏，代码附带详细中文注释，供大家参考。

			
		

	





	

		

			

				
					
HTML5 SVG创意贪吃蛇动画特效

				
			

			

				

					07-24
				

			

		

		

			
				
HTML5 SVG创意贪吃蛇动画特效是一款基于Canvas绘制的卡通可爱的贪吃蛇来回游走动画特效。

			
		

	





	

		

			

				
					
贪吃蛇html5小游戏

				
			

			

				

					09-07
				

			

		

		

			
				
基于html5实现的贪吃蛇小游戏，图片可以自己定义，按自己需求

			
		

	





	

		

			

				
					
html5简单的贪吃蛇小游戏代码

				
			

			

				

					11-03
				

			

		

		

			
				
html5简单的贪吃蛇小游戏代码 html5简单的贪吃蛇小游戏代码

			
		

	





	

		

			

				
					
html贪吃蛇 单双人

					
最新发布

				
			

			

				

					09-14
				

			

		

		

			
				
你想了解如何开发一个 HTML 的贪吃蛇游戏，支持单人和双人模式对吗？

对于这个问题，你可以使用 HTML、CSS 和 JavaScript 来创建一个基于网页的贪吃蛇游戏。下面是一个简单的示例：

首先，你需要创建一个 HTML 文件并添加必要的标记和样式。你可以使用以下代码作为起点：

```html
<!DOCTYPE html>
<html>
<head>
  <title>贪吃蛇游戏</title>
  <style>
    /* 添加样式 */
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

  <script>
    // 添加 JavaScript 代码
  </script>
</body>
</html>
```

在 CSS 部分，你可以自定义游戏界面的样式，例如背景颜色、贪吃蛇和食物的颜色等等。

在 JavaScript 部分，你需要编写游戏的逻辑代码。首先，你可以创建一个画布并获取它的上下文：

```js
var canvas = document.getElementById("gameCanvas");var ctx = canvas.getContext("2d");
```

接下来，你可以定义贪吃蛇的初始位置、长度和方向，并创建一个数组来保存贪吃蛇的身体坐标：

```js
var snakeX = 10;
var snakeY = 10;
var snakeLength = 5;
var snakeDirection = "right";

var snakeBody = [];
for (var i = snakeLength - 1; i >= 0; i--) {
  snakeBody.push({ x: i, y: 0 });
}
```

然后，你可以设置游戏的更新逻辑，例如每隔一段时间更新贪吃蛇的位置，并检测是否碰到边界或自身：

```js
function update() {
  // 更新贪吃蛇位置的代码
  
  // 检测碰撞的代码
  
  // 渲染游戏界面的代码
}

setInterval(update, 100); // 每隔100毫秒更新一次
```

在更新贪吃蛇位置的代码中，你需要根据贪吃蛇的方向移动它的头部，并在数组的开头添加新的头部坐标，同时删除数组末尾的尾部坐标：

```js
if (snakeDirection === "right") {
  snakeX++;
} else if (snakeDirection === "left") {
  snakeX--;
} else if (snakeDirection === "up") {
  snakeY--;
} else if (snakeDirection === "down") {
  snakeY++;
}

snakeBody.unshift({ x: snakeX, y: snakeY });
snakeBody.pop();
```

在检测碰撞的代码中，你需要检查贪吃蛇是否碰到了边界或自身。如果碰撞发生，你可以终止游戏或执行其他相应的操作。

最后，在渲染游戏界面的代码中，你可以使用 `ctx` 上下文对象绘制贪吃蛇和食物的图形：

```js
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制贪吃蛇
snakeBody.forEach(function (bodyPart) {
  ctx.fillRect(bodyPart.x * 10, bodyPart.y * 10, 10, 10);
});

// 绘制食物
ctx.fillRect(foodX * 10, foodY * 10, 10, 10);
```

这只是贪吃蛇游戏开发的一个简单示例，你可以根据自己的需求进行扩展和优化。希望对你有所帮助！

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值