• 第九讲:HTML5该canvas推箱子原型实现


    <html>
    	<head>
    		<title>动</title>
    		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
    		<style type="text/css">
    			body{margin:0px;padding:0px;}
    			#main{margin: 100 auto 0 auto;border: 10px solid #030303;300px;height:460px;border-radius:10px;}
    		</style>
    	</head>
    	
    	<body>
    		<div id="main">
    			<canvas id="mc" width="300px" height="460px">
    			</canvas>
    		</div>
    		<script type="text/javascript">
    			var canvas = document.getElementById('mc');
    			var cxt = canvas.getContext('2d');
    			//定义背景的颜色
    			function init_background(){
    				cxt.fillStyle = "#6A6C6C";
    				cxt.fillRect(0,0,canvas.width,canvas.height);
    				cxt.fill();
    			}
    			//定义移动的红方块
    			var red_diamond = {
    				x : 200,
    				y : 100,
    				width : 20,
    				height : 20,
    				color : "#FC0000"
    			}
    			//初始化红小方块的方法
    			function  init_red_diamond(){
    				cxt.fillStyle = red_diamond.color;
    				cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    				cxt.fill();
    			}
    			//定义将被空方块移动的黄方块
    			var yellow_diamond = {
    				x : 100,
    				y : 200,
    				width : 20,
    				height : 20,
    				color : "#F2FA0A"
    			}
    			//初始化黄小方块的方法
    			function  init_yellow_diamond(){
    				cxt.fillStyle = yellow_diamond.color;
    				cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    				cxt.fill();
    			}
    			//消除黄小方块的方法
    			function clear_yellow_diamond(){
    				cxt.fillStyle = "#6A6C6C";
    			  cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    			 	cxt.fill();
    			}
    			//消除红小方块的方法
    			function clear_red_diamond(){
    				cxt.fillStyle = "#6A6C6C";
    			  cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    			 	cxt.fill();
    			}
    			//定义四个方法,分别控制红小方块四个方向的移动
    			function move_right_red_diamond (){//右边
    				if(red_diamond.x + red_diamond.width + 5 <= canvas.width){	
    					//清除曾经的方块
    			  	clear_red_diamond();
    			  	cxt.fillStyle = red_diamond.color;
    			  	red_diamond.x += 20;
    			  	cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    			  	cxt.fill();
    		  	}
    			}
    			function move_left_red_diamond(){
    				if(red_diamond.x - 5 >= 0 ){
    					//清除曾经的方块
    			  	clear_red_diamond();
    			  	cxt.fillStyle = red_diamond.color;
    			  	red_diamond.x -= 20;
    			  	cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			function move_up_red_diamond(){
    				if(red_diamond.y - 5 >= 0 ){
    					//清除曾经的方块
    			  	clear_red_diamond();
    			  	cxt.fillStyle = red_diamond.color;
    			  	red_diamond.y -= 20;
    			  	cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			function move_down_red_doamond(){
    				if(red_diamond.y + red_diamond.height + 5 <= canvas.height){	
    					//清除曾经的方块
    			  	clear_red_diamond();
    			  	cxt.fillStyle = red_diamond.color;
    			  	red_diamond.y += 20;
    			  	cxt.fillRect(red_diamond.x,red_diamond.y,red_diamond.width,red_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			//定义一个方法用户推断红方块在小方块的哪一方
    			var red_diamond_to_yellow_diamond = "";
    			function red_diamond_position (){
    				if(red_diamond.x + red_diamond.width == yellow_diamond.x && red_diamond.y == yellow_diamond.y){
    					red_diamond_to_yellow_diamond = "left";
    				}
    				if(red_diamond.x == yellow_diamond.x + yellow_diamond.width && red_diamond.y == yellow_diamond.y){
    					red_diamond_to_yellow_diamond = "right";
    				}
    				if(red_diamond.y + red_diamond.height == yellow_diamond.y && red_diamond.x == yellow_diamond.x){
    					red_diamond_to_yellow_diamond = "top";
    				}
    				if(red_diamond.y == yellow_diamond.y + yellow_diamond.height && red_diamond.x == yellow_diamond.x){
    					red_diamond_to_yellow_diamond = "down";
    				}
    			}
    			//定义四个方法来移动黄色小方块
    			function move_right_yellow_diamond (){//右边
    				if(yellow_diamond.x + yellow_diamond.width + 5 <= canvas.width){	
    					//清除曾经的方块
    			  	clear_yellow_diamond();
    			  	cxt.fillStyle = yellow_diamond.color;
    			  	yellow_diamond.x += 20;
    			  	cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    			  	cxt.fill();
    		  	}
    			}
    			function move_left_yellow_diamond(){
    				if(yellow_diamond.x - 5 >= 0 ){
    					//清除曾经的方块
    			  	clear_yellow_diamond();
    			  	cxt.fillStyle = yellow_diamond.color;
    			  	yellow_diamond.x -= 20;
    			  	cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			function move_up_yellow_diamond(){
    				if(yellow_diamond.y - 5 >= 0 ){
    					//清除曾经的方块
    			  	clear_yellow_diamond();
    			  	cxt.fillStyle = yellow_diamond.color;
    			  	yellow_diamond.y -= 20;
    			  	cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			function move_down_yellow_doamond(){
    				if(yellow_diamond.y + yellow_diamond.height + 5 <= canvas.height){	
    					//清除曾经的方块
    			  	clear_yellow_diamond();
    			  	cxt.fillStyle = yellow_diamond.color;
    			  	yellow_diamond.y += 20;
    			  	cxt.fillRect(yellow_diamond.x,yellow_diamond.y,yellow_diamond.width,yellow_diamond.height);
    			  	cxt.fill();
    			  }
    			}
    			
    			//获取键盘点击的事件,以推断小方块想哪里移动
    			var direction = "";  
        	document.onkeydown = function (e) { 
        		red_diamond_position(); 
    			  if (e.keyCode == 39 ){
    			  	if(red_diamond_to_yellow_diamond == "left" && red_diamond.x + red_diamond.width * 2 + 5 <= canvas.width ){
    			  		move_right_yellow_diamond();		
    			  		move_right_red_diamond();
    			  	}else{
    			  		if(red_diamond_to_yellow_diamond != "left"){
    			  			red_diamond_to_yellow_diamond = "";
    			  			move_right_red_diamond();
    			  		}	
    			  	}
    			  };  
    	      if (e.keyCode == 37 ) {
    	      	if(red_diamond_to_yellow_diamond == "right" && red_diamond.x - 5 - red_diamond.width >= 0){
    	      		move_left_yellow_diamond();		
    			  		move_left_red_diamond();
    	      	}else{
    	      		if(red_diamond_to_yellow_diamond != "right"){
    	      			move_left_red_diamond();
    	      			red_diamond_to_yellow_diamond = "";
    	      		}
    	      	}
    	      };  
    	      if (e.keyCode == 38 ){
    	      	if(red_diamond_to_yellow_diamond == "down" && red_diamond.y - 5 - red_diamond.height >= 0){
    	      		move_up_yellow_diamond();
    	      		move_up_red_diamond();
    	      	}else{
    	      		if(red_diamond_to_yellow_diamond != "down"){
    		      		move_up_red_diamond();	      		
    		      		red_diamond_to_yellow_diamond = "";
    	      		}
    	      	}
    	      };  
    				if (e.keyCode == 40 ){
    					if(red_diamond_to_yellow_diamond == "top" && red_diamond.y + red_diamond.height * 2 + 5 <= canvas.height){
    	      		move_down_yellow_doamond();	
    	      		move_down_red_doamond();
    	      	}else{
    	      		if(red_diamond_to_yellow_diamond != "top"){
    	      			move_down_red_doamond();
    	      			red_diamond_to_yellow_diamond = "";
    	      		}
    	      	}
    				};  
    			}
    			//初始化
    			init_background();
    			init_red_diamond();
    			init_yellow_diamond();
    			move_diamond();
    		</script>
    	</body>
    </html>
    
    
    


    版权声明:本文博主原创文章,博客,未经同意不得转载。

  • 相关阅读:
    ov5640调试过程
    关于OnPaint函数的工作原理(很详细,很实用) [转载]
    机器视觉网络资源
    (转)signaltap II数据用于仿真
    DataSocket简介
    datasocket使用网络传输图像
    共享变量/全局变量/datasocket
    [转载] 任意频率分频原理
    [转]影响FPGA设计中时钟因素的探讨
    生产者和消费者
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4855750.html
Copyright © 2020-2023  润新知