html实现经典打方块小游戏

最新推荐文章于 2024-02-04 07:00:00 发布
最新推荐文章于 2024-02-04 07:00:00 发布
阅读量1.7k 收藏 9
点赞数 1
分类专栏： 资源源码 HTML5小游戏源码 文章标签： html 前端
BY [email protected]
本文链接：https://blog.csdn.net/weixin_43151418/article/details/130581985
版权

文章目录

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/130581985

html实现经典打方块小游戏源码 html实现经典打方块小游戏源码，通过控制鼠标移动方块，单击发出子弹，
它可以连发子弹，敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅，性能非常好。
总共三次机会，当碰到别的方块失去一次机会，有历史总积分和当前分数。

1.设计来源

1.1 主界面

请添加图片描述
开始游戏？点击界面就开始游戏了，难度慢慢升级……

1.2 游戏界面

请添加图片描述
界面指标
当前分数：为当前游戏统计分数；
最高分数：为最近玩的最高分数统计；
难度模式：开始游戏后，随着时间难度增加；
右上角X: 当被其他方块碰到，就会有X出现，最多三个就会游戏失败；

游戏说明
通过移动鼠标，控制方块位置，单击鼠标左键，发出子弹，可连续点击。

1.3 游戏结束界面

请添加图片描述
GAME OVER游戏结束，点击界面会重新开始游戏。

2.效果和源码

2.1 动态效果

html实现经典打方块小游戏

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>打方块小游戏 - xcLeigh</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<style type="text/css">
		#canvas{margin: 0 auto;}
	</style>
</head>
<body>
	<canvas id="canvas" width="660" height="400"></canvas>
	<!-- 四个角链接，底部说明 -->
	<div style="position:absolute;left:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:999;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" title="html实现飞机小游戏(源码)" target="_blank" style="text-decoration:none; font-weight:bold">打飞机</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" title="html实现贪吃蛇游戏(源码)" target="_blank" style="text-decoration:none; font-weight:bold">贪吃蛇</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" title="html制作好看的五子棋（源码）" target="_blank" style="text-decoration:none; font-weight:bold">五子棋</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;left:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127886480" title="html实现扫雷小游戏(附源码)" target="_blank" style="text-decoration:none; font-weight:bold;">扫雷</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div  style="position:absolute;left:0;bottom:0; width:100%;height:70px; line-height:30px; text-align:center; z-index:99;">
		<div style="color:white;">通过移动鼠标，调整方块位置，单击鼠标发出子弹，当被别的方块碰到会失去一次机会，总共三次机会。</div>
	  	<a href="https://blog.csdn.net/weixin_43151418" target="_blank" style="text-decoration:none; font-weight:bold;color:white;">xcLeigh | 星空系列 | 打方块小游戏</a>
	  </div>
	<script src="js/BlockBlaster.js"></script>
</body>
</html>

源码下载

html实现经典打方块小游戏（源码） 点击下载
在这里插入图片描述

     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/130581985（防止抄袭，原文地址不可删除）

xcLeigh
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js实现俄罗斯方块小游戏分享
12-12
代码如下:<!doctype html><html><head><style type=”text/css”>body { background:#000; font:25px/25px 宋体;}#box { float:left;width:252px;border:#999 20px ridge;color:#9f9;text-shadow:2px 3px 1px #0f0; }#info { float:left;color:#cfc;padding:24px; }#next { padding:8px;width:105px;color:#9f9;text-shadow:2px 3px
H5 canvas实现经典俄罗斯方块小游戏
08-23
基于h5 canvas的俄罗斯方块小游戏，500行代码（原创无注释，不懂可联系qq742025211）。可以预览下一个图形，消行可得分，有历史最高分记录（清除浏览器缓存历史最高分会清0）。操作方式：↑ 变形 ，↓ 加速 ，← →移动。望对大家有帮助。
html实现经典打方块小游戏（源码）
05-09
html实现经典打方块小游戏源码，通过控制鼠标移动方块，单击发出子弹， 它可以连发子弹，敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅，性能非常好。 总共三次机会，当碰到别的方块失去一次机会，有历史总积分和当前分数。 效果说明地址： https://blog.csdn.net/weixin_43151418/article/details/130581985
HTML小游戏
最新发布
2301_80467305的博客
02-04 211
【代码】HTML小游戏。
用HTML编写的小游戏(源代码).zip
01-09
用HTML编写的小游戏(源代码).zip
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 9321
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 8895
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
共226款Html5小游戏源码分享
蒙双眼看世界
08-22 1万+
【代码】共226款Html5小游戏源码分享。
盘点25个Html游戏Game源码网页爱好者不容错过
adendean的博客
12-03 1507
盘点25个Html游戏Game源码网页爱好者不容错过
几款有意思的html游戏推荐(在线云玩+源码)
m0_44950309的博客
07-28 7318
作者小时候曾一度沉迷网页小游戏,一直都是7k7k,4399的老熟客了,常玩的像洛克王国、赛尔号、创世兵魂这呀，现在flash浏览器都基本不支持了,无聊时候想玩玩都得先找个合适的浏览器,少了很多乐趣。现在是H5游戏的时代了,H5小游戏因其休闲性受到广大用户喜爱，同样也受到企业的欢迎，成为互动休闲娱乐的重要形式之一。...
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
javascript+css实现俄罗斯方块小游戏
11-20
俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。 部分代码： <!DOCTYPE html> <html> <head> <...
html5 canvas实现的方块射击小游戏源码.zip
11-15
html5 canvas实现的方块射击小游戏源码.zip
html实现经典坦克大战小游戏
xcLeigh
05-11 1662
html实现经典坦克大战小游戏，坦克大战源码，html实现经典坦克大战小游戏源码，这是一款很老的游戏，相信大家都有玩过，基本操作方法：玩家1：W A S D 上左下右，SPACE 射击；玩家2： ↑ ← ↓ → 上左下右，ENTER 射击。N 下一关，P 上一关。基本功能都实现，简单易上手。用 html+js+css+canvas 实现，可以借用上手学习。
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
2302_81218205的博客
12-25 532
function Myplane(w, h, x, y, imgurl, boomurl) { //w,h宽高 x,y位置 imgurl和boomurl我方飞机的图片路径。在游戏进行界面中，左上方有得到的分数显示，敌方飞机有三种类型（小，中，大），他们的形状，大小，击落的分数各不同，以合适的速度控制它们的数量，以及运动的速度。//给每一架创建的敌机添加自定义的属性--血量。原文链接：https://blog.csdn.net/huangwfu/article/details/128458321。
使用 HTML、CSS 和 JS 制作一个中国象棋
努力是为了站在万人之中，成为别人的光
07-24 2万+
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：🌟【100个摸鱼小游戏】（源码永久免费开源）直接跳到末尾 参与评论送书 直接跳到末尾 领取完整源码 快速跳转 如何高效学习目前已上线的小游戏有90+个游戏入口地址有多个：在线演示地址：https://haiyong.site/moyu/xiangqi/源码可在文末免费获取目录结构如下：
html实现汉诺塔小游戏
xcLeigh
05-11 2894
html实现汉诺塔小游戏源码，汉诺塔源码下载，可以配置汉诺塔圆盘大小：3-8；动态加载最小移动次数，当前移动次数；可以回退，可以电脑完成汉诺塔。
41个html5小游戏
qq_20146529的博客
07-13 1643
有大量的动画和交互功能，完全可以用来完成一些游戏类的操作，今天收集分享：41个用HTML5制作完成的游戏作品，希望其中有你喜欢和需要的，或者可以给你带来灵感的。
分享24个网页游戏源代码，总有一个是你想要的
zdh13370188237的博客
02-03 1万+
网页
html躲避方块小游戏
05-30
HTML躲避方块小游戏是一款基于HTML、CSS和JavaScript开发的小游戏，玩家需要控制一个小方块在不断向上移动的屏幕中躲避障碍物，直到到达终点。 下面是一个简单的HTML躲避方块小游戏的代码示例： ```html <!DOCTYPE html> <html> <head> <title>躲避方块小游戏</title> <style> #player { position: absolute; width: 50px; height: 50px; background-color: red; } #obstacle { position: absolute; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <div id="player"></div> <div id="obstacle"></div> <script> var player = document.getElementById("player"); var obstacle = document.getElementById("obstacle"); var speed = 5; var score = 0; function moveObstacle() { var randomPosition = Math.floor(Math.random() * 500) + 1; // 随机生成障碍物的位置 obstacle.style.top = "0px"; obstacle.style.left = randomPosition + "px"; } function gameLoop() { var playerTop = parseInt(player.style.top); var obstacleTop = parseInt(obstacle.style.top); var obstacleLeft = parseInt(obstacle.style.left); if (playerTop <= obstacleTop + 50 && playerTop + 50 >= obstacleTop && obstacleLeft <= 50 && obstacleLeft + 50 >= 0) { alert("游戏结束，得分：" + score); location.reload(); } else { score++; document.getElementById("score").innerHTML = "得分：" + score; } player.style.top = (playerTop - speed) + "px"; obstacle.style.top = (obstacleTop + speed) + "px"; if (obstacleTop >= 500) { moveObstacle(); } } setInterval(gameLoop, 50); setInterval(moveObstacle, 3000); </script> <div id="score">得分：0</div> </body> </html> ``` 这段代码中，我们使用了HTML的div元素来模拟游戏中的玩家和障碍物，使用CSS来设置它们的样式和位置，使用JavaScript来实现游戏逻辑。玩家通过键盘控制小方块的上下移动，障碍物则在屏幕上不断向下移动并随机改变位置。当玩家与障碍物相撞时，游戏结束，得分为玩家成功躲避的时间，玩家可以选择重新开始游戏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xcLeigh

万水千山总是情，打赏两块行不行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值