html小游戏--纯页面html小游戏贪吃蛇（基础版）

最新推荐文章于 2024-06-16 17:04:32 发布
最新推荐文章于 2024-06-16 17:04:32 发布
阅读量1w 收藏 90
点赞数 22
分类专栏： 技术点 笔记 文章标签： javascript html typescript
原文链接：https://blog.csdn.net/bingocoder/article/details/85868814
版权

直接复制到一个页面就行了
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<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 type="text/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();
	
	
 
}
</script>
</body>
</html>
堵上全村人的未来
关注
  • 22
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用HTML实现简单的小游戏的多种（附完整源码）JavaScript小游戏详情介绍
王大师企业官方博客
10-27 3882
这是一个简单的JavaScript小游戏——坦克大战。在游戏中，玩家控制一个坦克，可以在地图上移动并射击敌人的坦克 在这个坦克大战游戏中，我们使用HTML的元素来表示坦克和子弹。CSS样式定义了坦克和子弹的外观。游戏的逻辑代码部分包含了以下函数：：根据当前坦克和子弹的位置，绘制游戏场景。这个函数会在移动坦克或射击子弹后被调用。：根据传入的移动方向参数，更新坦克的位置，并调用来重新绘制游戏场景。：创建子弹，并使用定时器和函数来更新子弹的位置，实现子弹的向上移动动画。当子弹到达顶部边界时，清除
做一个HTML小游戏之五子棋
chenggenb的博客
10-09 1828
五子棋是一种古老而受欢迎的棋类游戏，它不仅可以提供娱乐，还能锻炼思维能力和战略策划能力。无论是在家庭中与朋友对战，还是参加专业比赛，五子棋都是一项有趣且具有挑战性的游戏。
HTML+CSS+JS实现2048经典小游戏（附完整源码）
猿小白的博客
06-05 1374
2048 小游戏的目标是通过合并数字单元格，最终在 4x4 的棋盘上创建一个值为 2048 的单元格。
(附源码)HTML+JavaScript+Canvas编写2D小游戏
最新发布
qq_43059415的博客
06-16 1191
（附源码）使用HTML+JavaScript+Canvas编写2D小游戏。第一次写文章，可能有些地方存在问题，如有不对的地方也请帮忙指出，谢谢。
html实现五子棋游戏
路在前方
10-31 5494
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
一个简单的扫雷小游戏的HTML和JavaScript
weixin_45783763的博客
01-18 755
以上代码创建了一个10x10的扫雷游戏网格，其中包含10个随机放置的炸弹。当玩家点击一个网格时，如果是炸弹格子，则游戏结束，否则会显示周围的炸弹数量，并将其颜色变为灰色。如果点击的是一个没有周围炸弹的空白格子，会递归地显示周围的格子。
HTML5小游戏代码大全
m0_72655835的博客
07-10 2万+
由于长度原因我将以资源方式上传，本文为例子.1.2048 2.暴打神经猫
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
写一个简单html游戏代码
weixin_35753431的博客
01-06 473
在 HTML 中创建一个游戏通常需要使用 JavaScript 来编写游戏的逻辑。你可以使用 HTML 的 canvas 元素来创建游戏画布。 以下是一个简单的 HTML 游戏示例代码： <html> <head> <title>My Game</title> </head> <body> <canvas id=...
共226款Html5小游戏源码分享
蒙双眼看世界
08-22 1万+
【代码】共226款Html5小游戏源码分享。
盘点25个Html游戏Game源码网页爱好者不容错过
adendean的博客
12-03 2549
盘点25个Html游戏Game源码网页爱好者不容错过
小游戏-使用Python开发的贪吃蛇小游戏-GluttonousSnake.zip
03-01
《贪吃蛇小游戏开发详解——基于Python编程》 贪吃蛇是一款经典的电子游戏，它以其简单易懂的规则和无尽的游戏模式深受玩家喜爱。在本文中，我们将深入探讨如何使用Python编程语言来开发这样一个小游戏。我们将从...
HTML 小游戏：贪吃蛇游戏
12-30
总结起来，HTML贪吃蛇游戏是通过HTML构建页面结构，CSS定制样式，JavaScript处理交互和游戏逻辑，共同实现的一个无需额外环境即可运行的经典小游戏。对于想要学习网页开发或者JavaScript编程的初学者来说，这是一个...
小程序游戏-贪吃蛇游戏
05-11
总的来说，开发小程序版的贪吃蛇游戏，需要掌握小程序的基础知识，理解游戏规则，运用编程技巧实现游戏逻辑和动画效果。这是一个结合了技术与创意的过程，也是提升编程技能和用户体验设计能力的好实践。
Python小游戏源码-贪吃蛇游戏源码
02-27
Python贪吃蛇游戏是一款经典的计算机程序，它利用Python语言实现，是初学者学习游戏编程的绝佳实例。这个源码提供了完整的代码结构，可以帮助我们理解如何用Python进行游戏开发。接下来，我们将深入探讨这款游戏背后...
基于HTML的贪吃蛇小游戏
11-12
通过学习和实践这个基于HTML的贪吃蛇小游戏，你可以深入理解Web开发的基础，包括页面布局、事件处理、DOM操作以及简单的游戏逻辑。这对于想要入门Web开发或者提升前端技能的开发者来说，是一个很好的练习项目。同时...
如何使用HTML, CSS和JavaScript开发一个浏览器打字游戏：从零到一的详细步骤与完整代码教程
m0_57781768的博客
09-19 625
现在，你已经掌握了如何使用这三种技术创建基础的互动应用，你可以进一步探索更复杂的项目和概念。我们有一个标题、一个需要玩家键入的单词或句子、一个输入框供玩家键入、一个显示分数和剩余时间的记分板，以及一个开始游戏的按钮。此游戏可运行于浏览器中，为玩家提供了一个有趣的方式来练习和提高他们的打字速度。基于玩家的选择，你可以调整时间限制、单词的长度或使用更复杂的句子。在下一部分，我们将进行一些细微的调整和优化，以提高游戏的用户体验。现在，我们需要两个新的函数：一个用于生成单词，另一个用于检查玩家的输入。
拼图小游戏制作教程：用HTML5和JavaScript打造经典游戏
interest_ing_的博客
03-10 1985
在这篇文章中，我们将一起学习如何从头开始制作一个简单的拼图小游戏。我们将使用HTML5和JavaScript来创建这个小游戏，不需要任何复杂的框架或库。通过这个教程，你将了解基本的网页布局、CSS样式设置以及JavaScript的交互逻辑。
分享24个网页游戏源代码，总有一个是你想要的
zdh13370188237的博客
02-03 1万+
网页
c语言写贪吃蛇小游戏
08-31
要用C语言编写贪吃蛇小游戏，你需要掌握以下内容： 1. C语言基础语法，包括结构体、指针和链表。这些是用来表示蛇身和食物位置的数据结构和操作方法。 2. 相关的库，包括<windows.h>、<stdlib.h>和<time.h>。这些库提供了一些函数，用于控制游戏界面、生成随机数和计时等功能。 3. 判断坐标是否在蛇身上的函数。这个函数可以帮助你判断食物是否生成在蛇身上，以及蛇头是否碰到蛇身，从而判断游戏是否结束。 4. 创建食物的函数。这个函数用来在游戏界面上生成食物，并确保食物不会生成在蛇身上。 5. 头文件和全局变量的定义。你需要定义一些全局变量来保存游戏状态、蛇身和食物位置等信息，并在头文件中声明它们。这样可以方便在不同的函数中访问和修改这些变量。 以下是一个简单的示例代码，展示了如何使用C语言编写贪吃蛇小游戏的基本结构： ``` #include <stdio.h> #include <windows.h> #include <stdlib.h> #include <time.h> // 定义蛇身和食物的结构体 typedef struct Node { int x; int y; struct Node* next; } node; // 全局变量 node* head; // 蛇头 int foodX, foodY; // 食物坐标 int score; // 得分 // 判断坐标是否在蛇身上 int inSnake(int x, int y) { node* p = head->next; while (p) { if (x == p->x && y == p->y) return 1; p = p->next; } return 0; } // 创建食物 void createFood() { // 生成随机坐标 do { foodX = rand() % 20; foodY = rand() % 20; } while (inSnake(foodX, foodY)); // 在界面上显示食物 // ... } int main() { // 初始化游戏界面和蛇身 // ... while (1) { // 检测键盘输入，控制蛇移动方向 // ... // 更新蛇身和食物位置 // ... // 判断是否游戏结束 // ... // 显示游戏界面 // ... // 控制游戏速度 // ... // 计算得分 // ... } return 0; } ``` 这只是一个简单的示例代码，你可以根据需要进行修改和扩展，添加更多的功能和特性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [C语言实现贪吃蛇（详细版）](https://blog.csdn.net/m0_73906588/article/details/130639884)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值