分享24个网页游戏源代码
24个游戏源代码下载链接：https://pan.baidu.com/s/1gYJlj8enJbh5mFS_wMaZBA?pwd=4ncb
提取码：4ncb
下面是项目的名字，我放了一些图片，大家下载后可以看到。
Html5+JS网页版捕鱼达人游戏
HTML5水果忍者游戏源码
文章来源：https://www.toymoban.com/news/detail-440381.html
JS网页射击小游戏星球防御大战游戏源码文章来源地址https://www.toymoban.com/news/detail-440381.html
//Vanilla JS
//PLAY IN FULL PAGE VIEW!
window.addEventListener("DOMContentLoaded", game);
//General sprite load
var sprite = new Image();
var spriteExplosion = new Image();
sprite.src = 'img/sprite.png';
window.onload = function() {
spriteExplosion.src = 'img/explosion.png';
};
//Game
function game() {
//Canvas
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cH = ctx.canvas.height = window.innerHeight,
cW = ctx.canvas.width = window.innerWidth ;
//Game
var bullets = [],
asteroids = [],
explosions = [],
destroyed = 0,
record = 0,
count = 0,
playing = false,
gameOver = false,
_planet = {deg: 0};
//Player
var player = {
posX : -35,
posY : -(100+82),
width : 70,
height : 79,
deg : 0
};
canvas.addEventListener('click', action);
canvas.addEventListener('mousemove', action);
window.addEventListener("resize", update);
function update() {
cH = ctx.canvas.height = window.innerHeight;
cW = ctx.canvas.width = window.innerWidth ;
}
function move(e) {
player.deg = Math.atan2(e.offsetX - (cW/2), -(e.offsetY - (cH/2)));
}
function action(e) {
e.preventDefault();
if(playing) {
var bullet = {
x: -8,
y: -179,
sizeX : 2,
sizeY : 10,
realX : e.offsetX,
realY : e.offsetY,
dirX : e.offsetX,
dirY : e.offsetY,
deg : Math.atan2(e.offsetX - (cW/2), -(e.offsetY - (cH/2))),
destroyed: false
};
bullets.push(bullet);
} else {
var dist;
if(gameOver) {
dist = Math.sqrt(((e.offsetX - cW/2) * (e.offsetX - cW/2)) + ((e.offsetY - (cH/2 + 45 + 22)) * (e.offsetY - (cH/2+ 45 + 22))));
if (dist < 27) {
if(e.type == 'click') {
gameOver = false;
count = 0;
bullets = [];
asteroids = [];
explosions = [];
destroyed = 0;
player.deg = 0;
canvas.removeEventListener('contextmenu', action);
canvas.removeEventListener('mousemove', move);
canvas.style.cursor = "default";
} else {
canvas.style.cursor = "pointer";
}
} else {
canvas.style.cursor = "default";
}
} else {
dist = Math.sqrt(((e.offsetX - cW/2) * (e.offsetX - cW/2)) + ((e.offsetY - cH/2) * (e.offsetY - cH/2)));
if (dist < 27) {
if(e.type == 'click') {
playing = true;
canvas.removeEventListener("mousemove", action);
canvas.addEventListener('contextmenu', action);
canvas.addEventListener('mousemove', move);
canvas.setAttribute("class", "playing");
canvas.style.cursor = "default";
} else {
canvas.style.cursor = "pointer";
}
} else {
canvas.style.cursor = "default";
}
}
}
}
function fire() {
var distance;
for(var i = 0; i < bullets.length; i++) {
if(!bullets[i].destroyed) {
ctx.save();
ctx.translate(cW/2,cH/2);
ctx.rotate(bullets[i].deg);
ctx.drawImage(
sprite,
211,
100,
50,
75,
bullets[i].x,
bullets[i].y -= 20,
19,
30
);
ctx.restore();
//Real coords
bullets[i].realX = (0) - (bullets[i].y + 10) * Math.sin(bullets[i].deg);
bullets[i].realY = (0) + (bullets[i].y + 10) * Math.cos(bullets[i].deg);
bullets[i].realX += cW/2;
bullets[i].realY += cH/2;
//Collision
for(var j = 0; j < asteroids.length; j++) {
if(!asteroids[j].destroyed) {
distance = Math.sqrt(Math.pow(
asteroids[j].realX - bullets[i].realX, 2) +
Math.pow(asteroids[j].realY - bullets[i].realY, 2)
);
if (distance < (((asteroids[j].width/asteroids[j].size) / 2) - 4) + ((19 / 2) - 4)) {
destroyed += 1;
asteroids[j].destroyed = true;
bullets[i].destroyed = true;
explosions.push(asteroids[j]);
}
}
}
}
}
}
function planet() {
ctx.save();
ctx.fillStyle = 'white';
ctx.shadowBlur = 100;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = "#999";
ctx.arc(
(cW/2),
(cH/2),
100,
0,
Math.PI * 2
);
ctx.fill();
//Planet rotation
ctx.translate(cW/2,cH/2);
ctx.rotate((_planet.deg += 0.1) * (Math.PI / 180));
ctx.drawImage(sprite, 0, 0, 200, 200, -100, -100, 200,200);
ctx.restore();
}
function _player() {到了这里，关于分享24个网页游戏源代码，总有一个是你想要的的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
