//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GAME</title>
<link rel="stylesheet" type="text/css" href="css/clear.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<div>
<canvas id="canvas1" width="800px" height="600px">
</canvas>
<canvas id="canvas2" width="800px" height="600px">
</canvas>
</div>
</div>
<script type="text/javascript" src="js/action.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/background.js"></script>
<script type="text/javascript" src="js/ane.js"></script>
<script type="text/javascript" src="js/fruit.js"></script>
<script type="text/javascript" src="js/mom.js"></script>
<script type="text/javascript" src="js/collision.js"></script>
</body>
</html>
//action.jsvar can1,
can2;
var ctx1,
ctx2;
var lastTime,
deltaTime;
var canWidth,
canHeight;
var bgPic=new Image();
var ane,
fruit;
var mom;
var mx,
my;
document.body.onload=game;
function game(){
init();
lastTime=Date.now();
deltaTime=0;
gameloop();
}
function init(){
can1=document.getElementById("canvas1");
ctx1=can1.getContext('2d');
can2=document.getElementById("canvas2");
ctx2=can2.getContext('2d');
can1.addEventListener('mousemove',onMouseMove,false);
bgPic.src="./img/background.jpg";
canWidth=can1.width;
canHeight=can1.height;
ane=new aneObj();
ane.init();
fruit=new fruitObj();
fruit.init();
mom=new momObj();
mom.init();
mx=canWidth*0.5;
my=canHeight*0.5;
}
function gameloop(){
window.requestAnimFrame(gameloop);
var now=Date.now();
deltaTime=deltaTime<50?now-lastTime:50;//解决暂停网页，球无限变大bug
lastTime=now;
drawBackground();
ane.draw();
fruitMonitor();
fruit.draw();
ctx1.clearRect(0,0,canWidth,canHeight);
mom.draw();
momFruitCollision();
}
function onMouseMove(e){ //获取鼠标移动位置
if(e.offsetX||e.layerX){
mx=e.offsetX==undefined? e.layerX:e.offsetX;
my=e.offsetY==undefined? e.layerY:e.offsetY;
}
}//fruit.js
var fruitObj=function(){
this.isalive=[];
this.x=[];
this.y=[];
this.l=[];
this.spd=[];
this.fruitType=[];
this.orange=new Image();
this.blue=new Image();
}
fruitObj.prototype.num=30;
fruitObj.prototype.init=function(){
for(var i=0;i<this.num;i++){
this.isalive[i]=false;
this.x[i]=0;
this.y[i]=0;
this.spd[i]=Math.random()*0.017+0.003;
this.born(i);
this.fruitType[i]="";
}
this.orange.src="./img/fruit.png";
this.blue.src="./img/blue.png";
}
fruitObj.prototype.draw=function(){
for(var i=0;i<this.num;i++){
var pic;
if(this.isalive[i]){
if(this.fruitType[i]=="blue"){
pic=this.blue;
}else{
pic=this.orange;
}
if(this.l[i]<=14){
this.l[i]+=this.spd[i]*deltaTime;
}
else{
this.y[i]-=this.spd[i]*6*deltaTime;
}
ctx2.drawImage(pic,this.x[i]-this.l[i]*0.5,this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]);
if(this.y[i]<10){
this.isalive[i]=false;
}
}
}
}
fruitObj.prototype.born=function(i){
var aneID=Math.floor(Math.random()*ane.num);
this.x[i]=ane.x[aneID];
this.y[i]=canHeight-ane.len[aneID];
this.l[i]=0;
this.isalive=true;
var ran=Math.random();
if(ran<0.3){
this.fruitType[i]="blue";
}else{
this.fruitType[i]="orange";
}
}
fruitObj.prototype.dead=function(i){
this.isalive[i]=false;
}
function fruitMonitor(){
var num=0;
for(var i=0;i<fruit.num;i++){
if(fruit.isalive[i]) num++;
}
if(num<15){
sendFruit();
return;
}
}
function sendFruit(){
for(var i=0;i<fruit.num;i++){
if(!fruit.isalive[i]){
fruit.born(i);
return;
}
}
}
添加回答
举报
0/150
提交
取消