前面看了我文章的朋友们估计也能知道我在哪里学习了，快期末考试了，大部分时间要拿来复习。唉，实在是累啊，没有精力看视频学习了，今天就把自己以前跟着做的小游戏拿出来，记录一下吧~
<html>
<head>
<meta charset="utf-8">
<title>爱心鱼</title>
<style type="text/css">
body{
padding-top: 10px;
}
.all_bg{
width: 800px;
height: 600px;
margin: 0px auto;
}
#allCanves{
position: relative;;
width: 800px;
height: 600px;
margin: 0px;
}
#canvas1{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
#canvas2{
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="_blank">有问题请百度</a></li>
<li><a href="mailto:1171694317@qq.com?subject=意见">小川的邮箱</a></li>
</ul>
<div class="all_bg">
<div id="allCanves">
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
</div>
</div>
<script type="text/javascript" src="js/main.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>
<script type="text/javascript" src="js/baby.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/wave.js"></script>
<script type="text/javascript" src="js/dust.js"></script>
</body>
</html>背景：
function drawbackground(){
ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
function calLength2(x1, y1, x2, y2) {
return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
}
function randomColor() {
var col = [0, 1, 2];
col[0] = Math.random() * 100 + 155;
col[0] = col[0].toFixed();
col[1] = Math.random() * 100 + 155;
col[1] = col[1].toFixed();
col[2] = Math.random() * 100 + 155;
col[2] = col[2].toFixed();
var num = Math.floor(Math.random() * 3);
col[num] = 0;
return "rgba(" + col[0] + "," + col[1] + "," + col[2] + ",";
}
function lerpAngle(a, b, t) {
var d = b - a;
if (d > Math.PI) d = d - 2 * Math.PI;
if (d < -Math.PI) d = d + 2 * Math.PI;
return a + d * t;
}
function lerpDistance(aim, cur, ratio) {
var delta = cur - aim;
return aim + delta * ratio;
}
function inOboundary(arrX, arrY, l, r, t, b) { //在l r t b范围内的检测
return arrX > l && arrX < r && arrY > t && arrY < b;
}
function rgbColor(r, g, b) {
r = Math.round(r * 256);
g = Math.round(g * 256);
b = Math.round(b * 256);
return "rgba(" + r + "," + g + "," + b + ",1)";
}
function rgbNum(r, g, b) {
r = Math.round(r * 256);
g = Math.round(g * 256);
b = Math.round(b * 256);
return "rgba(" + r + "," + g + "," + b;
}
function rnd(m) {
var n = m || 1;
return Math.random() * n;
}
function rateRandom(m, n) {
var sum = 0;
for (var i = 1; i < (n - m); i++) {
sum += i;
}
var ran = Math.random() * sum;
for (var i = 1; i < (n - m); i++) {
ran -= i;
if (ran < 0) {
return i - 1 + m;
}
}
}
function distance(x1, y1, x2, y2, l) {
var x = Math.abs(x1 - x2);
var y = Math.abs(y1 - y2);
if (x < l && y < l) {
return true;
}
return false;
}
function AABBbox(object1, w1, h1, object2, w2, h2, overlap) {
A1 = object1.x + overlap;
B1 = object1.x + w1 - overlap;
C1 = object1.y + overlap;
D1 = object1.y + h1 - overlap;
A2 = object2.x + overlap;
B2 = object2.x + w2 - overlap;
C2 = object2.y + overlap;
D2 = object2.y + h2 - overlap;
if (A1 > B2 || B1 < A2 || C1 > D2 || D1 < C2) return false;
else return true;
}
function dis2(x, y, x0, y0) {
var dx = x - x0;
var dy = y - y0;
return dx * dx + dy * dy;
}
function rndi2(m, n) {
var a = Math.random() * (n - m) + m;
return Math.floor(a);
}主函数：
var can1;
var can2;
var ctx1;
var ctx2;
var canWidth;
var canHeight;
var lastTime;
var deltaTime;
var ane;
var fruit;
var mom;
var baby;
var mx;
var my;
var babyTail=[];
var babyEye=[];
var babyBody=[];
var momTail=[];
var momEye=[];
var momBodyOrange=[];
var momBodyBlue=[];
var data;
var wave;
var dust;
var dustPic=[];
var bgPic=new Image();
document.body.οnlοad=game;
function game()
{
init();
lastTime=Date.now();
deltaTime=0;
gameloop();
}
function init(){
//获得canves context
can1=document.getElementById("canvas1");//fishes,dust,ui
ctx1=can1.getContext('2d');
can2=document.getElementById("canvas2");
ctx2=can2.getContext('2d');
can1.addEventListener('mousemove',onMouseMove,false);
bgPic.src="./src/background.jpg";
canWidth=can1.width;
canHeight=can1.height;
ane=new aneObject();
ane.init();
fruit=new fruitObj();
fruit.init();
mom=new momObj();
mom.init();
baby=new babyObj();
baby.init();
wave=new waveObj;
wave.init();
mx=canWidth*0.5;
my=canHeight*0.5;
dust=new dustObj();
dust.init();
for(var i=0;i<7;i++){
dustPic[i]=new Image();
dustPic[i].src="./src/dust"+i+".png";
}
for(var i=0;i<8;i++){
babyTail[i]=new Image();
babyTail[i].src="./src/babyTail"+i+".png";
}
for( var i=0;i<2;i++){
babyEye[i]=new Image();
babyEye[i].src="./src/babyEye"+i+".png";
}
for(var i=0;i<20;i++){
babyBody[i]=new Image;
babyBody[i].src="./src/babyFade"+i+".png";
}
for(var i=0;i<8;i++){
momTail[i]=new Image();
momTail[i].src="./src/bigTail"+i+".png";
}
for( var i=0;i<2;i++){
momEye[i]=new Image();
momEye[i].src="./src/bigEye"+i+".png";
}
data=new dataObj();
for(i=0;i<8;i++){
momBodyOrange[i]=new Image;
momBodyBlue[i]=new Image;
momBodyOrange[i].src="./src/bigSwim"+i+".png";
momBodyBlue[i].src="./src/bigSwimBlue"+i+".png";
}
ctx1.font="30px Verdana";
ctx1.textAlign="center";
}
function gameloop(){
requestAnimFrame(gameloop);
var now=Date.now();
deltaTime=now-lastTime;
lastTime=now;
if(deltaTime>40) deltaTime=40;
drawbackground();
ane.draw();
fruitMonitor();
fruit.draw();
ctx1.clearRect(0,0,canWidth,canHeight);
mom.draw();
baby.draw();
momFruitCollision();
momBabycollision();
data.draw();
wave.draw();
dust.draw();
}
function onMouseMove(e){
if(!data.gameOver){
if(e.offSetX||e.layerX){
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.offSetY;
}
}
}var aneObject=function(){
this.rootx=[];
this.headx=[];
this.heady=[];
this.amp=[];
this.alpha=0;
}
aneObject.prototype.num=50;
aneObject.prototype.init=function(){
for(var i=0;i<this.num;i++){
this.rootx[i]=i*16+Math.random()*20;
this.headx[i]=this.rootx[i];
this.heady[i]=canHeight-250+Math.random()*50;
this.amp[i]=Math.random()*50+50;
}
}
aneObject.prototype.draw=function(){
this.alpha+=deltaTime*0.0008;
var l=Math.sin(this.alpha);
ctx2.save();
ctx2.globalAlpha=0.6;
ctx2.strokeStyle="#3b1541";
ctx2.lineWidth=20;
ctx2.lineCap="round";
for (var i=0;i<this.num;i++){
ctx2.beginPath();
ctx2.moveTo(this.rootx[i],canHeight);
ctx2.quadraticCurveTo(this.rootx[i],canHeight-100,this.headx[i]+l*this.amp[i],this.heady[i]);
ctx2.stroke();
}
ctx2.restore();
}
var fruitObj=function(){
this.alive=[];
this.x=[];
this.y=[];
this.l=[];
this.fruitType=[];
this.spd=[];
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.alive[i]=false;
this.x[i]=0;
this.y[i]=0;
this.spd[i]=Math.random()*0.017+0.003;
this.fruitType[i]="";
}
this.orange.src="./src/fruit.png";
this.blue.src="./src/blue.png";
}
fruitObj.prototype.draw=function()
{
for(var i=0;i<this.num;i++)
{
if (this.alive[i]) {
if(this.fruitType[i]=="blue")
{
var pic=this.blue;
}
else
{
var 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.alive[i]=false;
}
}
}
}
fruitObj.prototype.born=function(i)
{
var aneID=Math.floor(Math.random()*ane.num);
this.x[i]= ane.headx[aneID];
this.y[i]= ane.heady[aneID];
this.l[i]=0;
this.alive[i]=true;
var ran=Math.random();
if(ran<0.2){
this.fruitType[i]="blue";
}
else
{
this.fruitType[i]="orange";
}
}
fruitObj.prototype.dead=function(i)
{
this.alive[i]=false;
}
function fruitMonitor(){
var num=0;
for(var i=0;i<fruit.num;i++){
if(fruit.alive[i]) num++;
}
if(num<15){
sendFruit();
return;
}
}
function sendFruit(){
for(var i=0;i<fruit.num;i++){
if(!fruit.alive[i]){
fruit.born(i);
return;
}
}
}
大鱼：
var momObj=function(){
this.x;
this.y;
this.angle;
this.momTailTimer=0;
this.momTailCount=0;
this.momEyeTimer=0;
this.momEyeCount=0;
this.momEyeInterval=1000;
this.momBodyCount=0;
}
momObj.prototype.init=function(){
this.x=canWidth*0.5;
this.y=canHeight*0.5;
this.angle=0;
}
momObj.prototype.draw=function(){
this.x=lerpDistance(mx,this.x,0.9);
this.y=lerpDistance(my,this.y,0.9);
var deltaY=my-this.y;
var deltaX=mx-this.x;
var beta=Math.atan2(deltaY,deltaX)+Math.PI;
this.angle=lerpAngle(beta,this.angle,0.9);
this.momTailTimer+=deltaTime;
if(this.momTailTimer>50){
this.momTailCount=(this.momTailCount+1)%8;
this.momTailTimer%=50;}
//momEye
this.momEyeTimer+=deltaTime;
if(this.momEyeTimer>this.momEyeInterval){
this.momEyeCount=(this.momEyeCount+1)%2;
this.momEyeTimer%=this.momEyeInterval;
if(this.momEyeCount==0){
this.momEyeInterval=Math.random()*1500+2000;
}else{
this.momEyeInterval=200;
}
}
ctx1.save();
ctx1.translate(this.x,this.y);
ctx1.rotate(this.angle);
var momTailCount=this.momTailCount;
ctx1.drawImage(momTail[momTailCount],-momTail[momTailCount].width*0.5+30,-momTail[momTailCount].height*0.5);
var momBodyCount=this.momBodyCount;
if(data.double==1){
ctx1.drawImage(momBodyOrange[momBodyCount],-momBodyOrange[momBodyCount].width*0.5,-momBodyOrange[momBodyCount].height*0.5);
}else{
ctx1.drawImage(momBodyBlue[momBodyCount],-momBodyBlue[momBodyCount].width*0.5,-momBodyBlue[momBodyCount].height*0.5);
}
var momEyeCount=this.momEyeCount
ctx1.drawImage(momEye[momEyeCount],-momEye[momEyeCount].width*0.5,-momEye[momEyeCount].height*0.5);
ctx1.restore();
} 小鱼：
var babyObj=function(){
this.x;
this.y;
this.angle;
this.babyBody=new Image();
this.babyTailTimer=0;
this.babyTailCount=0;
this.babyEyeTimer=0;
this.babyEyeCount=0;
this.babyEyeInterval=1000;
this.babyBodyTimer=0;
this.babyBodyCount=0;
}
babyObj.prototype.init = function() {
this.x=canWidth*0.5-50;
this.y=canHeight*0.5+50;
this.angle=0;
this.babyBody.src="./src/babyFade0.png";
}
babyObj.prototype.draw = function() {
// body...
this.x=lerpDistance(mom.x,this.x,0.98);
this.y=lerpDistance(mom.y,this.y,0.98);
var deltaY=mom.y-this.y;
var deltaX=mom.x-this.x;
var beta=Math.atan2(deltaY,deltaX)+Math.PI;
this.angle=lerpAngle(beta,this.angle,0.6);
this.babyTailTimer+=deltaTime;
if(this.babyTailTimer>50){
this.babyTailCount=(this.babyTailCount+1)%8;
this.babyTailTimer%=50;
}
this.babyEyeTimer+=deltaTime;
if(this.babyEyeTimer>this.babyEyeInterval){
this.babyEyeCount=(babyEyeCount+1)%2;
this.babyEyeTimer%=this.babyEyeInterval;
if(this.babyEyeCount==0){
this.babyEyeInterval=Math.random()*1500+2000;
}else{
this.babyEyeInterval=200;
}
}
this.babyBodyTimer+=deltaTime;
if(this.babyBodyTimer>300){
this.babyBodyCount++;
this.babyBodyTimer%=300;
if(this.babyBodyCount>19){
this.babyBodyCount=19;
data.gameOver=true;
}
}
ctx1.save();
ctx1.translate(this.x,this.y);
ctx1.rotate(this.angle);
babyTailCount=this.babyTailCount;
ctx1.drawImage(babyTail[babyTailCount],-babyTail[babyTailCount].width*0.5+17,-babyTail[babyTailCount].height*0.5);
babyBodyCount=this.babyBodyCount;
ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5,-babyBody[babyBodyCount].height*0.5);
babyEyeCount=this.babyEyeCount;
ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5,-babyEye[babyEyeCount].height*0.5);
ctx1.restore();
}碰撞效果：
var babyObj=function(){
this.x;
this.y;
this.angle;
this.babyBody=new Image();
this.babyTailTimer=0;
this.babyTailCount=0;
this.babyEyeTimer=0;
this.babyEyeCount=0;
this.babyEyeInterval=1000;
this.babyBodyTimer=0;
this.babyBodyCount=0;
}
babyObj.prototype.init = function() {
this.x=canWidth*0.5-50;
this.y=canHeight*0.5+50;
this.angle=0;
this.babyBody.src="./src/babyFade0.png";
}
babyObj.prototype.draw = function() {
// body...
this.x=lerpDistance(mom.x,this.x,0.98);
this.y=lerpDistance(mom.y,this.y,0.98);
var deltaY=mom.y-this.y;
var deltaX=mom.x-this.x;
var beta=Math.atan2(deltaY,deltaX)+Math.PI;
this.angle=lerpAngle(beta,this.angle,0.6);
this.babyTailTimer+=deltaTime;
if(this.babyTailTimer>50){
this.babyTailCount=(this.babyTailCount+1)%8;
this.babyTailTimer%=50;
}
this.babyEyeTimer+=deltaTime;
if(this.babyEyeTimer>this.babyEyeInterval){
this.babyEyeCount=(babyEyeCount+1)%2;
this.babyEyeTimer%=this.babyEyeInterval;
if(this.babyEyeCount==0){
this.babyEyeInterval=Math.random()*1500+2000;
}else{
this.babyEyeInterval=200;
}
}
this.babyBodyTimer+=deltaTime;
if(this.babyBodyTimer>300){
this.babyBodyCount++;
this.babyBodyTimer%=300;
if(this.babyBodyCount>19){
this.babyBodyCount=19;
data.gameOver=true;
}
}
ctx1.save();
ctx1.translate(this.x,this.y);
ctx1.rotate(this.angle);
babyTailCount=this.babyTailCount;
ctx1.drawImage(babyTail[babyTailCount],-babyTail[babyTailCount].width*0.5+17,-babyTail[babyTailCount].height*0.5);
babyBodyCount=this.babyBodyCount;
ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5,-babyBody[babyBodyCount].height*0.5);
babyEyeCount=this.babyEyeCount;
ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5,-babyEye[babyEyeCount].height*0.5);
ctx1.restore();
}大鱼吃水果特效
var waveObj=function(){
this.x=[];
this.y=[];
this.alive=[];
this.r=[];
}
waveObj.prototype.num=10;
waveObj.prototype.init=function(){
for(var i=0;i<this.num;i++){
this.alive[i]=false;
this.r[i]=0;
}
}
waveObj.prototype.draw=function(){
ctx1.save();
ctx1.lineWidth=2;
ctx1.shadowBlur=10;
ctx1.shadowColor="yellow";
for(var i=0;i<this.num;i++){
if(this.alive[i]){
//draw
this.r[i]+=deltaTime*0.04;
if(this.r[i]>50)
this.alive[i]=false;
var alpha=1-this.r[i]/50;
ctx1.beginPath();
ctx1.arc(this.x[i],this.y[i],this.r[i],0,Math.PI*2);
ctx1.closePath();
ctx1.strokeStyle="rgba(255,255,255,"+alpha+")";
ctx1.stroke();
}
}
ctx1.restore();
}
waveObj.prototype.born = function(x,y) {
// body...
for(var i=0;i<this.num;i++){
if(!this.alive[i]){
this.alive[i]=true;
this.r[i]=20;
this.x[i]=x;
this.y[i]=y;
return;
}
}
}游戏的一点处理：
var dataObj=function(){
this.fruitNum=0;
this.double=1;
this.score=0;
this.gameOver=false;
this.alpha=0;
}
dataObj.prototype.draw=function(){
var w=can1.width;
var h=can2.height;
ctx1.save();
ctx1.shadowBlur=10;
ctx1.shadowColor="white";
ctx1.fillStyle="white";
ctx1.fillText("SCORE: "+ this.score,w*0.5,h-20);
if(this.gameOver){
this.alpha+=deltaTime*0.0005;
if(this.alpha>1){
this.alpha=1;
}
ctx1.fillStyle="rgba(255,255,255,"+this.alpha+")";
ctx1.fillText("GAME OVER ",w*0.5,h*0.5);
}
ctx1.restore();
}
dataObj.prototype.addScore=function(){
this.score+=this.fruitNum*100*this.double;
this.fruitNum=0;
this.double=1;
}飘动的尘埃：
var dustObj=function(){
this.x=[];
this.y=[];
this.amp=[];
this.NO=[];
this.alpha;
}
dustObj.prototype.num=30;
dustObj.prototype.init=function(){
for(var i=0;i<this.num;i++){
this.x[i]=Math.random()*canWidth;
this.y[i]=Math.random()*canHeight;
this.amp[i]=20+Math.random()*15;
this.NO[i]=Math.floor(Math.random()*7);
}
this.alpha=0;
}
dustObj.prototype.draw=function(){
this.alpha+=deltaTime*0.0008;
var l=Math.sin(this.alpha);
for(var i=0;i<this.num;i++){
var no=this.NO[i];
ctx1.drawImage(dustPic[no],this.x[i]+this.amp[i]*l,this.y[i])
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
