HTML+CSS+JS实现贪吃球小游戏 , 欢迎探讨

最新推荐文章于 2023-11-13 22:20:33 发布
最新推荐文章于 2023-11-13 22:20:33 发布
阅读量1k 收藏 4
点赞数 2
分类专栏： 随记小文章 文章标签： HTML JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43115104/article/details/84228987
版权

周末闲来无事 , 写了个贪吃球小游戏 , 主要用canvas画布加上javascript逻辑实现 , 分享于此 , 欢迎探讨 .
代码如下 :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃球大作战</title>
<style>
#d01{
	width: 606px;
	margin: 20px auto;
}
#c01{
	border-top: 3px solid #80ffff;
	border-right: 3px solid #00ff00;
	border-bottom: 3px solid #ff0000;
	border-left: 3px solid #ff8080;
	background-color: black;
}
#d02{
	width: 606px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
	font-size:12px;
	font-style: italic;
}
#i01{
	display: block;
	margin-left: 200px;
	float: left;
}
#i02{
	display: block;
	margin-right: 200px;
	float: right;
}
</style>
</head>
<body onkeydown="doKeyDown(event)">
	<div id="d01">
		<canvas id="c01" width="600" height="500"></canvas><!--画布-->
		<div id="d02"></div><!--提示框-->
		<input type="button" value="重新开始" onClick="rest()" id="i01"> 
		<input type="button" value="游戏说明" onClick="explain()" id="i02">
	</div>
	<script type="text/javascript">
		var canvas = document.getElementById("c01");
		var context = canvas.getContext("2d");
		var tooltip = document.getElementById("d02");
		var Serpengo = {//红色贪吃球
			"x" : 100,
			"y" : 100,
			"r" : 8,
			"color" : "red"
		}
		var Circle = {//蓝色小球
			"x" : 50,
			"y" : 50,
			"r" : 4,
			"color" : "blue"
		}
		var Rect = {//绿色方块
			"x" : 200,
			"y" : 200,
			"width" : 8,
			"height" : 8,
			"color" : "green"
		}
		function rest() {//重置
			Serpengo.r = 8;
			draw();
			drawFood();
		}
		function draw() {
			var width = 600;
			var height = 500;
			//清空画布
			context.clearRect(0, 0, width, height);
			//绘制贪吃球
			context.fillStyle = Serpengo.color;
			context.beginPath();
			context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true);
			context.fill();
		}
		window.addEventListener("load", draw, true);
		function doKeyDown(event) {
			var flag=false;//接触旗帜
			switch (event.keyCode) {
			case 38://上键头
				if(Serpengo.y<=0) {//边界判断
					break;
				}
				Serpengo.y -= 4;
				draw();
				break;
			case 40://下键头
				if(Serpengo.y>=500) {//边界判断
					break;
				}
				Serpengo.y += 4;
				draw();
				break;
			case 37://左键头
				if(Serpengo.x<=0) {//边界判断
					break;
				}
				Serpengo.x -= 4;
				draw();
				break;
			case 39://右箭头
				if(Serpengo.x>=600) {//边界判断
					break;
				}
				Serpengo.x += 4;
				draw();
				break;
			}
			if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x)
					+ (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r)
					* (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触
				circleRandom();
				Serpengo.r += 2;
				flag=true;
			}
			if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x)
					+ (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6)
					* (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触
				rectRandom();
				Serpengo.r += 2;
				flag=true;
			}
			if (Serpengo.r > 200) {//贪吃球上限设置
				Serpengo.r = 200;
			}
			if(flag){//接触到了就重画
				draw();
			}
			drawFood();
		}
		function drawFood() {
			drawCircle();
			drawRect();
		}
		function drawCircle() {
			context.fillStyle = Circle.color;
			context.beginPath();
			context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true);
			context.fill();
		}
		window.addEventListener("load", drawCircle, true);
		function circleRandom() {
			Circle.x = Math.random();
			Circle.x = Math.ceil(Circle.x * 600);
			Circle.y = Math.random();
			Circle.y = Math.ceil(Circle.y * 500);
		}
		function drawRect() {
			context.fillStyle = Rect.color;
			context.beginPath();
			context.rect(Rect.x, Rect.y, Rect.width, Rect.height);
			context.fill();
		}
		window.addEventListener("load", drawRect, true);
		function rectRandom() {
			Rect.x = Math.random();
			Rect.x = Math.ceil(Rect.x * 600);
			Rect.y = Math.random();
			Rect.y = Math.ceil(Rect.y * 500);
		}
		var showhelp = false;
		function explain() {
			showhelp = !showhelp;
			if (showhelp) {
				tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。";
			} else {
				tooltip.innerHTML = "贪吃球大作战";
			}
		}
	</script>
</body>
</html>

成品图如下 :
在这里插入图片描述

YJLTF
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
学会CSS，只需玩这10款小游戏
最新发布
qqrrjj2011的博客
12-25 595
这是一款为速度狂人设计的游戏！在18个挑战关卡中，用你的flex技巧指挥骑士们，让他们在餐桌上大显身手！拿起你的键盘武器，通过12个紧张刺激的关卡，用flex布局移动你的炮台，保护你的道路不受邪恶攻击，你能成为终极防御大师吗？想象一下，你是一个园丁，你的任务是用水滋润所有的胡萝卜。你有24个关卡的时间来施展你的flex魔法，把小青蛙送到位，准备好了吗？通过解决一道道有趣的题目，挑选出餐桌上的特定物品，享受动画特效带来的欢乐，你就是那位选择器大师！面对画面和三个选项，发动你的CSS脑力引擎，找出正确的答案。
用HTML+CSS+JS写的切水果小游戏它来了
亮点菌
11-24 6288
水果忍者》这款游戏的创意来源也非常简单，就是一位员工在家里看到电视播放销售水果刀的广告，为了体现出刀的锋利，广告里推销员把香蕉抛向空中，然后用水果刀在空中把香蕉切开。经典模式（图标为西瓜）：在经典模式中无时间限制，水果和炸弹会不断浮动出现在屏幕上。玩家共有三次因没有切到水果而失误的机会，而只要一切到炸弹游戏就会马上结束。每积累到100分就会自动补充一次以前失去的机会。此模式中会随机出现石榴（连切来加分，分数高低，取决于玩家切的速度）、火龙果（切掉可以+50分）和杨桃。
大球吃小球html5,怎么用html5制作简单的大球吃小球的游戏
weixin_39970166的博客
06-24 358
匿名用户1级2017-12-16 回答<html><head><title>大球吃小球by大奔</title><scripttype="text/javascript"src="src/jscex.js"></script><scripttype="text/javascript"src="src/jscex-p...
【超好玩的CSS小游戏！！！】CSS Dinner（餐厅游戏）答案【超级全面！！！】
一颗_豆芽菜的博客
12-05 2523
有趣的CSS小游戏，快来试试吧！
（10）HTML5-CSS网页小游戏
梧桐下的四叶草
08-31 1617
游戏的组成有如下： 初始画面：初始画面的布局包括背景，计分栏，地鼠和计时条。 计分系统：若打到地鼠，计分栏的分数会加一，最低0，最高十分。 计时系统：游戏时间计时10秒，计时条会显示游戏进行的进度。 地鼠系统：总共有5个洞，一个洞最多出现两只地鼠，共十只地鼠。 特效系统：地鼠被打击到会出现“碰”字样的特效。 动画系统：地鼠AI，时间条变化，分数更新。 图片资源下载链接
html+css+javascript 实现小游戏 2048
10-15
编程语言：html+css+js 开发工具：viscode or webstorm or Dw or HBuilder 基于html+css+javascript 开发的小游戏 2048
HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+css+js实现的拼图游戏结课作业.rar
06-11
html+css+js实现的拼图游戏结课作业，大二写的网页设计结课作业，内容是一个拼图小游戏，欢迎大家下载使用。
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
08-29
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发，补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
html+css实现小游戏：猜拳游戏
05-05
适合初学者，比较简单
js+css实现简易接球小游戏
qq_75222206的博客
07-06 139
【代码】js+css实现简易接球小游戏。
html+css+js实现一个方块移动过障碍物的小游戏
m0_64568089的博客
11-13 378
ps: 但是这种方式去判断是否相撞的精确度不够，如果用户在与障碍物即将相撞时迅速移动小方块躲避，虽然看起来没有碰到，但是系统仍会判为碰到了。以向左为例，给left按钮添加一个click的事件，按下之后，将小方块的right减去20px。与下方的障碍物比较：障碍物的top减去小方块的top小于小方块的高度时，说明小方块与障碍物相撞了。按下界面中间“开始游戏”的按钮，按钮隐藏起来，障碍物开始循环移动，并且开始播放音效。与上方的障碍物比较：小方块的top小于障碍物的高度时，说明小方块与障碍物相撞了。
前端贪吃蛇小游戏（HTML、CSS、JS）
我们好像在哪见过
06-20 607
这是CSS代码，为游戏页面的样式和布局进行描述，这里只做了简单的样式，可以根据自己的需求添加样式。这是JS代码，用来设小蛇的动态效果和数据处理等功能，代码上有解析和注释。这是HTML代码，用来描述贪吃蛇小游戏页面的结构和内容。
html+css+js实现打砖块小游戏
jakelihua
02-20 1056
打砖块的小游戏对于许多同学来说是熟悉的，这个小游戏的逻辑如下：1、添加挡板、小球、砖块等角色；2、设置挡板随鼠标移动；3、设置小球不断运行，在遇到挡板时反弹；4、设置砖块被小球击中时消失，并克隆下一个砖块；5、设置计分；6、判断游戏结束（以小球低于档板为游戏结束）。这个的运行效果是这个样子的，一个打砖块的游戏，点击中间的start然后就可以玩了。
CSS餐厅小游戏练习1~32关（附答案和链接）
热门推荐
weixin_51718105的博客
10-28 1万+
前言：CSS3众多基础常见的选择器都可以小游戏中学习，每天刷一遍，辅助记忆，做好熟练运用CSS3的第一步。 小游戏链接：CSS3餐厅练习 文章目录 第一关 Type Selector 第二关 第三关 第四关 第五关 第六关 第七关 第八关 第九关 第十关 第十一关 第十二关 第十三关 第十四关 第十五关 第十六关 第十七关 第十八关 第十九关 第二十关 第二十关 第二十一关 第二十二关 第二十三关 第二十四关 第二十五关 第二十六关 第二.
maven依赖包快速下载
YJLTF的博客
07-09 9812
在离线环境进行maven项目开发时，总会遇到需要频繁添加jar包依赖来进行功能拓展，然而某一个jar包的引入，又会需要间接依赖很多其他的类库，一个一个地下载又很麻烦。当然你也可以在外网搭建一套同样的开发环境，通过开发工具自动下载，再把外网本地仓库拷贝到内外环境。这里记录一种稍微简单点的方法： 1、前提：外网安装了maven以及配套java，并配置maven以及java环境变量 2、随便找一个位置创建文件夹，在该文件夹下创建一个pom.xml文件 <?xml version="1.0"?>
echarts自定义气泡图
YJLTF的博客
09-08 6176
拿到的需求是实现自定义x、y、size、color的气泡图，color按值以色阶排布（提需求的是我女朋友，咱也不敢问，还得加班干你说气人不~），分析完需求后我决定学习下echarts的实现，代码如下： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>KEG...
写一个使用html+css+js实现小球移动的代码
06-09
好的，下面是一个使用HTML、CSS和JavaScript实现小球移动的完整代码： ```html <!DOCTYPE html> <html> <head> <title>小球移动</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let x = canvas.width / 2; let y = canvas.height / 2; let dx = 2; let dy = -2; const ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function draw() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 画小球 drawBall(); // 移动小球 x += dx; y += dy; // 检测碰撞 if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; } requestAnimationFrame(draw); } draw(); </script> </body> </html> ``` 这个代码会在页面上画一个带有边框的画布，并在其中绘制一个小球。小球会沿着画布边缘来回移动，并在碰到边缘时反弹。可以通过修改 `dx` 和 `dy` 的值来改变小球移动的速度和方向。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值