HTML5---day3---之简单游戏（1）

西门呀在吹雪

发布于 2020-11-09 09:49:43

3080

发布于 2020-11-09 09:49:43

文章被收录于专栏：架构之巅

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2012/03/31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

游戏