超级玛丽HTML5源代码学习------(一）

最新推荐文章于 2024-08-20 17:56:02 发布
最新推荐文章于 2024-08-20 17:56:02 发布
阅读量8k 收藏 3
点赞数 2
分类专栏： 超级玛丽源代码分析 
<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />


<title>My first Game</title>

<style type="text/css">
body {
	/** 边框：无 0像素 */
	border:none 0px;
	/** 边外补白：向外填充0像素 */
	margin:0px;
	/** 向内填充：向内填充0像素 距上级边框0像素 */
	padding:10px;
	/** 设置字体大小 16px = 1em */
	font-size : 16px;
	background-color : #f3f3f3;
}
/** 画布 canvas */
canvas {
	/** 边框：1像素 实线 蓝色 */
	border : 1px solid blue; 
}
</style>


<script type="text/javascript">


function init(){
	
	// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
	var canvas=document.createElement("canvas");
	//设置canvas对象的高度和宽度
	canvas.width=600;
	canvas.height=400;
	//将canvas加入到body的末尾
	document.body.appendChild(canvas);
		
	// 取得2d绘图上下文 
	// context是一个封装了很多绘图功能的对象
	// 获取这个对象的方法是var context =canvas.getContext("2d");
	// html5 目前好像只提供2D服务，它还是处女
	var context= canvas.getContext("2d");
	
	// 加载图片,加载后在context上进行绘制. (图片是异步加载,所以在onload事件里进行绘制)
	var image = new Image();
	//获取图像地址
	image.src = "../res/bg.png";
	//image的onload事件
	image.οnlοad=function(event){
		var loadedImg=event.target;
		// 将加载后的图片,绘制在画布坐标[dx,dy]处,也就是图片的左上角坐标为[dx,dy]
		//就是从左上角（0,0）开始绘制，高度为400.宽度为600
		var dx=0, dy=0 ;
		//加载图片后再context上进行绘制。
		//绘制图像，drawImage有三种方法，
		context.drawImage(loadedImg,dx,dy);
	};

}


</script>

</head> 
<body οnlοad="init()"> 


<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>



 

对于canvas画布的深度学习：
 

</pre><pre name="code" class="html">绘图 context.drawImage

    context.drawImage(image,x,y)

        image:Image对象var img=new Image(); img.src="url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

    context.drawImage(image,x,y,w,h)

        image:Image对象var img=new Image(); img.src="url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

        w:绘制图像的宽度

        h:绘制图像的高度

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

        image:Image对象var img=new Image(); img.src="url(...)";

        sx：图像上的x坐标

        sy：图像上的y坐标

        sw：矩形区域的宽度

        sh：矩形区域的高度

        dx：画在canvas的x坐标

        dy：画在canvas的y坐标

        dw：画出来的宽度

        dh：画出来的高度
 

 



<script type="text/javascript">

        //drawImage(image,x,y)
        function draw28(id) {

            var image = new Image();

            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);

            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";

            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image,0,0);
            }
        }

        //drawImage(image,x,y,w,h)
        function draw12(id) {
          
            var image = new Image();

            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);

            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";
           
            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image, 50, 50, 300, 200);
            }
        }

        //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
        function draw13(id){
            var image = new Image();
            image.src = "Image/html5.jpg";
            var canvas = document.getElementById(id);
           
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            context.fillStyle = "#EEEEFF";
          
            context.fillRect(0, 0, 400, 300);
            image.onload = function () {
                context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
            }
        }
</script>
 

 关于canvas学习的详细地址： 

 

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

 

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

                

        

        

    

  


    

      

        

            

              
                
                  wust小吴
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
html超级玛丽游戏源码,超级玛丽HTML5源代码学习------(一）

				
			

			

				

					weixin_33111267的博客
				

				

					05-31
					
					2673
					
				

			

		

		

			
				
My first Gamebody {/** 边框：无 0像素 */border:none 0px;/** 边外补白：向外填充0像素 */margin:0px;/** 向内填充：向内填充0像素 距上级边框0像素 */padding:10px;/** 设置字体大小 16px = 1em */font-size : 16px;background-color : #f3f3f3;}/** 画布 can...

			
		

	



                

              
                



	

		

			

				
					
超级玛丽游戏源码

				
			

			

				

					07-20
				

			

		

		

			
				
超级玛丽游戏源码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

			
		

	



                


  
              

                


	

		

			

				
					
超级马里奥HTML5

				
			

			

				

					10-24
				

			

		

		

			
				
这是一款用HTML5开发的超级马里奥

			
		

	





	

		

			

				
					
HTML5超级玛丽源代码

				
			

			

				

					09-22
				

			

		

		

			
				
html5 canvas +js制作的超级玛丽

			
		

	



		

			
		



	

		

			

				
					
用Python编写一个超级玛丽游戏|附源码

					
最新发布

				
			

			

				

					2301_78096295的博客
				

				

					08-20
					
					923
					
				

			

		

		

			
				
下面，我将详细讲解如何用Python编写一个简化版的超级玛丽游戏，包括所需的库、游戏逻辑、角色控制、关卡设计、碰撞检测等方面。以上是一个简化版的超级玛丽游戏的概述，包括了所需库、游戏逻辑、角色控制、关卡设计和碰撞检测的基本实现思路。实际开发中，还需要处理更多的细节，如动画、声音、敌人AI等。游戏逻辑包括游戏的启动、运行、结束等状态的管理。我们需要定义一个游戏主循环，在这个循环中处理用户的输入、更新游戏状态、渲染画面。web开发，Python爬虫，Python数据分析，人工智能、自动化办公等学习教程。

			
		

	





	

		

			

				
					
html5超级玛丽源代码

				
			

			

				

					10-03
				

			

		

		

			
				
html5超级玛丽源代码，很不错，值得一看。

			
		

	





	

		

			

				
					
HTML5超级玛丽小游戏源代码.zip

				
			

			

				

					09-04
				

			

		

		

			
				
多款HTML5 游戏源代码特辑，包括了捕鱼达人、植物僵尸、Solarmax、俄罗斯方块、扫雷、切水果、超级玛丽、三国杀、驴子跳、太空战舰、坦克大战等

			
		

	





	

		

			

				
					
超级玛丽游戏代码（HTML实现）

				
			

			

				

					01-15
				

			

		

		

			
				
超级玛丽游戏代码（HTML实现）

			
		

	





	

		

			

				
					
超级玛丽游戏源码.html

				
			

			

				

					07-15
				

			

		

		

			
				
自己有的资源拿出来分享虽然我不懂html。（）
这小游戏有3关。还是挺难的。
可以根据里面的代码自行添加几关
第一关被我改废了嘻嘻。代码一共796行。

			
		

	





	

		

			

				
					
超级玛丽HTML5源代码学习------(四)

				
			

			

				

					wust小吴
				

				

					07-28
					
					3164
					
				

			

		

		

			
				
每一个游戏都是由获得用户输入，更新游戏状态，处理AI，播放音乐和音效，还有画面显示这些行为组成。游戏主循环就是用来处理这个行为序列，在javascript中可以用setInterval方法来轮询。

			
		

	





	

		

			

				
					
超级玛丽HTML5源代码学习------(五)

				
			

			

				

					wust小吴
				

				

					07-29
					
					1815
					
				

			

		

		

			
				
今天主要学习 step3-2.html   这里没有什么可说的，主要实现的就是  玩家

			
		

	





	

		

			

				
					
超级玛丽HTML5源代码学习-----（三）

				
			

			

				

					wust小吴
				

				

					07-27
					
					1762
					
				

			

		

		

			
				
源代码：









My first Game


/** body 整个空间页面  */
body {
	/** 边框：无 0像素 */
	border:none 0px;
	/** 边外补白：向外填充0像素 */
	margin:0px;
	/** 向内填充：向内填充0像素 距上级边框0像素 */
	padding:10px;
	/** 设置字体大小 16px = 1em */
	f

			
		

	





	

		

			

				
					
超级玛丽源码

				
			

			

				

					06-15
				

			

		

		

			
				
我做的第一个横版过关游戏，VC实现，带三张地图。这是整个工程，包含了图片、代码所有资源，可直接编译运行，大家多鼓励。

			
		

	





	

		

			

				
					
HTML5超级玛丽小游戏源代码

				
			

			

				

					01-18
				

			

		

		

			
				
HTML5超级玛丽小游戏源代码

			
		

	





	

		

			

				
					
超级玛丽HTML5源代码学习------（二）

				
			

			

				

					wust小吴
				

				

					07-27
					
					2368
					
				

			

		

		

			
				
首先放置源代码：









My first Game


/** body 整个空间页面  */
body {
	/** 边框：无 0像素 */
	border:none 0px;
	/** 边外补白：向外填充0像素 */
	margin:0px;
	/** 向内填充：向内填充0像素 距上级边框0像素 */
	padding:10px;
	/** 设置字体大小 16px = 1em *

			
		

	





	

		

			

				
					
恐龙快跑(Flappy T-Rex)

				
			

			

				

					
				

				

					10-26
					
					9324
					
				

			

		

		

			
				
0、写在前面相信大家都了解过Google的Flappy T-Rex。一次偶然的机会，我也有幸在断网的情况下玩了几局，感觉就是一句话—“不愧是Google的作品”。在这里就不多夸奖Google和他的Flappy T-Rex如何如何牛X了，不了解的读者还请自行百度。 
由于那时候正在学Java和线程，觉得正好练下手，于是就有了这款山寨版的Dinosaur Run。当然使用Java写的，为了方便读者的学习

			
		

	





	

		

			

				
					
scratch编程项目源代码文件案例素材-超级玛丽.zip

				
			

			

				

					05-16
				

			

		

		

			
				
本压缩包“scratch编程项目源代码文件案例素材-超级玛丽.zip”提供了一个使用Scratch创作的“超级玛丽”游戏的源代码案例，适合初学者学习和探索。  首先，我们要了解Scratch的基本结构。在Scratch中，程序是由各种...

			
		

	





	

		

			

				
					
html超级玛丽-自制关卡

				
			

			

				

					09-04
				

			

		

		

			
				
嗨！如果你想制作一个 HTML 版本的超级玛丽自制关卡，你可以按照以下步骤进行：

1. 创建画布：在 HTML 文件中创建一个画布元素，可以使用 `<canvas>` 标签，并为其指定一个唯一的 ID。
```html
<canvas id="gameCanvas" width="800" height="600"></canvas>
```

2. 设计关卡地图：使用 JavaScript 绘制超级玛丽的关卡地图。你可以定义一个数组来表示每个方块的类型（如地面、墙壁、水管等），并根据数组的值在画布上绘制相应的元素。

3. 控制角色移动：使用 JavaScript 监听键盘事件，根据按键来控制超级玛丽的移动。你可以为超级玛丽定义一个对象，包含位置、速度等属性，并实时更新角色的位置。

4. 处理碰撞检测：在每一帧中，检测超级玛丽与地图中其他元素（如敌人、道具等）的碰撞情况。根据碰撞结果来决定是否改变超级玛丽的状态（如跳跃、收集道具等）或触发游戏结束条件。

5. 渲染画面：使用 JavaScript 中的绘图 API，在每一帧中更新画布上的元素，包括超级玛丽、敌人、道具等。

6. 添加游戏逻辑：为游戏添加更多的逻辑，如计分、生命值、关卡切换等。

以上是一个简要的步骤，你可以根据自己的需求和技术水平来进一步完善和优化。希望能帮到你！如果有更多问题，请随时提问。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值