2021-07-28——前端吃豆豆游戏代码

最新推荐文章于 2022-11-17 15:49:21 发布
最新推荐文章于 2022-11-17 15:49:21 发布
阅读量240 收藏 1
点赞数 1
文章标签： html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55280248/article/details/119181909
版权
这篇博客展示了如何仅使用CSS3和HTML5创建一个动态的吃豆豆游戏效果。通过关键帧动画，实现了圆形背景的旋转以及两个三角形的开合，模拟吃豆豆的动作。博客内容适合前端开发者，特别是对CSS3动画感兴趣的读者。
摘要由CSDN通过智能技术生成 
*{
				margin: 0;
				padding:0;
			}
			body{
				margin: 0;
				background-color: black;
			}
			.hezi{
				width: 200px;
				height: 200px;
				margin-top: 200px;
				background-color: black;
				border-radius: 50% ;
				animation: peas 1s infinite;
				}
			.top,.bot{
				width: 200px;
				height: 100px;
				background-color: yellow;
				margin-left: 200px;
			}
			.top{
				border-radius: 100px 100px 0 0;
				transform: rotate(-30deg);
				animation: topmouth 1s infinite;
			}
			.bot{
				border-radius: 0 0 100px 100px;
				transform: rotate(30deg);
				animation: name 1s infinite;
			}
			@keyframes topmouth{
				0%{
					transform: rotate(0deg);
				}
				50%{
					transform: rotate(-30deg);
				}
				100%{
					transform: rotate(0deg);
				}
			}
			@keyframes name{
				0%{
					transform: rotate(0deg);
				}
				50%{
					transform: rotate(30deg);
				}
				100%{
					transform: rotate(0deg);
				}
			}
			@keyframes peas{
			0%{
                box-shadow: 400px 0px 0px -80px #00cc00,
                            600px 0px 0px -80px #00cc00,
                            800px 0px 0px -80px #00cc00,
                            1000px 0px 0px -80px #00cc00;
            }
            100%{
                box-shadow: 200px 0px 0px -80px #00cc00,
                            400px 0px 0px -80px #00cc00,
                            600px 0px 0px -80px #00cc00,
                            800px 0px 0px -80px #00cc00;
            }
		}

		</style>

	<title>吃豆豆</title>
</head>
<body>
	<div class="hezi">
		<div class="top">shang</div>
		<div class="bot">xia</div>
	</div>
</body>

只需要css3和h5就可以实现
可以直接使用！！！！

pink@zhu
关注
吃豆豆游戏源码
01-07
基于JavaScript的h5游戏吃豆豆经典吃豆子游戏是一款益智类游戏，目标就是避开小怪物的追赶吃完所有豆子，吃了咖啡会暂时无敌，拿着大锤子追得怪物满处跑。
HTML5+CSS3 吃豆豆代码
记录学编程后遇到的问题，注意点以及相关知识
10-25 1498
吃豆豆 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吃豆豆动画</title> <style> body {
HTML（1）吃豆豆网页代码
洛尧的博客
05-23 892
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>吃豆豆</title> <style> body{ margin: 0; } .main{ width: 200px; height:200px; border-radius:50%; margin:200px; animation: peas 1
前端学习-吃豆子游戏设计
qq_41960957的博客
03-01 361
前端学习练习之吃豆子游戏设计 吃豆子游戏游戏截图一、H5样式代码1.H5设计2.js代码样式设计 游戏截图 一、H5样式代码 1.H5设计 代码如下（示例）： <html> <head> <meta charset="utf8"> <title>吃豆游戏</title> <link rel="shortcut icon" href="favicon.png"> <style> body{background
html吃豆豆代码,超萌css制作吃豆豆加载效果
weixin_39522423的博客
06-19 242
web前端群，189394454，有视频、源码、学习方法等大量干货分享????html代码：????css代码：@-webkit-keyframes up {0%, 100% {transform: rotate(0);}50% {transform: rotate(-30deg);}}@-moz-keyframes up {0%, 100% {transform: rotate(0);}50% {trans...
吃豆豆.zip
06-16
在这个游戏中，玩家控制的角色需要在地图上移动，吃掉散布的小豆豆，同时避开或消灭追逐的敌人，以此得分并完成关卡。 首先，我们要理解HTML的基本结构，包括头部（）、主体（）和各种元素标签，如段落（）、标题...
H5小游戏源码 弹跳豆豆.zip
最新发布
10-14
本资源提供的是一个名为“弹跳豆豆”的H5小游戏源码，这是一份可以深入研究、学习和定制的游戏代码库。下面我们将详细探讨H5小游戏开发的基础知识，以及“弹跳豆豆”这款游戏可能涉及到的技术点。 首先，H5小游戏是...
JavaWeb（引用--＞狂神学习笔记）2021-08
煮酒客的博客
09-08 901
狂神学习笔记 1、基本概念（①） 1.1 前言 web开发： web，网页的意思，www.baidu.com· 静态web html,css 提供给所有人看的数据始终不会发生变化！ 动态web 淘宝，几乎是所有的网站； 提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 技术栈：Servlet/JSP，ASP，PHP 1.2 web应用程序web应用程序： 可以提供浏览器访问的程序； a.html、b.html.….多个web资源，这些web资源可以被外界访问，对外界提供
web版打豆豆游戏源码
10-11
【web版打豆豆游戏源码】是一款基于HTML5、JavaScript技术开发的在线游戏，它在设计时考虑了对主流浏览器的兼容性，包括IE8及以上版本，以及Chrome、Firefox和Safari。这款游戏并未针对手机端进行专门的优化，因此在...
HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
而风不止
11-17 2361
HTML：结构CSS：样式 GF 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
游戏：这是游戏的前端页面
02-14
游戏类 这是游戏的前端页面。
游戏主题的网页前端
06-29
主题关于游戏的前端网页，首页index，点击游戏封面可跳转网页，点击不同的游戏代表作显示不同游戏封面。
前端40款小游戏源码
12-03
40款小游戏各种小例子，切水果，2048，连连看，HTML+CSS+JavaScript练习小例子，应有尽有下载解压后即可运行，完整源代码。
N个可以运行的html5游戏源代码.rar
08-02
使用HTML5 web前端开发技术实现的多个游戏平台源码，包括源代码和部分游戏的试代码，大家喜欢的话，过来下载哦。通过支持HTML5的浏览器可以直接运行。
吃豆豆--Java小游戏
Smile__wei的博客
08-14 5247
吃豆豆 项目总结，要求用Java做一个小游戏 不想用网上现成的代码，也想做的有新意一点 什么贪吃蛇啊飞机大战啊超级玛丽啊…… 之前有人写过或者有人在写，所有并不想做（@我东东哥） 打了3天4399吧，想到一个比较不错的游戏：吃豆豆 黄色的为我方小豆人，粉色红色橙色为小怪兽 可以通过键盘上下左右来控制小豆人运动，每次移动5个像素 小怪兽可以自行运动，每
Eat Doug吃豆豆小游戏纯js代码
一只勤勤恳恳的小前端
02-26 883
Eat Doug吃豆豆小游戏纯js代码 一个前端小游戏demo（没有美化），简单的而又淳朴 利用面向对象编程思想实现 简单说一下思路： 第一步：获取元素map地图（这是地图一个简单的div，所有元素都要利用appendChild()方法渲染到它的上面） 第二步 ：对象（吃豆豆，抽象出各个对象），用了es6的类声明方式 糖豆人类 BeansMan = { } BeansMan的方法 render(渲染) move(移动) 豆豆类 Beans = { } Beans的方法 render(渲染) re
【酷炫 贪吃蛇——由“前端“实现___效果 + 全部代码】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-14 3162
目录一、游戏效果展示（运行）二、全部代码三、说明 一、游戏效果展示（运行） 这是带有调整速度的游戏运行展示： 这是带有"重新游戏"的展示：这速度我还不能驾驭哈哈~ 测试一下你最好得多少分数？ 注意： 背景图片、游戏格子、提示语言等都可以根据需要进行更改哦~ 二、全部代码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇——CSDN追
前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
热门推荐
商务合作 | 共同学习 | 携手共进
03-30 10万+
原生 js+dom 操作实现像素鸟小游戏，代码完整，素材完整。
Python吃豆豆游戏代码
05-23
以下是使用 Python 实现的吃豆豆游戏代码： ```python import pygame import random # 初始化 Pygame pygame.init() # 设置窗口大小 screen_width = 800 screen_height = 600 screen = pygame.display.set_mode(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值