html5游戏开发之-----祖玛小游戏<原创>

最新推荐文章于 2022-08-10 08:30:01 发布

Baron_dream

最新推荐文章于 2022-08-10 08:30:01 发布

阅读量2.7k

点赞数 3

分类专栏： JScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_32207471/article/details/51232452

版权

这篇博客分享了如何利用HTML5的Canvas和JavaScript来开发一款祖玛小游戏。作者强调了在面对大量代码时，应先构建整体框架，再分块开发，采用模块化设计思路，逐步攻克难关。博客中提供了详细的代码实现，包括小球运动、碰撞检测和青蛙旋转等功能。

摘要由CSDN通过智能技术生成

</pre><pre name="code" class="javascript">

</pre><pre name="code" class="javascript">

</pre><pre name="code" class="javascript">

/*祖玛小游戏相信很多人玩过,
		今天我尝试在html5的画布上尝试用js写了一个小游戏,
		开过过程的感悟是:
		遇到一堆代码的时候,应该首先得出一个整体的框架
		然后根据这个粗略的框架进行分块开发
		即使刚开始的时候毫无头绪
		也要即刻动手
		昨天在看jQuery源码的时候
		看着8千行的代码
		如果硬着头皮从第一行开始看
		保证过不了多久便放弃了
		正确的做法是
		从刚开始通读全文划分功能块
		先从简单的或者跟现有知识相关联的入手
		然后各个击破
		在每一个板块集中全部精力攻克
		不想其他的模块或者是整体
		这应该是模块化设计的东西吧
		这才是真理..........嘿嘿 */



<!DOCTYPE html>
		
	

<html>
	<head>
		<meta charset="UTF-8">
		
		<title></title>
		<style type="text/css">
		*{margin: 0; padding: 0;}
		body{background: black;}
		#div1{background:white; width: 600px; margin: 20px auto;}
		</style>
		<script type="text/javascript">
		window.οnlοad=function(){
			//加载画布
			var oC=document.getElementById('c1');
			var oGc=oC.getContext('2d');  //有这句话才能在画布上写东西
			var i=0;
			var iRotate=0; //青蛙旋转速度
			
			var yImg=new Image();  //加载青蛙
			
			yImg.src='img/person.