当前位置：首页 > 学习笔记 > 正文内容

使用js技术制作的贪吃蛇小游戏_贪吃蛇html代码

廖万里3年前 (2022-09-09)学习笔记102467

效果图：

使用js技术制作的贪吃蛇小游戏_贪吃蛇html代码

 接下来分享完整的贪吃蛇代码

index.html代码

JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇__kkkliao制作，kkkliao官网，kkkliao，廖万里官网</title>
	<!-- 廖万里的博客：www.kkkliao.cn
	一封来信，一封云来信：nmx.kkkliao.cn -->
	<meta charset="UTF-8">
	<meta name="keywords" content="贪吃蛇">
	<meta name="Description" content="这是一个初学者用来学习的小游戏">
	<style type="text/css">
	*{margin:0;}
	.map{margin:100px auto;
		height:600px;
		width:900px;
		background:#00D0FF;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
	</style>
</head>
 
<body>
<div class="map">
<canvas id="canvas" height="600" width="900">
	
</canvas>
</div>
 
<script src="js/jj.js">
 
</script>
</body>
</html>
复制成功！

js代码：（jj.js）

JavaScript
 
	//获取绘制工具
	/*
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");//获取上下文
	ctx.moveTo(0,0);
	ctx.lineTo(450,450);*/
	var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    /*ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(450,450);
    ctx.stroke();
    */
 
    var snake =[];//定义一条蛇，画蛇的身体
    var snakeCount = 6;//初始化蛇的长度
	var foodx =0;
	var foody =0;
    var togo =0;
    function drawtable()//画地图的函数
    {
 
 
    	for(var i=0;i<60;i++)//画竖线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(15*i,0);
    		ctx.lineTo(15*i,600);
    		ctx.closePath();
    		ctx.stroke();
    	}
        for(var j=0;j<40;j++)//画横线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(0,15*j);
    		ctx.lineTo(900,15*j);
    		ctx.closePath();
    		ctx.stroke();
    	}
    	
    	for(var k=0;k<snakeCount;k++)//画蛇的身体
			{
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
				ctx.fillStyle="red";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
			
			}
			//绘制食物	
    		ctx.fillStyle ="black";
	     ctx.fillRect(foodx,foody,15,15);
	     ctx.fill();
    	
    }
 
    
    function start()//定义蛇的坐标
    {
    	//var snake =[];//定义一条蛇，画蛇的身体
        //var snakeCount = 6;//初始化蛇的长度
		
		for(var k=0;k<snakeCount;k++)
    		{
    			snake[k]={x:k*15,y:0};
    			
            }
			
		  drawtable();
          addfood();//在start中调用添加食物函数
 
    }
 
    function addfood()
	{
	foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	foody = Math.floor(Math.random()*40)*15;
		
		for (var k=0;k<snake;k++)
		{
			if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
			{	
			addfood();
			}
		}
	
	
	}	
    		
   function move()
   {
	switch (togo)
	{
	case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
	case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
	case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
	case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
	case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
	case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
	default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
	}
    snake.shift();//删除数组第一个元素
   	ctx.clearRect(0,0,900,600);//清除画布重新绘制
   	isEat();
	isDead();
	drawtable();
   } 			
   
   function keydown(e)
   {
   switch(e.keyCode)
		{
         case 37: togo=1; break;
		 case 38: togo=2; break;
		 case 39: togo=3; break;
		 case 40: togo=4; break;
		 case 65: togo=5; break;
		 case 68: togo=6; break;
		}
   }
   
   function isEat()//吃到食物后长度加1
   {
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
   {
		addfood();
		snakeCount++;
		snake.unshift({x:-15,y:-15});
   }
   
   }
   
   function isDead()
   {
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
		alert("You are dead,GAME OVER!!!");
		window.location.reload();
		}
   }
   
    document.onkeydown=function(e)
{
	keydown(e);
 
} 
window.onload = function()//调用函数
{ 
	start();
	setInterval(move,150);
	drawtable();
	
	
 
}
复制成功！


本文链接：https://www.kkkliao.cn/?id=15 转载需授权！

阅读剩余的75%

版权声明：本文由廖万里的博客发布，如需转载请注明出处。


返回列表

上一篇：使用Javascript(js)技术实现动态时钟效果

下一篇：js实现单击移动和暂停小球并显示小球的左边界距离距离上边距距离元素可见宽度元素可见高度元素的偏移容器

“使用js技术制作的贪吃蛇小游戏_贪吃蛇html代码” 的相关文章

如何在Linux中使用宝塔面板部署javaWeb项目

如何在Linux中使用宝塔面板部署javaWeb项目

最近在centos7.2上使用宝塔面板部署javaweb项目，在网上找的资料很少不全，我特意来总结一下。。。1、使用putty 进入Linux就不多说了2、进入宝塔官网https://www.bt.cn/3、选择在线安装 即可4、推荐使用Linux系统安装，Windows没有Linux系统...

PHP环境搭建（推荐宝塔面板）

PHP环境搭建（推荐宝塔面板）

初学者推荐安装集成环境，不建议分别安装，集成环境包含php、mysql、apache、其他php、mysql、apache分别安装的需要相互之间配置，对初学者不友好，一般开发也不需要，特殊生产环境才需要；Windows：宝塔面板（推荐）、phpstudy（https://www.xp.cn/）Mac...

python如何连接mysql数据库

python链接mysql数据库要用到pymysql模块中的connect ，connect函数是pymysql模块中 用于连接MySQL数据库的一个函数。 所以连接mysql之前需要先导入pymysql模块 location.href="ht...

使用Python制作电脑无限弹窗恶搞程序教程

使用Python制作电脑无限弹窗恶搞程序教程

 效果如下：编辑演示视频：python弹窗恶搞程序演示视频 教程：1，导入模块，下载模块的方法不过多说明了，可以看我其他的文章有说怎么下载第三方模块，或者Alt+Enter下载也可。# 弹窗恶搞import tkinter as tkimp...

如何在程序中实现多进程，多进程概述

如何在程序中实现多进程，多进程概述

 多进程：在一个程序中实现多任务处理，可以使用多线程和多进程两种方式。多进程创建：使用Process、类，每次实例化这个类的时候，就创建一个进程对象。编辑 多进程：一个程序运行中，产生了多个进程。N个正在运行的程序----至少N个程序1个程序------可能只有一个进程/也可能有...

pyton打包成exe程序简易教程

pyton打包成exe程序简易教程

 我们知道，Python程序需要有python环境才能够运行的，但当我们开发出一个程序之后，给到用户 那么用户是不会去添加这个python环境的。所以为了用户也能够正常使用，我们就需要将这个程序打包成exe程序。1.打包之前需要先下载一个模块：pyinstaller方法一：pip包安装：因...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

© 2022-2025 天桥区万策云网络工作室及济南高新区万策网络工作室提供技术支持
鲁公网安备 37010502001945号
 鲁ICP备2022028958号-1

Powered By Z-BlogPHP. Theme by TOYEAN.