HTML（1）吃豆豆网页代码

最新推荐文章于 2021-08-11 21:41:13 发布
最新推荐文章于 2021-08-11 21:41:13 发布
阅读量860 收藏 1
点赞数
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43144103/article/details/106293811
版权 
<!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 1s infinite linear;
		}
		.top{
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;
			border-radius:100px 100px 0px 0px;
			animation: movetop 1s infinite;
		}
		.bottom{
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;
			border-radius:0px 0px 100px 100px;
			animation: movebottom 1s infinite;
		}

		@keyframes movetop{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform: rotate(-30deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		@keyframes movebottom{
			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>
 </head>
 <body>
	<div class="main"> 
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
 </body>
</html>

照着视频做出来的第一个html。我用的是EditPlus。Ctrl+B打开浏览器：
在这里插入图片描述

洛尧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html吃豆豆游戏代码,HTML5 Canvas 来回简单版吃豆豆
weixin_39613637的博客
05-31 314
JavaScript语言：JaveScriptBabelCoffeeScript确定//吃豆豆动画//var radius = 100; //大球半径var x = 150; //大球球的圆心坐标var y = 300;var bol = true;var canvas, cxt;window.onload = function() {canvas = document.getElementByI...
HTML5+CSS3 吃豆豆代码
记录学编程后遇到的问题，注意点以及相关知识
10-25 1482
吃豆豆 <!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+CSS 吃豆豆动画 073
海到无边天作岸 山登绝顶我为峰
06-11 5163
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 Demo代码 HTML <
吃豆豆
qq_45739834的博客
01-05 398
吃豆豆代码纯用html和css3 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
吃豆豆源代码
12-27
这个是简单的吃豆豆源代码，技术含量不高。
吃豆豆HTML5游戏源码
06-23
1. **HTML5 Canvas**：吃豆豆游戏的画面展示主要依赖于HTML5的Canvas元素。Canvas是一个二维绘图表面，开发者可以通过JavaScript来绘制图形，实现游戏中的角色移动、碰撞检测和动画效果。 2. **JavaScript**：游戏...
吃豆豆.zip
06-16
《吃豆豆》是一款基于HTML构建的简单小游戏，它展示了HTML在实现互动娱乐内容方面的基本应用。HTML（HyperText Markup Language）是网页制作的基础语言，通过编写标记代码来描述网页结构和内容。在这个游戏中，玩家...
吃豆豆游戏源码
01-07
通过学习和理解这个吃豆豆游戏的源码，开发者可以深入掌握JavaScript游戏开发的基本技巧，了解如何将HTML5、CSS3与JavaScript结合来构建互动性强、视觉效果良好的网页游戏。此外，这也是一个实践面向对象编程、游戏...
弹跳豆豆HTML5游戏源码
06-25
1. 游戏主逻辑：这部分代码负责游戏的整体流程，包括初始化、更新帧率、游戏状态管理（如开始、暂停、结束）以及分数计算等。 2. 角色和对象：弹跳豆豆和其他游戏元素的定义，包括它们的属性（如位置、速度、大小）...
吃豆豆小游戏源码
11-22
使用Winform开发的一个关于吃豆豆的经典游戏，方向键控制移动方向，躲避怪物吃掉所有豆豆就会胜利，有兴趣的可以下载学习。 注意： 开发环境为Visual Studio 2008。
javascript做的谷歌吃豆游戏
07-11
有JS做的一款吃豆游戏 界面非常的完美
经典游戏-吃豆豆
12-05
经典的小游戏，吃豆豆，分享！是一个FLA的源文件，喜欢的可以拿走！
吃豆人HTML代码
猫狗鼠鱼的储物间
03-05 4477
吃豆人动画 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...
【吃豆游戏----HTML+JS+CSS等实现，效果+源代码】| 系统架构师 面试：请介绍一下你对数据库读写分离的理解，并描述如何实现读写分离。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
08-11 861
目录效果源代码 效果 这个小游戏是要在前端界面运行实现的，在网页运行。通过按键就是上下左右键，来操控游戏中的小黄，躲避追踪，躲得时间越长，分数越高，一旦被撞到，就会失去一次生命，一共有3次生命。游戏结束，也可以继续通过按空格键再玩，挑战高分！ 源代码 index.html <html> <head> <meta charset="utf8"> <title>吃豆游戏</title> <link rel="shortcut icon"
html吃豆豆游戏代码,吃豆豆小游戏
weixin_42512723的博客
05-31 443
HtmlCssJs点击黑块开始body {overflow:hidden;height:500px;}#player {position:absolute;background:black;width:100px;height:100px;z-index:900;}#gift {position:absolute;background:green;width:20px;height:20px;}....
HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
李南江
06-18 1214
HTML +CSS + JS 10 分钟实现一个吃豆豆小游戏
吃豆豆HTML+CSS
weixin_46596213的博客
12-01 201
<!doctype html> <html> <head> <meta charset="utf-8"> <title>吃豆豆</title> <style> body { margin: 0; background-color: #a79066; } .mouth { width: 200px; height: 200px; /*margin
Eat Doug吃豆豆小游戏纯js代码
一只勤勤恳恳的小前端
02-26 838
Eat Doug吃豆豆小游戏纯js代码 一个前端小游戏demo（没有美化），简单的而又淳朴 利用面向对象编程思想实现 简单说一下思路： 第一步：获取元素map地图（这是地图一个简单的div，所有元素都要利用appendChild()方法渲染到它的上面） 第二步 ：对象（吃豆豆，抽象出各个对象），用了es6的类声明方式 糖豆人类 BeansMan = { } BeansMan的方法 render(渲染) move(移动) 豆豆类 Beans = { } Beans的方法 render(渲染) re
Python吃豆豆游戏代码
最新发布
05-23
以下是使用 Python 实现的吃豆豆游戏代码： ```python import pygame import random # 初始化 Pygame pygame.init() # 设置窗口大小 screen_width = 800 screen_height = 600 screen = pygame.display.set_mode((screen_width, screen_height)) pygame.display.set_caption("吃豆豆游戏") # 加载图片 player_image = pygame.image.load("player.png") enemy_image = pygame.image.load("enemy.png") food_image = pygame.image.load("food.png") # 定义颜色 WHITE = (255, 255, 255) BLACK = (0, 0, 0) RED = (255, 0, 0) # 定义字体 font = pygame.font.Font(None, 36) # 定义玩家、敌人和食物类 class Player: def __init__(self): self.image = player_image self.rect = self.image.get_rect() self.rect.x = screen_width / 2 self.rect.y = screen_height / 2 self.speed = 5 self.score = 0 class Enemy: def __init__(self): self.image = enemy_image self.rect = self.image.get_rect() self.rect.x = random.randint(0, screen_width - self.rect.width) self.rect.y = random.randint(0, screen_height - self.rect.height) self.speed = 3 class Food: def __init__(self): self.image = food_image self.rect = self.image.get_rect() self.rect.x = random.randint(0, screen_width - self.rect.width) self.rect.y = random.randint(0, screen_height - self.rect.height) # 创建玩家、敌人和食物对象 player = Player() enemy = Enemy() food = Food() # 游戏循环 running = True while running: # 处理事件 for event in pygame.event.get(): if event.type == pygame.QUIT: running = False # 移动玩家 keys = pygame.key.get_pressed() if keys[pygame.K_LEFT]: player.rect.x -= player.speed if keys[pygame.K_RIGHT]: player.rect.x += player.speed if keys[pygame.K_UP]: player.rect.y -= player.speed if keys[pygame.K_DOWN]: player.rect.y += player.speed # 碰撞检测 if player.rect.colliderect(enemy.rect): player.score -= 1 enemy.rect.x = random.randint(0, screen_width - enemy.rect.width) enemy.rect.y = random.randint(0, screen_height - enemy.rect.height) if player.rect.colliderect(food.rect): player.score += 1 food.rect.x = random.randint(0, screen_width - food.rect.width) food.rect.y = random.randint(0, screen_height - food.rect.height) # 移动敌人 enemy_dx = random.randint(-enemy.speed, enemy.speed) enemy_dy = random.randint(-enemy.speed, enemy.speed) enemy.rect.x += enemy_dx enemy.rect.y += enemy_dy # 绘制界面 screen.fill(WHITE) screen.blit(player.image, player.rect) screen.blit(enemy.image, enemy.rect) screen.blit(food.image, food.rect) score_text = font.render("分数：" + str(player.score), True, BLACK) screen.blit(score_text, (10, 10)) pygame.display.update() # 退出 Pygame pygame.quit() ``` 该代码使用 Pygame 库实现了一个基本的吃豆豆游戏，玩家可以使用方向键控制角色的移动，吃到食物可以得分，碰到敌人则扣分。游戏界面包含分数显示，可以通过调整图片和颜色等参数来个性化游戏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值