//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;
}
}
}
h5愛心魚 第一階段 果實為什么沒有出現呢? 求大神幫忙看看
realwds
2017-11-22 10:56:06
