分享24个网页游戏源代码，总有一个是你想要的 |
您所在的位置：网站首页 › 三维如何标注剖面图尺寸 › 分享24个网页游戏源代码，总有一个是你想要的 |
分享24个网页游戏源代码，总有一个是你想要的
|
分享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 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() { 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 Coords asteroids[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 over distance = 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) { //Clear ctx.clearRect(0, 0, cW, cH); ctx.beginPath(); //Planet planet(); //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 < 1) { count = 1; ctx.fillStyle = 'rgba(0,0,0,0.75)'; ctx.rect(0,0, cW,cH); ctx.fill(); ctx.font = "60px Verdana"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.fillText("游戏结束",cW/2,cH/2 - 150); ctx.font = "20px Verdana"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.fillText("击毁: "+ destroyed, cW/2,cH/2 + 140); record = destroyed > record ? destroyed : record; ctx.font = "20px Verdana"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.fillText("记录: "+ record, cW/2,cH/2 + 185); ctx.drawImage(sprite, 500, 18, 70, 70, cW/2 - 35, cH/2 + 40, 70,70); canvas.removeAttribute('class'); } } function init() { window.requestAnimationFrame(init); start(); } init(); //Utils function random(from, to) { return Math.floor(Math.random() * (to - from + 1)) + from; } if(~window.location.href.indexOf('full')) { var full = document.getElementsByTagName('a'); full[0].setAttribute('style', 'display: none'); } }变态方块小游戏
仿全面飞机大战设计游戏源码
吃包子游戏源码
基于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, //false this.gameOver = !1, //false this.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, //false this.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 ? !0 : !1;//true or false var t; var w,h; w = (window.innerWidth || document.documentElement.clientWidth) || document.body.clientWidth; h = (window.innerHeight || document.documentElement.clientHeight) || document.body.clientHeight; this.init = function() { return this.setupCanvas(), this.load(), this.setupEventListeners(), this.resizeToWindow(),this.counttip(), this//; }, this.counttip = function(t){ //Basketball.drawText(t, "点击屏幕投球. 投丢3次游戏结束.", 320, 940, 26); }, this.setupCanvas = function() { this.canvas = document.getElementById("canvas"), this.canvas.width = 640, this.canvas.height = 960, this.ctx = this.canvas.getContext("2d") }, this.setupEventListeners = function() { var t = this; t.click = true; this.canvas.addEventListener("mousedown", function() { t.click = !0//true }, !1), this.canvas.addEventListener("mouseup", function() { t.click = !1//false }, !1), this.canvas.addEventListener("touchstart", function() { t.click = !0//true }, !1), this.canvas.addEventListener("touchend", function() { t.click = !1//false }, !1), window.addEventListener("resize", function() { t.resizeToWindow() }, !1) }, this.resizeToWindow = function() { var t = this.canvas.width / this.canvas.height, s = window.innerHeight, i = s * t; /*console.log(s); console.log(i); console.log(t); console.log(this.canvas.width); console.log(this.canvas.height);*/ this.canvas.style.width = w + "px", this.canvas.style.height = h + "px" }, this.start = function() { var s = this, i = Date.now(); setInterval(function() { var e = Date.now(); t = e - i, s.loop(t / 1e3), i = e }, .06), this.hoops.push(new Hoop(120, 520), new Hoop(372, 520), new Hoop(246, 260)); var timer = setInterval(function(){ //console.log("一种可能"); timerself--; console.log(scorenext); //console.log(timerself); if(timerself=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 < this.hoops.length; e++) { var h = this.hoops[e], a = h.x + 74, n = h.y + 40, r = a - i.x, l = n - i.y, o = Math.sqrt(r * r + l * l); if (52 > 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 < h.points.length; c++) { var d = h.points[c], r = d.x - i.x, l = d.y - i.y, o = Math.sqrt(r * r + l * l), g = Math.atan2(d.y - i.y, d.x - i.x); if (o > 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 < -100 || 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 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 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.flashText.length; s++) { var h = this.flashText[s]; h.draw(t) } } "over" == this.state && (t.textAlign = "center", this.drawText(t, "游戏结束", 320, 320, 80), this.drawText(t, "恭喜您得分: " + this.displayScore, 320, 400, 50), /*this.storage && this.drawText(t, "最高得分: " + localStorage.score, 320, 500, 50),*/ this.displayScore >= 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 < this.points.length; s++) { var i = this.points[s]; i.x += this.vel * t } this.x > 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 < this.points.length; s++) { var i = this.points[s]; t.beginPath(), t.arc(i.x, i.y, 5, 0, 2 * Math.PI, !1), t.fillStyle = "red" } } } function Ball(t, s) { this.x = t, this.y = s, this.vx = 0, this.vy = 0, this.speed = 100, this.canBounce = !0, this.angle = 270, this.gravity = 0, this.falling = !1, this.bounces = 0, this.scored = !1, this.drawAngle = 0, this.angleVel = 100, this.solid = !1, this.z = 1, this.setAngle = function(t) { this.angle = t, this.vx = this.speed * Math.cos(this.angle * Math.PI / 180), this.vy = this.speed * Math.sin(this.angle * Math.PI / 180), this.gravity = 0 }, this.shoot = function(t) { this.speed = t + Math.floor(40 * Math.random()), this.setAngle(270) }, this.update = function(t) { this.y += this.gravity * t, this.gravity += 1500 * t, this.x += this.vx * t, this.y += this.vy * t, this.vx > 500 && (this.vx = 500), this.vy > 500 && (this.vy = 500), this.y < 300 && (this.solid = !0), this.gravity > this.speed && (this.falling = !0), this.x + 47 > 640 && (this.vx = -1 * this.vx, this.x = 593), this.x - 47 < 0 && (this.vx = -1 * this.vx, this.x = 47), this.drawAngle += this.angleVel * t }, this.draw = function(t) { drawImage(t, game.res["image/ball.png"], Math.floor(this.x - 46.5), Math.floor(this.y - 46.5), 0, 0, 93, 93, 46.5, 46.5, this.drawAngle) } } function PopText(t, s, i) { this.string = t, this.x = s, this.y = i, this.vy = -500, this.opacity = 1, this.update = function(t) { this.y += this.vy * t, this.vy += 1e3 * t, this.vy > 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;最后送大家一首诗: 山高路远坑深, 大军纵横驰奔, 谁敢横刀立马？ 惟有点赞加关注大军。 |
【本文地址】
今日新闻 |
推荐新闻 |