软件工程:状态,行为,事件+按键处理

最新推荐文章于 2022-05-01 15:40:23 发布

钢七连软件实战技术

最新推荐文章于 2022-05-01 15:40:23 发布

阅读量680

点赞数

分类专栏： javaee和数据库文章标签：软件工程状态转换

本文链接：https://blog.csdn.net/weixin_42644456/article/details/103148881

版权

javaee和数据库专栏收录该内容

27 篇文章 0 订阅

订阅专栏

继续上一篇教程。

增加功能：

1. 两张超级玛丽素材图片。按方向键，切换朝左朝右。

2. 按左右键，向左右移动。

3.按空格键，跳。在跳的过程中，按空格键无效。

在跳的状态下，不再处理事件“按空格”。

游戏数据在不同状态下，有不同的刷新修改方法（行为）。不同的状态，能接收的按键、事件不一样。达到特定的事件、条件、时间计数（比如技能冷却、技能有效时间等），切换为新的状态。

应用软件的状态也是如此，订单的状态，图书借阅的状态，送餐的状态。

截图：

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!-- <img id="role_png" src="mario.png" alt="The Tulip" /> -->
<canvas width="500" height="300"
		style="border:2px solid blue;"  id="game1"></canvas>aa

<script type="text/javascript">
	//获取绘图环境
	var  paints = document.getElementById('game1').getContext('2d');
 	//图片素材
 	var img = new Image();
    img.src = "mario.png";
    var img2 = new Image();
    img2.src = "marioleft.png";
    // 等待加载完成再绘制
    img.onload = function(){
        paints.drawImage(img, 0,0,50, 50);
        alert("加载完毕");
        // 版权声明：本文为CSDN博主「疯一样的雨」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
		// 原文链接：https://blog.csdn.net/u013564742/article/details/85077633
    }
    alert("游戏编程");
    console.log("path is "+img.src)


    var x=0;
    var y=254;
    var max_y=254;
	var  cnt=0;
	var   jump_cnt=1;
	var w=500;
	var h=300;
	var direction=1;	//1 right

	var	state=0;//0 normal; 2 jump
	
	function  paintback(x, y,w,h){
					//绘制背景，覆盖上一帧画面
					paints.fillStyle='#ccddbb'; 
	                paints.fillRect(x, y,w,h );
	            }
	function  paintfr(x, y){
	                paints.drawImage(direction==1? img: img2, x, y);
	            }
            //
    function 	checkcollision()
	{
		if( x<0)
		{
			x=0;direction=1;
		}
		if( x> w-40)
		{
			x=w-40;direction=-1;
		}
	}
	function 	gameupdate()
	{
		cnt++;	//计数器 
		 
		if( state == 2)
		{ 
			x+= direction *10;
			
			y=  (jump_cnt-7)*(jump_cnt-7)*4+(max_y-49*4); //曲线+最高点y

			jump_cnt++;
			if(jump_cnt>14)
			{
				state =0;	//状态改变
				y= max_y;	//恢复为 normal
			}
		}
		
		checkcollision();
		  paintback(0, 0, w,h);
		 paintfr(x, y);
		 //console.log("x "+x);
		 
	}
	 //方向键功能函数。 按键松开，触发事件
        document.onkeyup =function(e){   
             
            switch(e.keyCode){
				 case 37:  // 方向为左
					direction=-1;
					x+=direction *10; // 系数 1 right; -1,left
                    break;
                case 39:  // 方向为右 
                	direction=1;
                	x+=direction *10; // 系数 1 right; -1,left
                	break;
                case 32:  // 空格 
                   
                   if( state != 2)
                   {
                   		state=2;	
                   		 jump_cnt=1;	//初始化
                   }
                   
                    break;
                }
                gameupdate();
            }
	//启动计时器
setInterval("gameupdate()" , 300);
</script>
</body>
</html>

多个状态，不同的行为，事件。事件包括条件判断、按键、鼠标操作、计时器的时间限制，这些事件导致状态的改变。