分享24个网页游戏源代码
24个游戏源代码下载链接：https://pan.baidu.com/s/1gYJlj8enJbh5mFS_wMaZBA?pwd=4ncb
提取码：4ncb
下面是项目的名字，我放了一些图片，大家下载后可以看到。
Html5+JS网页版捕鱼达人游戏
HTML5水果忍者游戏源码
JS网页射击小游戏星球防御大战游戏源码
//Vanilla JS//PLAY IN FULL PAGE VIEW!window.addEventListener("DOMContentLoaded", game);//General sprite loadvar sprite = new Image();var spriteExplosion = new Image();sprite.src = 'img/sprite.png';window.onload = function() {spriteExplosion.src = 'img/explosion.png';};//Gamefunction game() {//Canvasvar canvas = document.getElementById('canvas'),ctx= canvas.getContext('2d'),cH = ctx.canvas.height = window.innerHeight,cW = ctx.canvas.width= window.innerWidth ;//Gamevar bullets= [],asteroids= [],explosions = [],destroyed= 0,record = 0,count= 0,playing= false,gameOver = false,_planet= {deg: 0};//Playervar 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 coordsbullets[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;//Collisionfor(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 rotationctx.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() {ctx.save();ctx.translate(cW/2,cH/2);ctx.rotate(player.deg);ctx.drawImage(sprite,200,0,player.width,player.height,player.posX,player.posY,player.width,player.height);ctx.restore();if(bullets.length - destroyed && playing) {fire();}}function newAsteroid() {var type = random(1,4),coordsX,coordsY;switch(type){case 1:coordsX = random(0, cW);coordsY = 0 - 150;break;case 2:coordsX = cW + 150;coordsY = random(0, cH);break;case 3:coordsX = random(0, cW);coordsY = cH + 150;break;case 4:coordsX = 0 - 150;coordsY = random(0, cH);break;}var asteroid = {x: 278,y: 0,state: 0,stateX: 0,width: 134,height: 123,realX: coordsX,realY: coordsY,moveY: 0,coordsX: coordsX,coordsY: coordsY,size: random(1, 3),deg: Math.atan2(coordsX- (cW/2), -(coordsY - (cH/2))),destroyed: false};asteroids.push(asteroid);}function _asteroids() {var distance;for(var i = 0; i < asteroids.length; i++) {if (!asteroids[i].destroyed) {ctx.save();ctx.translate(asteroids[i].coordsX, asteroids[i].coordsY);ctx.rotate(asteroids[i].deg);ctx.drawImage(sprite,asteroids[i].x,asteroids[i].y,asteroids[i].width,asteroids[i].height,-(asteroids[i].width / asteroids[i].size) / 2,asteroids[i].moveY += 1/(asteroids[i].size),asteroids[i].width / asteroids[i].size,asteroids[i].height / asteroids[i].size);ctx.restore();//Real Coordsasteroids[i].realX = (0) - (asteroids[i].moveY + ((asteroids[i].height / asteroids[i].size)/2)) * Math.sin(asteroids[i].deg);asteroids[i].realY = (0) + (asteroids[i].moveY + ((asteroids[i].height / asteroids[i].size)/2)) * Math.cos(asteroids[i].deg);asteroids[i].realX += asteroids[i].coordsX;asteroids[i].realY += asteroids[i].coordsY;//Game overdistance = Math.sqrt(Math.pow(asteroids[i].realX -cW/2, 2) + Math.pow(asteroids[i].realY - cH/2, 2));if (distance < (((asteroids[i].width/asteroids[i].size) / 2) - 4) + 100) {gameOver = true;playing= false;canvas.addEventListener('mousemove', action);}} else if(!asteroids[i].extinct) {explosion(asteroids[i]);}}if(asteroids.length - destroyed < 10 + (Math.floor(destroyed/6))) {newAsteroid();}}function explosion(asteroid) {ctx.save();ctx.translate(asteroid.realX, asteroid.realY);ctx.rotate(asteroid.deg);var spriteY,spriteX = 256;if(asteroid.state == 0) {spriteY = 0;spriteX = 0;} else if (asteroid.state < 8) {spriteY = 0;} else if(asteroid.state < 16) {spriteY = 256;} else if(asteroid.state < 24) {spriteY = 512;} else {spriteY = 768;}if(asteroid.state == 8 || asteroid.state == 16 || asteroid.state == 24) {asteroid.stateX = 0;}ctx.drawImage(spriteExplosion,asteroid.stateX += spriteX,spriteY,256,256,- (asteroid.width / asteroid.size)/2,-(asteroid.height / asteroid.size)/2,asteroid.width / asteroid.size,asteroid.height / asteroid.size);asteroid.state += 1;if(asteroid.state == 31) {asteroid.extinct = true;}ctx.restore();}function start() {if(!gameOver) {//Clearctx.clearRect(0, 0, cW, cH);ctx.beginPath();//Planetplanet();//Player_player();if(playing) {_asteroids();ctx.font = "20px Verdana";ctx.fillStyle = "white";ctx.textBaseline = 'middle';ctx.textAlign = "left";ctx.fillText('Record: '+record+'', 20, 30);ctx.font = "40px Verdana";ctx.fillStyle = "white";ctx.strokeStyle = "black";ctx.textAlign = "center";ctx.textBaseline = 'middle';ctx.strokeText(''+destroyed+'', cW/2,cH/2);ctx.fillText(''+destroyed+'', cW/2,cH/2);} else {ctx.drawImage(sprite, 428, 12, 70, 70, cW/2 - 35, cH/2 - 35, 70,70);}} else if(count record " />变态方块小游戏
仿全面飞机大战设计游戏源码
吃包子游戏源码
基于H5实现的手机移动端打地鼠类小游戏
基于html5的3D俄罗斯方块游戏源码
基于js实现的消灭动物小游戏源码
堆木头游戏
微信蜘蛛侠游戏源码
打飞机游戏
捕鱼游戏源码
方言八级考试源码
有趣的仿神经猫html5圈小猫游戏源码
有趣的小心女司机手机过马路闯关小游戏源码
极少的JS写的贪吃蛇游戏（带优化版本）
植物大战僵尸
经典90版HTML5坦克大战游戏源码
飞得更高游戏
驴子跳跳游戏源码
HTML5实现剪刀石头布小游戏
html5手机端投篮球小游戏源码下载
var scorenext=0;function Basketball() {this.version = "0.1", this.balls = [], this.hoops = [], this.texts = [], this.res = {},this.score = 0, this.started = !1, //falsethis.gameOver = !1, //falsethis.ballX = 160, //球X坐标this.ballY = 880, //球Y坐标this.ballVel = 1200, this.ballAngleVel = 10, this.ballAngle = 0, this.ballsShot = 1, this.ballCharge = 0, this.time = 30, this.toNextSecond = 1, this.sound = !1, //falsethis.state = "menu", this.menuText = new AnimatedText("点击开始游戏", 320, 530, 40, .01), this.overText = new AnimatedText("点击继续游戏", 320, 800, 40, .01), this.flashText = [], this.scored = 0, this.totalBalls = 3, this.round = 1, this.missed = 0, //this.timer = 30,timerself=30,this.displayScore = 0, this.storage = "undefined" != typeof Storage " />=1 && "menu" == this.state && (gameStart(), this.click && (this.state = "play", this.click = !1), this.menuText.update(t)), "play" == this.state) {//console.log("游戏ind");gameStart(),this.ballX += this.ballVel * t, this.ballX > 547 && (this.ballVel = -this.ballVel, this.ballX = 547), this.ballX < 0 && (this.ballVel = -this.ballVel, this.ballX = 0); for (var s = 0; s < this.balls.length; s++) {var i = this.balls[s];if (i.falling)for (var e = 0; e o && (i.scored || (i.setAngle(90), scorenext = this.score += 10, this.texts.push(new PopText("+ 10", h.x, h.y))), i.scored = !0), !i.scored)for (var c = 0; c 54 && !i.canBounce && (i.canBounce = !0), 52 > o && i.canBounce) {this.playSound("image/bounce_1.wav"), i.bounces++, i.setAngle(180 * g / Math.PI + 180 + Math.floor(10 * Math.random()) - Math.floor(10 * Math.random())), i.bounces > 3 && (i.bounces = 3);var v = 180 * g / Math.PI;v > 0 && 180 > v && (i.gravity = 950 + 100 * i.bounces), i.angleVel = -i.angleVel, i.canBounce = !1}}}i.update(t), i.y > 960 && (this.ballX = i.x, this.balls.splice(s, 1), i.scored || (this.flashText.push(new FlashText("差一点"))/*,++this.missed >= 2 && (this.state = "over")*/))//,/*++this.missed >= 4 *////*(i.x 740) && (this.ballX = i.x, this.balls.splice(s, 1),//i.scored || (this.flashText.push(new FlashText("投丢B!")), //++this.missed >= 3 && (this.state = "over")))*/}if (this.click && this.ballY <= 950 && this.balls.length < 1) {var i = new Ball(this.ballX + 46.5, this.ballY);i.drawAngle = this.ballAngle, i.shoot(1480), this.balls.push(i), this.ballY = 961}this.balls.length 880 && (this.ballY -= 100 * t), this.click || (this.ballsShot = 0);for (var s = 0; s < this.texts.length; s++) {var u = this.texts[s];u.update(t)}for (var s = 0; s < this.hoops.length; s++) {var h = this.hoops[s];h.update(t)}for (var s = 0; s < this.flashText.length; s++) {var u = this.flashText[s];u.update(t), u.opacity <= 0 && this.flashText.splice(s, 1)}}if ("over" == this.state) {// var f = localStorage.getItem("score"); /* f || localStorage.setItem("score", 0), */this.displayScore = this.score /* f && localStorage.setItem("score", this.score))*/, this.overText.update(t), gameOver(this.score)}//console.log("游戏结束");"over" == this.state && this.click && /*this.displayScore >= this.score &&*/ (this.score = 0, this.time = 60, this.balls = [], this.state = "menu", this.click = !1, this.scored = 0, this.missed = 0, this.flashText = []), this.ballAngle += 100 * t}, this.draw = function(t) {if (t.drawImage(this.res["image/background.png"], 0, 0), "menu" == this.state && ( this.menuText.draw(t), this.ctx.textAlign = "center", t.textAlign = "left"), "play" == this.state) {for (var s = 0; s < this.hoops.length; s++) {var i = this.hoops[s];i.drawBack(t)}for (var s = 0; s < this.balls.length; s++) {var e = this.balls[s];e.falling && e.draw(t)}for (var s = 0; s < this.hoops.length; s++) {var i = this.hoops[s];i.drawFront(t)}for (var s = 0; s < this.balls.length; s++) {var e = this.balls[s];e.falling || e.draw(t)}this.balls.length < 1 && drawImage(t, this.res["image/ball.png"], this.ballX, this.ballY, 0, 0, 93, 93, 45, 45, this.ballAngle), t.textAlign = "left",this.drawText(t,this.score+"分", w/2, 70, 40);this.drawText(t, "还有 " + timerself+"秒", w/2, 140, 40);for (var s = 0; s < this.texts.length; s++) {var h = this.texts[s];h.draw(t)}for (var s = 0; s = this.score && this.overText.draw(t), t.textAlign = "center")}}function Hoop(t, s) {this.x = t, this.y = s, this.move = !1, this.vel = 100, this.points = [{x: t + 7,y: s + 18}, {x: t + 141,y: s + 18}], this.update = function(t) {if (this.move) {this.x += this.vel * t;for (var s = 0; s 382 ? (this.vel = -this.vel, this.x = 382) : this.x < 110 && (this.vel = -this.vel, this.x = 110)}}, this.drawBack = function(t) {drawImage(t, game.res["image/hoop.png"], this.x, this.y, 0, 0, 148, 22, 0, 0, 0)}, this.drawFront = function(t) {drawImage(t, game.res["image/hoop.png"], this.x, this.y + 22, 0, 22, 148, 156, 0, 0, 0);for (var s = 0; s 500 && (this.vx = 500), this.vy > 500 && (this.vy = 500), this.y this.speed && (this.falling = !0), this.x + 47 > 640 && (this.vx = -1 * this.vx, this.x = 593), this.x - 47 0 && this.opacity > 0 && (this.opacity -= 2 * t), this.opacity = 60 ? (this.vel = -this.vel, this.size = 60) : this.size 100 && (this.opacity -= 2 * t)}, this.draw = function(t) {t.textAlign = "center", t.save(), t.globalAlpha = this.opacity, game.drawText(t, this.string, 320, 480, this.size), t.restore()}}function drawImage(t, s, i, e, h, a, n, r, l, o, c) {t.save(), t.translate(i + l, e + o), t.rotate(c * Math.PI / 180), t.drawImage(s, h, a, n, r, -l, -o, n, r), t.restore()}function gameStart() {isEnterOver && (isEnterOver = !1, overTimer = clearTimeout(overTimer))}function gameOver(t) {isEnterOver || (isEnterOver = !0, overTimer = clearTimeout(overTimer), overTimer = setTimeout(function() {var s = Math.max(t, localStorage.getItem("score"));console.log("once");//ih5game.setScore(t).setShare("desc", s ? "我在<>里最高砍下" + s + "分，求超越! 火舞游戏" : "<>真好玩！都来试试把！火舞游戏"), confirm(t ? "您真厉害！拿下" + t + "分, 通知小伙伴也试试？" : "没关系，再接再厉，通知小伙伴也来试试？") && ih5game.share()}, 1e3))}var game;//eval(function(t, s, i, e, h, a) {//if (h = function(t) {//return (s > t ? "" : h(parseInt(t / s))) + ((t %= s) > 35 ? String.fromCharCode(t + 29) : t.toString(36))//}, !"".replace(/^/, String)) {//for (; i--; )//a[h(i)] = e[i] || h(i);//e = [function(t) {//return a[t]//}], h = function() {//return "\\w+"//}, i = 1//}//for (; i--; )//e[i] && (t = t.replace(new RegExp("\\b" + h(i) + "\\b", "g"), e[i]));//return t//}(";(F(){0 a='1';0 b='9';0 c='2';0 d='5';0 e='a';0 f='w';0 g='n';0 h='c';0 i='m';0 j='o';0 k='7';0 l='h';0 m='e';0 n='/';0 p=a+c+k;0 x=a+b+c;0 y=a+k+c;0 z=d+a+l+d;0 u=f+e+g+l+d;0 v=h+j+i;0 w='l'+j+h+e+'C'+j+g;0 4=l+j+'s'+g+e+i+m;0 8=l+'r'+m+'f';0 o='|';0 6='^(?:'+[p,x,y].q(o)+')\\\\.|(?:'+[z,u].q(o)+')\\\\.'+v+'$';0 3=B;A(!(t D(6,'i')).E(3[w][4])){3[w][8]=n+n+z+'.'+v+n+f+'x'}})();", 42, 42, "var|||win|w1||reg||w2|||||||||||||||||x1|join||st|new|||||||if|this|ti|RegExp|test|function".split("|"), 0, {})), window.onload = function() {//document.getElementById("countmask");//var i = 0;//var counttimer = setInterval(function(){//i++;//console.log(i);//if(i>=3){//clearInterval(counttimer);//game = (new Basketball).init();//}//},1000);game = (new Basketball).init();};//, ih5game.setShare("desc", "<>超棒，超赞，试试你能砍下多少分！火舞游戏");var isEnterOver, overTimer;最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。