html wmf 不显示,index.html

Document

button {

margin:20px;

}

你的浏览器不支持canvas,请更换其他浏览器试一试。

icon03.png

fj.png

gsp.png

bomb.png

开始左移

右移开炮

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var image = document.getElementById("plane");

var image2 = document.getElementById("gun");

var image3 = document.getElementById("genguin");

var image5 = document.getElementById("bomb");

var explode01 = new Image();

explode01.src = "img/explode01.png";

var explode02 = new Image();

explode02.src = "img/explode02.png";

var explode03 = new Image();

explode03.src = "img/explode03.png";

var explode04 = new Image();

explode04.src = "img/explode04.png";

var imageMissile = new Image();

imageMissile.src = "img/dd8.png";

var level = 1;

var score = 0;

var planeSpeed = 5;

var planeSpeed2 = 12;

var planeStartPointX = 2;

var planeStartDownthrustPointX = 2;

var planeStartPointY = 69;

var planeStartTowards = 0;

var planeWidth = 169;

var planeHeight = 138;

var nowPlaneTowards = planeStartTowards;

var nowPlanePosX = planeStartPointX;

var nowPlanePosY = planeStartPointY;

var nowPlaneSpeedY = 0;

var nowPlaneHitted = false;

var nowPlaneFlyMode = "horizontal";

var planeHittedPosY = planeStartPointY;

var planeHittedTowards;

var nowPlaneTimeAfterHitted = 0;

var deltAngle = 0;

var gunStartTowards = 0;

var nowGenguinTowards = gunStartTowards;

var gunMoveSpeed = 10;

var gunPosX = 1000/2-30;

var gunPosY = 650-90;

var gunHitted = false;

var gunTimeAfterHitted = 0;

var gunFireGap = 5;

var genguinFireSpeed = 15;

var genguinPosX = gunPosX+11;

var genguinPosY = gunPosY-16

var fired = false;

var gameLoop;

var shell = [];

var missile = [];

var missileStart = false;

var missileTimeAfterFired = 0;

var missilePosX, missilePosY, missileWidth=114, missileHeight=18, missileSpeedX, missileSpeedY, missileTowards, missileAcceleration;

var distanceX2Gun, time2ReachGun, rotateSpeed, accelerationX, gunPriorPosX;

var missileFirePosX, missileFirePosY;

for (var j=0; j<10; j++) {

shell[j] = [];

shell[j][0] = false; //shell[j][0] shell visible;

}

for (var j=0; j<3; j++) {

missile[j] = [];

missile[j][0] = false; //missile[j][0] missile visible;

}

var bombArray = [];

for (var j=0; j<5; j++) {

bombArray[j] = [];

bombArray[j][0] = false; //bombArray[j][0] bombArray visible;

}

function showRole() {

context.drawImage(image, nowPlanePosX-planeWidth/2, nowPlanePosY-planeHeight/2);

context.drawImage(image3, genguinPosX, genguinPosY);

context.drawImage(image2, gunPosX, gunPosY);

if (typeof(localStorage.level) != "undefined")

{

level = parseInt(localStorage.level);

// localStorage.level = 3;

} else {

level = 1;

}

showLevelAndScore();

document.οnkeydοwn=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

e.stopPropagation(); //阻止事件的冒泡传播

e.preventDefault(); //阻止按键单击导致默认事件的发生

if (e.keyCode==40) {

playGame();

}

if(e.keyCode==37){

goLeft(); //left

}

if(e.keyCode==39){ //right

goRight();

}

if(e.keyCode==32){ //spacebar

fire();

}

}

}

function showLevelAndScore() {

context.font = '12pt 宋体';

context.fillText("第" + level +"关", 10, 600);

context.fillText("得分:" + score, 10, 620);

}

function showFailure() {

context.font = '12pt 宋体';

context.fillText("第" + level +"关", 10, 600);

context.fillText("失败!", 10, 620);

}

function showSuccess() {

context.font = '12pt 宋体';

context.fillText("第" + level +"关", 10, 600);

context.fillText("成功过关!", 10, 620);

}

function showFinish() {

context.font = '12pt 宋体';

context.fillText("你已经通过了最后一关!", 10, 600);

context.fillText("游戏结束!", 10, 620);

}

function playGame() {

if (gameLoop != null) {

clearInterval(gameLoop);

}

planeStartPointX = -3;

nowPlanePosX = planeStartPointX;

nowPlanePosY = planeStartPointY;

nowPlaneHitted = false;

nowPlaneTimeAfterHitted = 0;

nowPlaneFlyMode = "horizontal";

gunPosX = 1000/2-30;

gunHitted = false;

gunTimeAfterHitted = 0;

gunStartTowards = -Math.PI/2;

genguinPosX = gunPosX+11;

nowGenguinTowards = gunStartTowards;

score = 0;

for (var i=0; i<10; i++) {

shell[i][0] = false;

}

for (var i=0; i<3; i++) {

missile[i][0] = false;

}

gameLoop = setInterval(function(){gamePerformance();},50);

}

function goLeft() {

context.clearRect(gunPosX, gunPosY-16, 57, 106);

gunPosX -= gunMoveSpeed;

genguinPosX = gunPosX+11;

genguinPosY = gunPosY-16;

context.drawImage(image3, genguinPosX, genguinPosY);

context.drawImage(image2, gunPosX, gunPosY);

return;

}

function goRight() {

context.clearRect(gunPosX, gunPosY-16, 57, 106);

gunPosX += gunMoveSpeed;

genguinPosX = gunPosX+11;

genguinPosY = gunPosY-16;

context.drawImage(image3, genguinPosX, genguinPosY);

context.drawImage(image2, gunPosX, gunPosY);

return;

}

function fire() {

if (!gunHitted && gunFireGap<0) {

for(var k=0; k<10; k++) {

if (!shell[k][0]) {

shell[k][0] = true; //shell[j][0] shell visible;

shell[k][1] = gunPosX+11; //shell[k][1] shell position X

shell[k][2] = gunPosY-16; //shell[k][2] shell position Y

shell[k][3] = gunStartTowards; ///shell[k][2] shell direction

gunFireGap = 5;

break;

}

}

}

}

function gamePerformance() {

gunFireGap--;

context.clearRect(0,0,1000,650);

if ((level<3) && (Math.random() > (0.96/(Math.sqrt(level)))) && !nowPlaneHitted) { //condition for throw bomb

for (var i=0; i<5; i++) {

if (!bombArray[i][0]) {

if (level == 1) {

bombArray[i][0] = true; //visible

bombArray[i][1] = nowPlanePosX+80; //bomb[i][1] position X

bombArray[i][2] = nowPlanePosY+120; //bomb[i][2] position Y

bombArray[i][3] = 0; //count after throw

bombArray[i][4] = bombArray[i][2]; //bomb[i][4] original position Y

break;

} else {

if ((Math.sqrt(Math.pow(nowPlanePosX-gunPosX, 2) + Math.pow(nowPlanePosY-gunPosY, 2)) < 350) && !gunHitted) {

bombArray[i][0] = true; //visible

bombArray[i][1] = nowPlanePosX; //bomb[i][1] position X

bombArray[i][2] = nowPlanePosY+80; //bomb[i][2] position Y

bombArray[i][3] = 0; //count after throw

bombArray[i][4] = bombArray[i][2]; //bomb[i][4] original position Y

break;

}

}

}

}

} else {

if ((level==3) && (Math.random() > (0.96)) && !missileStart && !nowPlaneHitted) {

for (var i=0; i<3; i++) {

if (!missile[i][0]) {

missile[i][0] = true;

missile[i][1] = nowPlanePosX; //missileFirePosX

missile[i][2] = nowPlanePosY + 50; //missileFirePosY

missile[i][3] = missile[i][1]; //missilePosX

missile[i][4] = missile[i][2]; //missilePosY

missile[i][5] = planeSpeed2; //missileSpeedX

missile[i][6] = 0; //missileSpeedY

missile[i][7] = 0; //missileTowards

missile[i][8] = 0; //missileTimeAfterFired

missile[i][9] = gunPosX+28 - missile[i][3]; //distance2Gun

missile[i][10] = Math.sqrt((gunPosY-missile[i][4])/0.3); //time2ReachGun

if (gunPosX

missile[i][11] = (Math.PI - missile[i][7])/missile[i][10]; //rotateSpeed

} else {

missile[i][11] = (Math.PI/2 - missile[i][7])/missile[i][10]; //rotateSpeed

}

missile[i][12] = (missile[i][9]-missile[i][5]*missile[i][10])*2/Math.pow(missile[i][10],2); //accelerationX

missile[i][13] = gunPosX; //gunPriorPosX;

break;

}

}

}

}

for (var j=0; j<5; j++) {

if (bombArray[j][0]) {

bombArray[j][1] = bombArray[j][1] + (level==1 ? planeSpeed : planeSpeed2);

bombArray[j][2] = bombArray[j][4] + (level==1 ? 0.3 : 0.3)*bombArray[j][3]*bombArray[j][3];

bombArray[j][3] += 1;

if (bombArray[j][2] > 640 || bombArray[j][1] > 950) {

bombArray[j][0] = false;

}

context.drawImage(image5, bombArray[j][1], bombArray[j][2]);

}

}

if ((level==2) && ((gunPosX - nowPlanePosX)<400) && (gunPosX>nowPlanePosX) && (!nowPlaneHitted) && (nowPlaneFlyMode=="horizontal")) {

nowPlaneFlyMode = "downthrust";

planeStartDownthrustPointX = nowPlanePosX;

}

//if ((level==1) || ((nowPlanePosX>480) && (nowPlaneTowards>=Math.PI*2)))

if ((level!=2) || (nowPlaneFlyMode == "horizontal")) {

if (level==1) {

nowPlanePosX += planeSpeed;

} else {

nowPlanePosX += planeSpeed2;

}

} else {

nowPlanePosX += planeSpeed2;

}

if (nowPlaneHitted) {

nowPlanePosY = planeHittedPosY + nowPlaneSpeedY*nowPlaneTimeAfterHitted + 0.3*nowPlaneTimeAfterHitted*nowPlaneTimeAfterHitted;

drawDamagedPlane(level);

nowPlaneTimeAfterHitted++;

} else {

//if ((level==1) || (((nowPlanePosX>480) && (nowPlaneTowards>=Math.PI*2)))

if ((level!=2) || (nowPlaneFlyMode=="horizontal")) {

context.drawImage(image, nowPlanePosX-planeWidth/2, nowPlanePosY-planeHeight/2);

} else {

nowPlaneTowards += Math.PI/20;

var previousPlanePosY = nowPlanePosY;

// nowPlanePosY = planeStartPointY + 200 - Math.sin(((nowPlanePosX-planeStartPointX)*Math.PI/240)+Math.PI/2)*200;

nowPlanePosY = planeStartPointY + 200 - Math.sin(((nowPlanePosX-planeStartDownthrustPointX)*Math.PI/240)+Math.PI/2)*200;

nowPlaneSpeedY = nowPlanePosY - previousPlanePosY;

// deltAngle = (Math.PI*3/2)+Math.atan(Math.cos(((nowPlanePosX-planeStartPointX)*Math.PI/240)+Math.PI/2));

deltAngle = (Math.PI*3/2)+Math.atan(Math.cos(((nowPlanePosX-planeStartDownthrustPointX)*Math.PI/240)+Math.PI/2));

// console.log("planePosX:", nowPlanePosX, "planePosY:", nowPlanePosY, "deltAngle:", deltAngle, "towards:", nowPlaneTowards);

context.translate(nowPlanePosX, nowPlanePosY);

context.rotate((Math.PI/2)-deltAngle+Math.PI);

context.drawImage(image, -planeWidth/2, -planeHeight/2);

context.rotate(deltAngle-(Math.PI/2)-Math.PI);

context.translate(-nowPlanePosX, -nowPlanePosY);

if (nowPlaneTowards>=Math.PI*2) {

nowPlaneFlyMode = "horizontal";

nowPlaneTowards = 0;

}

}

}

//deal with missile action--begin

for (var j=0; j<3; j++) {

if (missile[j][0]) {

context.translate(missile[j][3], missile[j][4]);

context.rotate(missile[j][7]);

context.drawImage(imageMissile, -missileWidth/2, -missileHeight/2);

context.rotate(-missile[j][7]);

context.translate(-missile[j][3], -missile[j][4]);

if ((Math.abs(gunPosY+41-missile[j][4])<30) && !gunHitted && missile[j][0]) {

// console.log("gunPosX+28:", gunPosX+28, "missilePosX:", missilePosX, "gunPosY+41:", gunPosY+41, "missilePosY:", missilePosY);

// console.log("missilePosX-30:", missilePosX-30);

if (Math.abs(gunPosX+28-missile[j][3]+30)<55) {

// console.log("Hitted!");

gunHitted = true;

gunTimeAfterHitted = 0;

}

}

if (missile[j][13] != gunPosX) {

var deltaAcceleratioX = 2*(gunPosX-missile[j][13])/Math.pow((missile[j][10]-missile[j][8]),2);

if (deltaAcceleratioX>75) {

deltaAcceleratioX = 75;

} else {

if (deltaAcceleratioX

deltaAcceleratioX = -75;

}

}

missile[j][3] = missile[j][1] + planeSpeed2*missile[j][8] + 0.5*missile[j][12]*Math.pow(missile[j][8],2) + 0.5*deltaAcceleratioX;

} else {

missile[j][3] = missile[j][1] + planeSpeed2*missile[j][8] + 0.5*missile[j][12]*Math.pow(missile[j][8],2);

}

missile[j][4] = missile[j][2] + 0.6*Math.pow(missile[j][8],2)/2;

missile[j][7] += missile[j][11];

missile[j][8]++;

missile[j][13] = gunPosX;

}

}

//deal with missile action--end

if ((nowPlanePosX > 1327) || (nowPlanePosY > 580)) {

if (gunHitted) {

clearInterval(gameLoop);

score = 0;

showFailure();

// return;

}

if (nowPlaneTimeAfterHitted && (score>=150)) {

clearInterval(gameLoop);

score = 0;

if (level==3) {

showFinish();

} else {

showSuccess();

level += 1;

localStorage.level = level;

}

// return;

}

nowPlaneHitted = false;

nowPlaneTimeAfterHitted = 0;

nowPlaneTowards = planeStartTowards;

nowPlanePosX = planeStartPointX;

nowPlanePosY = planeStartPointY;

nowPlaneFlyMode = "horizontal";

for (var i=0; i<10; i++) {

shell[i][0] = false;

}

for (var i=0; i<3; i++) {

missile[i][0] = false;

}

return;

} else {

for (var i=0; i<10; i++) {

if (shell[i][0] && shell[i][2]>-32) {

shell[i][2] -= genguinFireSpeed;

shell[i][3] += Math.PI/10;

if (shell[i][2]

shell[i][0] = false;

}

context.translate(shell[i][1]+16, shell[i][2]+16);

context.rotate(shell[i][3]);

context.drawImage(image3, -16, -16);

context.rotate(-shell[i][3]);

context.translate(-shell[i][1]-16, -shell[i][2]-16);

if (((shell[i][1]+16)>(nowPlanePosX-planeWidth/4)) && ((shell[i][1]+16)(nowPlanePosY-planeHeight/4)) && ((shell[i][2]+16)

nowPlaneHitted = true;

nowPlaneTimeAfterHitted = 0;

planeHittedPosY = nowPlanePosY;

planeHittedTowards = nowPlaneTowards;

score += 50;

}

}

}

for (var j=0; j<5; j++) {

if (bombArray[j][0]) {

if (Math.abs(gunPosX-bombArray[j][1]) < 20) {

// console.log("gunPosX:", gunPosX, "gunPosY:", gunPosY, "gunPosX+50:", gunPosX+50, "gunPosY+80:", gunPosY+80);

// console.log("bombArray[j][1]:", bombArray[j][1], "bombArray[j][2]:", bombArray[j][2], "bombArray[j][1]+50:", bombArray[j][1]+50, "bombArray[j][2]+20:", bombArray[j][2]+20);

if ((level==1 ? (gunPosY

gunHitted = true;

gunTimeAfterHitted = 0;

break;

}

}

}

}

if (gunHitted) {

gunTimeAfterHitted++;

switch(gunTimeAfterHitted) {

case 1:

case 2:

case 3:

context.drawImage(image3, genguinPosX, genguinPosY);

context.drawImage(image2, gunPosX, gunPosY);

context.drawImage(explode01, gunPosX+28-24, gunPosY+41-24);

break;

case 4:

case 5:

case 6:

case 7:

case 8:

context.drawImage(image2, gunPosX, gunPosY);

context.drawImage(explode02, gunPosX+28-40, gunPosY+41-34);

break;

case 9:

case 10:

case 11:

case 12:

case 13:

context.drawImage(image2, gunPosX, gunPosY);

context.drawImage(explode03, gunPosX+28-60, gunPosY+41-48);

break;

case 14:

case 15:

case 16:

case 17:

case 18:

context.drawImage(explode04, gunPosX+28-85, gunPosY+41-72);

break;

}

} else {

context.drawImage(image3, genguinPosX, genguinPosY);

context.drawImage(image2, gunPosX, gunPosY);

}

}

showLevelAndScore();

}

function drawDamagedPlane(vel) {

var kz = Math.floor(nowPlaneTimeAfterHitted/2);

var kz2 = Math.floor((nowPlaneTimeAfterHitted-12)/2);

var kz3 = Math.floor((nowPlaneTimeAfterHitted-18)/2);

var kz4 = Math.floor((nowPlaneTimeAfterHitted-26)/2);

switch(nowPlaneTimeAfterHitted) {

case 0:

case 1:

case 2:

case 3:

case 4:

case 5:

case 6:

case 7:

case 8:

case 9:

drawHittedPlane(vel);

context.drawImage(explode01, nowPlanePosX-24-2*kz, nowPlanePosY-24-2*kz, 48+4*kz, 48+4*kz);

break;

case 10:

case 11:

case 12:

case 13:

case 14:

case 15:

case 16:

case 17:

drawHittedPlane(vel);

context.drawImage(explode02, nowPlanePosX-40-6*kz2, nowPlanePosY-34-5*kz2, 80+12*kz2, 68+10*kz2);

break;

case 18:

case 19:

case 20:

case 21:

case 22:

case 23:

case 24:

case 25:

drawHittedPlane(vel);

context.drawImage(explode03, nowPlanePosX-60-8*kz3, nowPlanePosY-48-8*kz3, 120+16*kz3, 96+16*kz3);

break;

case 26:

case 27:

case 28:

case 29:

case 30:

case 31:

context.drawImage(explode04, nowPlanePosX-85-9*kz4, nowPlanePosY-72-9*kz4, 170+18*kz4, 144+18*kz4);

break;

}

}

function drawHittedPlane(task) {

if (task!=2) {

context.drawImage(image, nowPlanePosX-planeWidth/2, nowPlanePosY-planeHeight/2);

} else {

context.translate(nowPlanePosX, nowPlanePosY);

context.rotate((Math.PI/2)-deltAngle+Math.PI);

context.drawImage(image, -planeWidth/2, -planeHeight/2);

context.rotate(deltAngle-(Math.PI/2)-Math.PI);

context.translate(-nowPlanePosX, -nowPlanePosY);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值