关闭

HTML5---day3---之简单游戏(1)

401人阅读 评论(0) 收藏 举报
<!DOCTYPE HTML>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
	<script type="text/javascript">
		var backgroundForestImg=new Image();//forest background;
		var mushroomImg=new Image();// mushroom
		var ctx;
		var screenWidth;//画布宽度
		var screenHeight;
		
		function GameObject(){
			this.x=0;
			this.y=0;
			this.image=null;
		}
		function Mushroom(){};
		Mushroom.prototype=new GameObject();
		var mushroom=new Mushroom();
		
		function gameLoop(){
		ctx.clearRect(0,0,screenWidth,screenHeight);
		ctx.save();
		ctx.drawImage(backgroundForestImg,0,0);
		ctx.drawImage(mushroom.image,mushroom.x,mushroom.y);
		ctx.restore();
		}
		function loadImages(){
			mushroomImg.src="images/mushroom.png";
			backgroundForestImg.src="images/forest1.jpg";
		}
		function AddEventHandlers(){
			$("#container").mousemove(function(e){
			mushroom.x=e.pageX-(mushroom.image.width/2);
		});
		}
		$(window).ready(function(){
			AddEventHandlers();
			loadImages();
			ctx=document.getElementById('canvas').getContext('2d');
			
			screenWidth=parseInt($("#canvas").attr("width"));
			screenHeight = parseInt($("#canvas").attr("height"));   
			mushroom.image = mushroomImg;   
			mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标  
			mushroom.y = screenHeight - 40;//蘑菇Y坐标    
			setInterval(gameLoop, 10); 
		});
	</script>
</head>
<body>
	<div id="container" style="border:1px solid;cursor:none;width: 480px;height:320px;">
	<canvas id="canvas" width="480px" height="320px"></canvas>
	</div>
</body>


 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:358104次
    • 积分:3485
    • 等级:
    • 排名:第9559名
    • 原创:79篇
    • 转载:30篇
    • 译文:2篇
    • 评论:49条
    文章分类
    最新评论