HTML5写的简单小游戏-绵羊快跑-优快云博客

本文提供了一段HTML5游戏开发代码，演示如何使用HTML、CSS、JavaScript创建一个简单的游戏——绵羊快跑。代码包括游戏初始化、地图绘制、绵羊和狼模型的实现以及游戏行为控制。

用HTML5仿一款灵敏测试的flash小游戏程序:

完整程序在我博客:http://meego123.net/post-61.html

游戏截图:

主要部分代码:

index.php

<?php
/*
*Author: Jamin
*
*Blog:http://meego123.net
*/
if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')){
	ob_start('ob_gzhandler');
}
?>
<!DOCTYPE html>
<html>
<head>
<title>绵羊快跑</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<noscript><iframe scr="*.htm"></iframe></noscript>
<link rel="stylesheet" type="text/css" media="all" href="css/index.css" />
</head>
<body oncontextmenu="return false">
<div id="container">
      <div id="info">
        <div id="wolf">Wolfs:<span id="wolfCounter">0</span></div>
        <div id="scorer">&nbsp;<!--Score:<span id="scoreCounter">0</span>--></div>
     </div>
     <div id="content">
     <div id="mask"></div>
     <div id="option">
     <div id="result"></div>
         <ul id="menu">
            <li id="start"><span>Start Game</span></li>
            <li id="helpMe"><span >Help</span></li>
        </ul>
        <div id="help">
            <ol>
                <li>按键：W、S、A、D 分别控制 上、下、左、右。</li>
                <li>说明：通过控制绵羊向四周跑动，避开狼群的追捕。</li>
                <li>胜利条件：坚持时间越长，狼群出现的数量越多，得分越高。</li>
                <li>作者：Jamin</li>
            </ol>
        </div>
     </div>
     <canvas id="map" width="800" height="600">
         你的浏览器不支持HTML5！建议使用IE9+、Chrome、Opera、FireFox、Safari 等浏览器 
     </canvas>
     </div>
</div>
</body>
</html>

js/game.js

/*
*Author: Jamin
*
*Blog:http://meego123.net
*/
/*游戏开始暂停*/
var gameRunning=false;

/*
 *地图大小
 */
var mapWidth=800;

var mapHeight=600;
/*
 * 绵羊模型
 * 单位px
 *sheepWidth   模型宽度
 *sheepHeight  模型高度
 *sheepX       起始横坐标
 *sheepY       起始枞坐标
 *sheepSpeed   移动速度
 *
 */
var	sheepWidth=40;

var	sheepHeight=27;

var sheepX=parseInt((mapWidth-sheepWidth)/2);

var sheepY=parseInt((mapHeight-sheepHeight)/2);

var sheepXspeed=0;

var sheepYspeed=0;
/*摩擦力*/
var sheepFriction=0.85;
/*
* 狼模型 
* wolfWidth   模型宽度
* wolfHeight  模型高度
* maxWolfs    狼群最大数量
* appearTime  狼出现时间间隔（默认3000毫秒）
*/
var wolfWidth=40;

var wolfHeight=27;

var maxWolfs=500;

var appearTime=2000;

var wolfXspeed=0;

var wolfYspeed=0;

var wolfRate=0;

var wolfFriction=0.80;
/*狼群*/
var wolfs=new Array();

/*方向键按键设置*/
var keyUp=87;

var moveUp=false;

var keyDown=83;

var moveDown=false;

var keyLeft=65;

var moveLeft=false;

var keyRight=68;

var moveRight=false;

/*
*score        积分
*wolfCounts   狼群数量
*/
var score=0;

var wolfCounts=1;

var context;


function init(){
	var map=document.getElementById('map');
	context=map.getContext('2d');
	drawMap();
	drawSheep();

	wolfTimeout=setTimeout(createWolfs,wolfRate+wolfCounts*3000);
	wolfRate+=wolfCounts*3000;
	drawWolfs();
}
function clearMap(){
	context.clearRect(0,0,mapWidth,mapHeight);
}
/*绘制地图*/
function drawMap(){
	clearMap();
}

/*绘制绵羊*/
function drawSheep(){
	var sheepImg=new Image();
	    sheepImg.src='images/lsheep.gif';
	 if(moveLeft){
		 sheepXspeed--;
	 }
	 if(moveRight){
		  sheepXspeed++;
		  sheepImg.src='images/rsheep.gif';
	 }
	 if(moveUp){
		  sheepYspeed--;
	 }
	 if(moveDown){
		  sheepYspeed++;
	 }
	context.drawImage(sheepImg,sheepX,sheepY);
	context.fill();
	/*移动距离计算*/
	 
	if(sheepX>=0&&sheepX<=(mapWidth-sheepWidth)){
		sheepX+=sheepXspeed;
	}else if(sheepX<0){
		sheepX+=Math.abs(sheepXspeed);
	}else if(sheepX>(mapWidth-sheepWidth)){
		sheepX-=Math.abs(sheepXspeed);
	}
	
	if(sheepY>=0&&sheepY<=(mapHeight-sheepHeight)){
		sheepY+=sheepYspeed;
	}else if(sheepY<0){
		sheepY+=Math.abs(sheepYspeed);
	}else if(sheepY>(mapHeight-sheepHeight)){
		sheepY-=Math.abs(sheepYspeed);
	}
	sheepXspeed*=sheepFriction;
	sheepYspeed*=sheepFriction;
}
/*增加狼群*/
function createWolfs(){
	/*0123 上下左右*/
	direction=parseInt(Math.random()*4);
	/*狼随机出现的x y 坐标*/
    wx=parseInt(Math.random()*(mapWidth-wolfWidth));
	wy=parseInt(Math.random()*(mapHeight-wolfHeight));
	
	var wolfObj=new Object();
	
	switch(direction){
		case 0:
			wolfObj.x=wx;
	        wolfObj.y=0;
		break;
		case 1:
			wolfObj.x=wx;
	        wolfObj.y=mapHeight-wolfHeight;
		break;
		case 2:
			wolfObj.x=0;
	        wolfObj.y=wy;
		break;
		case 3:
			wolfObj.x=mapWidth-wolfWidth;
	        wolfObj.y=wy;
		break;
	}
	wolfs.push(wolfObj);
	clearTimeout(wolfTimeout);
}

function drawWolfs(){
	var wolfCounter=document.getElementById("wolfCounter");
	wolfCounter.innerHTML=wolfCounts;
	for(i=0;i<=wolfCounts;i++){
		 var wolf=new Image();
	     wolf.src="images/lwolf.gif";

		if(wolfs[i].x>sheepX){
			wolfXspeed--;
		}else{
			wolfXspeed++;
			wolf.src="images/rwolf.gif";
		}
		
		if(wolfs[i].y>sheepY){
			wolfYspeed--;
		}else{
			wolfYspeed++;
		}
		
		context.drawImage(wolf,wolfs[i].x,wolfs[i].y);
		
		
		if(Math.abs(wolfs[i].x-sheepX)<=parseInt(sheepWidth)&&Math.abs(wolfs[i].y-sheepY)<=parseInt(sheepHeight)){
			catchSheep();
		}else{
			wolfs[i].x+=wolfXspeed;
			wolfs[i].y+=wolfYspeed;
		}
		wolfXspeed*=sheepFriction*0.8;
	    wolfYspeed*=sheepFriction*0.8;
	}
	wolfCounts++;
}

/*游戏开关*/
function ToggleGameplay()   
{   
    if(gameRunning)   
    {
        begin=setInterval(init,30);
    }
	else
	{   
        clearInterval(begin);   
    }   
}
/*被捕*/
function catchSheep(){
	$('#mask').show();
	$('#result').text('你被捕了！最大狼数：'+$('#wolfCounter').text());
	$('#start').text('Try again');
	$('#option').show();
	clearInterval(begin);
	clearTimeout(wolfTimeout);
	wolfCounts=0;
	wolfs=Array();
	sheepX=parseInt((mapWidth-sheepWidth)/2);
    sheepY=parseInt((mapHeight-sheepHeight)/2);
}

/*监听游戏行为*/
$(document).ready(function(){
	$('#mask').css({'width':mapWidth+'px','height':mapHeight+'px'}).fadeIn();
	$('#option').show();
	
	$('#start').click(function(){
		$('#mask').hide();
		$('#option').hide();		
		gameRunning=true;
		ToggleGameplay();
	})
	
	$('#menu li').hover(function(){
		$(this).css({'background-color':'#E8E8E8','color':'#FF0000','font-size':'36px','font-style':'normal','cursor':'pointer'});
	},function(){
		$(this).css({'color':'#FFFFFF','background-color':'transparent','font-size':'32px','font-style':'italic'});
	});
	
	var helpOn=1;
	$('#helpMe').click(function(){
		if(helpOn==1){
			$('#help').fadeIn();
		}else{
			$('#help').fadeOut();
		}
		helpOn=helpOn==1?0:1
	})
	
	/*方向控制键监听*/
	$(document).keydown(function(event){
		 switch(event.keyCode){
			  case keyLeft:
				   moveLeft=true;
				   break; 
			  case keyUp:
				   moveUp=true;
				   break;
			  case keyRight:
				   moveRight=true;
				   break;
			  case keyDown:
				   moveDown=true;
				   break; 
		 } 
	});
	
	$(document).keyup(function(event){
		 switch(event.keyCode){
			  case keyLeft:
				   moveLeft=false;
				   break; 
			  case keyUp:
				   moveUp=false;
				   break;
			  case keyRight:
				   moveRight=false;
				   break;
			  case keyDown:
				   moveDown=false;
				   break; 
		 } 
	});
})

转载于:https://my.oschina.net/jamin/blog/24465