js实现canvas消灭新冠病毒小游戏代码
代码语言：html
所属分类：游戏
代码描述：js实现canvas消灭新冠病毒小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
body {
background: #111;
margin: 0;
padding: 0
}
canvas {
background: #000;
display: block;
cursor: none
}
</style>
</head>
<body style="">
<canvas id="canvas" width="1280" height="720" style="width: 950px; height: 534px; margin-left: 0px; margin-top: 23px;"></canvas><script>
"use strict"
var stage = {
w: 1280,
h: 720
}
var _pexcanvas = document.getElementById("canvas");
_pexcanvas.width = stage.w;
_pexcanvas.height = stage.h;
var ctx = _pexcanvas.getContext("2d");
var pointer = {
x: stage.w/2,
y: stage.h/4
}
var scale = 1;
var portrait = true;
var loffset = 0;
var toffset = 0;
var mxpos = 0;
var mypos = 0;
// ------------------------------------------------------------------------------- Gamy
var againprog = 0;
var healthprog = 0;
function newGame() {
score = 0;
health = 100;
enemies = [];
enemies.push(new Enemy());
enemies.push(new Enemy());
enemies.push(new Enemy());
againprog = 0;
}
function drawHeart(x, y, w) {
ctx.beginPath();
ctx.arc(x-w/4, y, w/4, 0.75*Math.PI, 0);
ctx.arc(x+w/4, y, w/4, 1*Math.PI, 2.25*Math.PI);
ctx.lineTo(x, y+w/1.5);
ctx.closePath();
ctx.fill();
}
var Cannon = function(x, y, tx, ty) {
this.x = x;
this.y = y;
this.tx = tx;
this.ty = ty;
this.r = 10;
}
var cannons = [];
var gameover = false;
cannons.push(new Cannon(stage.w, stage.h, stage.w/2, stage.h/2));
var firetm = 0;
var fireact = true;
var health = 100;
var score = 0;
var arm = {
x: stage.w,
y: stage.h
};
var arm2 = {
x: 0,
y: stage.h
};
var danger = false;
var dangera = 0;
var Enemy = function() {
this.x = stage.w/2;
this.y = stage.h/2;
this.r = 10;
this.tx = Math.floor(Math.random()*stage.w);
this.ty = Math.floor(Math.random()*stage.h);
this.des = false;
this.eyeX = 0.4;
this.eyeY = 0.25;
this.eyeR = 0.25;
this.sp = 50;
this.spl = 1.4;
this.op = 1;
this.danger = false;
this.nuked = false;
}
var enemies = [];
// for (var i = 0; i < 10; i++) {
// enemies[i] = new Enemy();
// }
enemies.push(new Enemy());
enemies.push(new Enemy());
enemies.push(new Enemy());
var entm = 0;
var ga = 0;
var steptime = 0;
var Star = function() {
this.a = Math.random()*Math.PI*2;
this.v = 3+Math.random()*5;
this.x = stage.w/2;
this.y = stage.h/2;
this.r = 0.2;
}
var Power = function() {
this.type = Math.floor(Math.random()*2)+1;
this.a = Math.random()*Math.PI*2;
this.v = 3+Math.random()*5;
this.x = stage.w/2;
this.y = stage.h/2;
this.r = 0.2;
this.dis = false;
this.op = 1;
}
var powers = [];
var powertm = 0;
var powermax = Math.random()*800+300;
// powermax = 10;
var stars = [];
for (var i = 0; i < 200; i++) {
stars[i] = new Star();
var st = stars[i];
var move = Math.random()*400;
st.x += Math.sin(st.a)*move;
st.y += Math.cos(st.a)*move;
}
// powers.push(new Power());
function enginestep() {
steptime = Date.now();
ctx.clearRect(0, 0, stage.w, stage.h);
ctx.fillStyle = "#ffffff";
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
st.x += Math.sin(st.a)*st.v;
st.y += Math.cos(st.a)*st.v;
st.r += st.v/200;
ctx.beginPath();
ctx.arc(st.x, st.y, st.r, 2*Math.PI, 0);
ctx.fill();
if (st.x > stage.w || st.x < 0 || st.y < 0 || st.y > stage.h) {
stars[i] = new Star();
}
}
if (!gameover) {
danger = false;
powertm++;
if (powertm > powermax) {
powers.push(new Power());
powertm = 0;
powermax = Math.random()*1200+600;
// powermax = 10;
}
for (var i = 0; i < powers.length; i++) {
var st = powers[i];
if (!st.des) {
st.x += Math.sin(st.a)*st.v/1.5;
st.y += Math.cos(st.a)*st.v/1.5;
st.r += st.v/15;
} else {
st.r *= 1.1;
if (st.type == 1) {
st.op += (0-st.op)/10;
} else {
st.op += (0-st.op)/20;
}
st.x += (stage.w/2-st.x)/10;
st.y += (stage.h/2-st.y)/10;
}
if (st.type == 1) {
ctx.fillStyle = "rgba(255,0,0,"+st.op+")";
drawHeart(st.x, st.y-st.r/4, st.r*2);
} else {
ctx.fillStyle = "rgba(255,255,0,"+st.op+")";
ctx.strokeStyle = "rgba(255,255,0,"+st.op+")";
ctx.lineWidth = st.r/10;
ctx.beginPath();
ctx.arc(st.x, st.y, st.r, 2*Math.PI, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(st.x, st.y, st.r*0.15, 2*Math.PI, 0);
ctx.fill();
ctx.beginPath();
ctx.arc(st.x, st.y, st.r*0.85, 1.67*Math.PI, 2*Math.PI);
ctx.arc(st.x, st.y, st.r*0.25, 2*Math.PI, 1.67*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(st.x, st.y, st.r*0.85, 3*Math.PI, 3.33*Math.PI);
ctx.arc(st.x, st.y, st.r*0.25, 3.33*Math.PI, 3*Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(st.x, st.y, st.r*0.85, 2.33*Math.PI, 2.67*Math.PI);
ctx.arc(st.x, st.y, st.r*0.25, 2.67*Math.PI, 2.33*Math.PI, true);
ctx.lineTo(st.x, st.y);
ctx.closePath();
ctx.fill();
}
if (st.x > stage.w || st.x < 0 || st.y < 0 || st.y > stage.h || st.r > stage.w/2) {
powers.splice(i, 1);
if (st.type == 2 && st.r > stage.w/2) {
for (var e = 0; e < enemies.length; e++) {
enemies[e].des = true;
enemies[e].nuked = true;
}
}
i--;
}
}
entm++;
if (enemies.length < 10 && entm > 300) {
entm = 0;
enemies.push(new Enemy());
}
ctx.lineWidth = 2;
for (var i = 0; i < enemies.length; i++) {
var en = enemies[i];
if (!en.danger) {
ctx.strokeStyle = "rgba(0,255,255,"+en.op*2+")";
} else {
health -= 0.01;
ctx.strokeStyle = "rgba(255,0,0,"+en.op*2+")";
danger = true;
}
if (!en.des) {
if (en.danger) {
var randx = Math.floor(Math.random()*4)-2;
var randy = Math.floor(Math.random()*4)-2;
en.x = en.tx+randx;
en.y = en.ty+randy;
} else {
en.x += (en.tx-en.x)/100;
en.y += (en.ty-en.y)/100;
var randx = 0;
var randy = 0;
}
en.r += (50-en.r)/100;
if (Math.abs(50-en.r) < 2&&!en.danger) {
en.tx = en.x;
en.ty = en.y;
en.danger = true;
}
ctx.beginPath();
ctx.arc(en.x-en.r*en.eyeX, en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x+en.r*en.eyeX, en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x, en.y+en.r/4, en.r/3, 2*Math.PI, Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x, en.y, en.r, 0, 2*Math.PI);
ctx.stroke();
} else {
en.eyeR += (0.5-en.eyeR)/5;
en.op += (0-en.op)/5;
// en.sp += (5-en.sp)/20;
en.r += (100-en.r)/20;
en.spl += (2.5-en.spl)/5;
ctx.beginPath();
ctx.arc(en.x-en.r*en.eyeX, en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x+en.r*en.eyeX, en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x, en.y+en.r/2, en.r*en.eyeR, Math.PI, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(en.x, en.y, en.r, 0, 2*Math.PI);
ctx.stroke();
}
//spikes
for (var s = 0; s < 12; s++) {
var a = (Math.PI*2/12)*s+ga;
ctx.beginPath();
ctx.moveTo(en.x+Math.sin(a)*en.r, en.y+Math.cos(a)*en.r);
ctx.lineTo(en.x+Math.sin(a)*en.r*1.2, en.y+Math.cos(a)*en.r*1.2);
ctx.lineTo(en.x+Math.sin(a+Math.PI/en.sp)*en.r*en.spl, en.y+Math.cos(a+Math.PI/en.sp)*en.r*en.spl);
ctx.lineTo(en.x+Math.sin(a-Math.PI/en.sp)*en.r*en.spl, en.y+Math.cos(a-Math.PI/en.sp)*en.r*en.spl);
ctx.lineTo(en.x+Math.sin(a)*en.r*1.2, en.y+Math.cos(a)*en.r*1.2);
ctx.stroke();
// ctx.fill();
}
if (Math.abs(0.5-en.eyeR) < 0.01) {
var rand = Math.floor(Math.random()*2);
if (enemies[i].nuked && rand == 1) {
enemies.splice(i, 1);
} else {
enemies[i] = new Enemy();
}
}
}
if (danger) {
dangera += 0.05+(100-health)/1000;
if (dangera >= Math.PI) {
dangera = 0;
}
ctx.fillStyle = 'rgba(255,0,0,'+(1-Math.sin(dangera))/4+')';
ctx.fillRect(0, 0, stage.w, stage.h);
if (health < 10) {
ctx.fillStyle = 'rgba(255,255,0,'+(Math.sin(dangera))+')';
ctx.strokeStyle = 'rgba(255,255,0,'+(Math.sin(dangera))+')';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin = 'round';
ctx.moveTo(stage.w/2, stage.h/4);
ctx.lineTo(stage.w/2+stage.h/7, stage.h/2);
ctx.lineTo(stage.w/2-stage.h/7, stage.h/2);
ctx.closePath();
ctx.stroke();
ctx.font = "bold 130px arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("!", stage.w/2, stage.h/2.5);
ctx.font = "bold 50px arial";
ctx.fillText("LOW HEALTH", stage.w/2, stage.h*0.6);
}
} else {
dangera = 0;
}
healthprog += (health-healthprog)/5;
ctx.fillStyle = '#00ffff';
ctx.font = "30px arial";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText("Health: ", 20, 40);
ctx.fillText("Score: "+score, stage.w-200, 40);
// ctx.fillText("Step: "+(Date.now()-steptime),20,120);
if (health > 30) {
ctx.fillStyle = 'rgba(0,255,255,0.8)';
} else {
ctx.fillStyle = 'rgba(255,0,0,0.8)';
}
ctx.lineWidth = 2;
ctx.fillRect(130, 25, healthprog*3, 30);
ctx.strokeStyle = "#00ffff";
ctx.strokeRect(130, 25, 300, 30);
if (health < 0) {
gameover = true;
}
} else {
ctx.fillStyle = 'rgba(0,255,255,0.3)';
ctx.fillRect((stage.w-220)/2, stage.h*0.65-25, againprog, 50);
ctx.fillStyle = '#00ffff';
ctx.font = "bold 130px arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("GAME OVER", stage.w/2, stage.h/3);
ctx.font = "bold 50px arial";
ctx.fillText("SCORE: "+score, stage.w/2, stage.h/2);
ctx.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0