个人Scratch程序合集第二版主页_scratch 个人主页-优快云博客

这是一个使用HTML重构的Scratch程序主页，采用响应式设计，展示了多个互动游戏项目。用户可以通过点击图片进入相应的程序，每个项目都有详细的文字说明和博客链接，源码托管在GitHub上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人Scratch程序合集第二版主页

本程序为本人的转换为HTML的Scratch程序制作的第二个主页。改用了响应式图片廊+文字说明的形式，对不同尺寸的页面适配较好，但在一些分辨率上右侧空白区域过大。由于通常只有文字说明行数相同的图片才能并排，本人虽然调整了顺序，但在每行显示三张图片或两张图片的情况下还是有两行没显示满。博客地址为本人在优快云发布相应程序的文章的网址，为了精简页面，这一版本不显示具体网址。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>个人Scratch程序合集 第二版 主页</title>  
<style>
body 
{
     background-image: url('background2.jpg');
     background-repeat:repeat;
	 color:Sienna   ;
 }
a:link {color:DarkGreen  ;}      
a:visited {color:DarkGreen ;}  
a:hover {color:LawnGreen;}  
a:active {color:LawnGreen;} 	
div.img {
    margin: 5px;
    border: 5px solid ForestGreen  ;
    float: left;
    width: 480px;
}

div.img:hover {
    border: 5px solid LawnGreen ;
}

div.img img {
    width: 480px;
    height: auto;
}

div.desc {
    padding: 20px;
    text-align: center;
}
</style>
</head>
<body>
<h2 align="center">个人Scratch HTML程序合集 第二版</h2>
	<p>Scratch是一个开源的图形化编程平台，可以快捷地编写交互性的HTML5+JavaScript程序。以下是本人编写的转换为HTML的Scratch程序。
		由于Scratch的分辨率固定为480x360，背景只能选择细节较少的以便在高分辨率窗口中达到较好的图像增强效果。
		帧率设为120帧以确保画面流畅（现在的设备不用担心掉帧）。新的主页调整了样式，结构更紧凑且能响应式排列图像，
		但存在文字行数不同时不能对齐的问题。点击图片进入相应的程序。</p>
<p align="center"><a href="https://github.com/Willian7004/Scratch-Programs/">Scratch程序开源地址</a>    
	<a href="https://github.com/Willian7004/HTML-Programs/">HTML版本开源地址  </a> </p>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="棒球发球与反弹.html">
      <img src="1.jpg" alt="棒球发球与反弹" width="480" height="360">
    </a>
    <div class="desc">棒球发球与反弹<p>在这个程序中，用户可以点击鼠标向初始位置的棒球与鼠标指针的连线方向发射一个棒球，
		棒球碰到边缘反弹，移动一定距离后消失。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131636055/">博客地址</a></p></div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="抓小狗.html">
      <img src="6.jpg" alt="抓小狗" width="480" height="360">
    </a>
    <div class="desc">抓小狗<p>在这个程序中，第一个角色跟随鼠标指针，后面3个角色依次跟随前面的角色。
		用户操作第一个角色碰到随机生成的小狗角色则加分，后三个角色碰到小狗角色则扣分。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131642189/">博客地址</a></p></div>
  </div>
</div>	
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="随机平台发球.html">
      <img src="3.jpg" alt="随机平台发球" width="480" height="360">
    </a>
    <div class="desc">随机平台发球<p>在这个程序中，平台会随机生成，用户通过键盘或触摸按键操作角色移动，角色接触平台时不会下落。
		点击鼠标可以向角色与鼠标指针连线方向发球，球碰到边缘或平台会反弹。</p>
	  <p><a href="随机平台发球（手机版）.html">用触屏操作请选择此版本</a>
		  <a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131652267/">博客地址</a></p></div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="猴子踢球.html">
      <img src="2.jpg" alt="猴子踢球" width="480" height="360">
    </a>
    <div class="desc">猴子踢球<p>在这个程序中，猴子跟随鼠标指针，碰到球后球从球与鼠标指针的连线方向开始移动，球碰撞后会反弹。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131640015/">博客地址</a></p></div>
  </div>
</div>
	
<div class="responsive">
  <div class="img">
    <a target="_blank" href="随机平台跳跃.html">
      <img src="4.jpg" alt="随机平台跳跃" width="480" height="360">
    </a>
    <div class="desc">随机平台跳跃<p>在这个程序中，平台会随机生成，用户通过键盘或触摸按键操作角色移动，
		角色接触平台时不会下落。</p>
	  <p><a href="随机平台跳跃（手机版）.html">用触屏操作请选择此版本</a>
		  <a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131646669/">博客地址</a></p></div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="星际飞船.html">
      <img src="5.jpg" alt="星际飞船" width="480" height="360">
    </a>
    <div class="desc">星际飞船<p>在这个程序中，飞船跟随鼠标指针，碰到两边的按钮切换背景。
		另外，背景中有随机生成的两种飞船。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131654039/">博客地址</a></p></div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="随机平台跳跃与背景切换.html">
      <img src="12.jpg" alt="随机平台跳跃与背景切换" width="480" height="360">
    </a>
    <div class="desc">随机平台跳跃与背景切换<p>在这个程序中，平台随机生成，
		操作角色跳跃到达箭头处切换到下一个场景，点击箭头可以重新生成平台。</p>
	  <p><a href="随机平台跳跃与背景切换（手机版）.html">用触屏操作请选择此版本</a>
		  <a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131715641/">博客地址</a></p></div>
  </div>
</div>	

<div class="responsive">
  <div class="img">
    <a target="_blank" href="多场景收集物品.html">
      <img src="8.jpg" alt="多场景收集物品" width="480" height="360">
    </a>
    <div class="desc">多场景收集物品<p>在这个程序中，角色跟随鼠标指针收集场景中的随机生成的四种物品，
		收集完成后切换场景和角色。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131723286/">博客地址</a></p></div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="接篮球.html">
      <img src="11.jpg" alt="接篮球" width="480" height="360">
    </a>
    <div class="desc">接篮球<p>在这个程序中，按下鼠标复制角色，复制的角色移动到鼠标指针处，
		0.5秒后再把鼠标指针移动到复制的角色上可删除角色。屏幕中心的篮球会复制并向随机方向发射，
		碰到角色后角色做出接球动作，删除篮球。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131722401/">博客地址</a></p></div>
  </div>
</div>	
		
<div class="responsive">
  <div class="img">
    <a target="_blank" href="足球打蛤蟆.html">
      <img src="7.jpg" alt="足球打蛤蟆" width="480" height="360">
    </a>
    <div class="desc">足球打蛤蟆<p>在这个程序中，主角跟随鼠标指针，
		按下鼠标时向角色与鼠标指针连线方向发射足球，足球碰到边缘会反弹，移动一定步数后消失。
		足球击中随机生成的蛤蟆角色后删除后者并加分，蛤蟆角色碰到主角后删除前者并扣分。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131643502/">博客地址</a></p></div>
  </div>
</div>
	
<div class="responsive">
  <div class="img">
    <a target="_blank" href="放置建筑.html">
      <img src="9.jpg" alt="放置建筑" width="480" height="360">
    </a>
    <div class="desc">放置建筑<p>在这个程序中，点击鼠标复制建筑并切换样式，复制的建筑移动到鼠标指针处，
		0.5秒后把鼠标指针移动到建筑处可删除建筑。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131728872/">博客地址</a></p></div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="环绕版打砖块.html">
      <img src="10.jpg" alt="环绕版打砖块" width="480" height="360">
    </a>
    <div class="desc">环绕版打砖块<p>在这个程序中，按下鼠标向鼠标方向发射小球，
		小球击中随机生成的砖块后砖块消失，小球反弹。清除所有砖块后切换场景。</p>
	  <p><a href="https://blog.youkuaiyun.com/weixin_74155302/article/details/131728872/">博客地址</a></p></div>
  </div>
</div>
	

	
</body>
</html>