html5怎么做射击游戏,HTML5/JS 小行星射击游戏

最新推荐文章于 2021-06-01 01:41:43 发布
最新推荐文章于 2021-06-01 01:41:43 发布
阅读量207 收藏
点赞数
文章标签： html5怎么做射击游戏

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var AsteroidsView, game,

bind = function(fn, me) {

return function() {

return fn.apply(me, arguments);

};

};

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

AsteroidsView = (function() {

function AsteroidsView() {

this.render = bind(this.render, this);

this.init = bind(this.init, this);

}

AsteroidsView.prototype.missles = [];

AsteroidsView.prototype.asteroids = [];

AsteroidsView.prototype.score = 0;

AsteroidsView.prototype.highscore = 0;

AsteroidsView.prototype.canMissle = true;

AsteroidsView.prototype.keys = {

left: false,

right: false,

up: false,

down: false,

space: false

};

AsteroidsView.prototype.init = function() {

this.makeElements();

this.addListeners();

this.render();

return this.points(0);

};

AsteroidsView.prototype.makeElements = function() {

this.stage = document.getElementsByClassName("game")[0];

this.scoreEl = document.createElement("h1");

this.highscoreEl = document.createElement("h1");

this.scoreEl.setAttribute("class", "left score");

this.highscoreEl.setAttribute("class", "right score");

this.stage.appendChild(this.scoreEl);

this.stage.appendChild(this.highscoreEl);

this.player = document.createElement("div");

this.player.setAttribute("class", "player");

this.stage.appendChild(this.player);

return this.player.m = {

pref: {

a: 0.075,

s: 0.7,

m: 0.1

},

pos: {

scale: 10,

x: 0,

y: 0,

a: 0

},

vel: {

x: 0,

y: 0,

a: 0

}

};

};

AsteroidsView.prototype.addListeners = function() {

window.addEventListener("keydown", (function(_this) {

return function(e) {

switch (e.keyCode) {

case 38:

return _this.keys.up = true;

case 40:

return _this.keys.down = true;

case 37:

return _this.keys.left = true;

case 39:

return _this.keys.right = true;

case 32:

return _this.keys.space = true;

}

};

})(this));

return window.addEventListener("keyup", (function(_this) {

return function(e) {

switch (e.keyCode) {

case 38:

return _this.keys.up = false;

case 40:

return _this.keys.down = false;

case 37:

return _this.keys.left = false;

case 39:

return _this.keys.right = false;

case 32:

return _this.keys.space = false;

}

};

})(this));

};

AsteroidsView.prototype.keyEvents = function() {

var angleX, angleY;

if (this.keys.up === true) {

angleX = Math.cos((this.player.m.pos.a - 90) * (Math.PI / 180));

angleY = Math.sin((this.player.m.pos.a - 90) * (Math.PI / 180));

this.player.m.vel.x += angleX * this.player.m.pref.a;

this.player.m.vel.y += angleY * this.player.m.pref.a;

this.explosion(this.player.m.pos.x + angleX * -14, this.player.m.pos.y + angleY * -14, 5, 6 + Math.round(12 * Math.random()));

}

if (this.keys.down === true) {

angleX = Math.cos((this.player.m.pos.a - 90) * (Math.PI / 180));

angleY = Math.sin((this.player.m.pos.a - 90) * (Math.PI / 180));

this.player.m.vel.x -= angleX * this.player.m.pref.a;

this.player.m.vel.y -= angleY * this.player.m.pref.a;

this.explosion(this.player.m.pos.x + angleX * 1, this.player.m.pos.y + angleY * 1, 5, 6 + Math.round(12 * Math.random()));

}

if (this.keys.left === true) {

this.player.m.vel.a -= this.player.m.pref.s;

}

if (this.keys.right === true) {

this.player.m.vel.a += this.player.m.pref.s;

}

if (this.keys.space === true) {

return this.missle(this.player.m.pos);

}

};

AsteroidsView.prototype.missle = function(v) {

var missle;

if (this.canMissle === true) {

this.canMissle = false;

setTimeout((function(_this) {

return function() {

return _this.canMissle = true;

};

})(this), this.player.m.pref.m * 1000);

missle = document.createElement("div");

missle.setAttribute("class", "missle");

missle.pos = {

x: parseInt(v.x),

y: parseInt(v.y),

a: parseInt(v.a),

scale: 4,

speed: 12

};

missle.death = setTimeout((function(_this) {

return function() {

missle.parentNode.removeChild(missle);

return _this.missles.splice(0, 1);

};

})(this), 3000);

this.stage.appendChild(missle);

this.missles.push(missle);

if (this.missles.length > 12) {

clearTimeout(this.missles[0].death);

this.missles[0].parentNode.removeChild(this.missles[0]);

return this.missles.splice(0, 1);

}

}

};

AsteroidsView.prototype.explosion = function(x, y, s, i) {

var beeeen, n;

n = 0;

while (n < i) {

setTimeout((function(_this) {

return function() {

return _this.explosion(x, y, s);

};

})(this), 30 + n * 30);

n++;

}

x += Math.round((Math.random() - 0.5) * s);

y += Math.round((Math.random() - 0.5) * s);

beeeen = document.createElement("div");

beeeen.setAttribute("class", "explosion");

beeeen.style.marginTop = y + "px";

beeeen.style.marginLeft = x + "px";

beeeen.style.width = beeeen.style.height = s + "px";

this.stage.appendChild(beeeen);

return setTimeout((function(_this) {

return function() {

return beeeen.parentNode.removeChild(beeeen);

};

})(this), 500);

};

AsteroidsView.prototype.asteroid = function(x, y, type) {

var asteroid, size, types;

asteroid = document.createElement("div");

types = ["a", "b", "c"];

size = [80, 40, 25];

if (type === void 0) {

type = Math.floor(Math.random() * types.length);

}

asteroid.setAttribute("class", "asteroid type-" + types[type]);

if (x === void 0 || y === void 0) {

if (Math.random() > 0.5) {

if (Math.random() > 0.5) {

x = -window.innerWidth / 2 - 40;

} else {

x = window.innerWidth / 2 + 40;

}

y = Math.random() * window.innerHeight;

} else {

if (Math.random() > 0.5) {

y = -window.innerHeight / 2 - 40;

} else {

y = window.innerHeight / 2 + 40;

}

x = Math.random() * window.innerWidth;

}

}

asteroid.pos = {

x: x,

y: y,

aInit: Math.random() * 360,

a: Math.random() * 360,

s: (Math.random() - 0.5) * 2,

speed: Math.min(0.5 + Math.random() * 2 + ((Math.random() * this.score) / 2000), 5),

health: (3 - type) * 2,

scale: size[type]

};

this.stage.appendChild(asteroid);

return this.asteroids.push(asteroid);

};

AsteroidsView.prototype.update = function() {

var i, n, results;

this.player.m.pos.x += this.player.m.vel.x;

this.player.m.pos.y += this.player.m.vel.y;

this.player.m.pos.a += this.player.m.vel.a;

if (Math.abs(this.player.m.vel.a) < 0.1) {

this.player.m.vel.a = 0;

} else {

this.player.m.vel.a = this.player.m.vel.a / 1.1;

}

this.player.m.pos = this.loop(this.player.m.pos);

i = 0;

while (i < this.missles.length) {

if (this.missles[i] !== void 0) {

this.missles[i].pos.x += Math.cos((this.missles[i].pos.a - 90) * (Math.PI / 180)) * this.missles[i].pos.speed;

this.missles[i].pos.y += Math.sin((this.missles[i].pos.a - 90) * (Math.PI / 180)) * this.missles[i].pos.speed;

if (Math.random() > 0.5) {

this.explosion(this.missles[i].pos.x, this.missles[i].pos.y, 3 + Math.random() * 2);

}

}

i++;

}

i = 0;

results = [];

while (i < this.asteroids.length) {

if (this.asteroids[i] !== void 0) {

this.asteroids[i].pos.x += Math.cos((this.asteroids[i].pos.aInit - 90) * (Math.PI / 180)) * this.asteroids[i].pos.speed;

this.asteroids[i].pos.y += Math.sin((this.asteroids[i].pos.aInit - 90) * (Math.PI / 180)) * this.asteroids[i].pos.speed;

this.asteroids[i].pos.a += this.asteroids[i].pos.s;

this.asteroids[i].pos = this.loop(this.asteroids[i].pos);

}

n = 0;

while (n < this.missles.length) {

if (this.collision(this.missles[n].pos, this.asteroids[i].pos)) {

this.asteroids[i].pos.health--;

this.explosion(this.missles[n].pos.x, this.missles[n].pos.y, 15);

this.missles[n].pos.y = 1000000;

this.points(10);

}

n++;

}

if (this.collision(this.player.m.pos, this.asteroids[i].pos)) {

this.killPlayer();

}

if (this.asteroids[i].pos.health < 0) {

this.explosion(this.asteroids[i].pos.x, this.asteroids[i].pos.y, 25, 8);

switch (this.asteroids[i].pos.scale) {

case 80:

this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 1);

this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 1);

this.points(500);

break;

case 40:

this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);

this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);

this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);

this.points(250);

break;

default:

this.points(100);

}

this.asteroids[i].parentNode.removeChild(this.asteroids[i]);

this.asteroids.splice(i, 1);

}

results.push(i++);

}

return results;

};

AsteroidsView.prototype.killPlayer = function() {

if (this.invincible === false || this.invincible === void 0) {

this.explosion(this.player.m.pos.x, this.player.m.pos.y, 50, 4);

this.player.m.pos.x = 0;

this.player.m.pos.y = 0;

this.player.m.vel.x = 0;

this.player.m.vel.y = 0;

this.invincible = true;

this.points(0, true);

return setTimeout((function(_this) {

return function() {

return _this.invincible = false;

};

})(this), 3000);

}

};

AsteroidsView.prototype.render = function() {

var i, n;

this.update();

this.keyEvents();

this.player.setAttribute("style", this.pos(this.player.m.pos));

i = 0;

while (i < this.missles.length) {

this.missles[i].setAttribute("style", this.pos(this.missles[i].pos));

i++;

}

i = 0;

while (i < this.asteroids.length) {

this.asteroids[i].setAttribute("style", this.pos(this.asteroids[i].pos));

i++;

}

if (this.asteroids.length < 5) {

n = 1 + Math.floor(Math.random() * 4);

while (n > 0) {

this.asteroid();

n--;

}

}

return requestAnimationFrame(this.render);

};

AsteroidsView.prototype.points = function(add, reset) {

if (reset === void 0) {

this.score += add;

this.highscore = Math.max(this.score, this.highscore);

} else {

this.score = 0;

}

this.scoreEl.innerHTML = this.score;

return this.highscoreEl.innerHTML = this.highscore;

};

AsteroidsView.prototype.collision = function(one, two) {

var xc, yc;

xc = false;

yc = false;

if (Math.abs(one.x - two.x) < (0.75 * (one.scale + two.scale))) {

xc = true;

}

if (Math.abs(one.y - two.y) < (0.75 * (one.scale + two.scale))) {

yc = true;

}

if ((xc === yc && yc === true)) {

return true;

} else {

return false;

}

};

AsteroidsView.prototype.loop = function(v) {

var buffer;

buffer = 30;

if (v.x > window.innerWidth / 2 + buffer) {

v.x = -window.innerWidth / 2 - (buffer / 2);

}

if (v.x < -window.innerWidth / 2 - buffer) {

v.x = window.innerWidth / 2 + (buffer / 2);

}

if (v.y > window.innerHeight / 2 + buffer) {

v.y = -window.innerHeight / 2 - (buffer / 2);

}

if (v.y < -window.innerHeight / 2 - buffer) {

v.y = window.innerHeight / 2 + (buffer / 2);

}

return v;

};

AsteroidsView.prototype.pos = function(v) {

var s;

s = "opacity: 1;";

s += "-webkit-transform: translate(" + (Math.round(v.x)) + "px," + (Math.round(v.y)) + "px) rotate(" + (Math.round(v.a)) + "deg) ; ";

s += "-moz-transform: translate(" + (Math.round(v.x)) + "px," + (Math.round(v.y)) + "px) rotate(" + (Math.round(v.a)) + "deg) ; ";

s += "-ms-transform: translate(" + (Math.round(v.x)) + "px," + (Math.round(v.y)) + "px) rotate(" + (Math.round(v.a)) + "deg) ; ";

s += "-o-transform: translate(" + (Math.round(v.x)) + "px," + (Math.round(v.y)) + "px) rotate(" + (Math.round(v.a)) + "deg) ; ";

s += "transform: translate(" + (Math.round(v.x)) + "px," + (Math.round(v.y)) + "px) rotate(" + (Math.round(v.a)) + "deg) ;";

return s;

};

return AsteroidsView;

})();

game = new AsteroidsView;

game.init();

}).call(this);

高仿吴彦祖
关注
使用javascript+canvas实现行星射击游戏带爆炸效果（很适合学习用）
学前端的第五个月
04-30 420
接触web编程只有2个月时间的新手建议做一个小游戏，能够让你树立起足够的信心。
微信小游戏源码及H5开源小程序游戏源码1000套
热门推荐
AMikMy的博客
07-30 2万+
　　本文将详细列举微信小程序上以找到的开源微信小游戏源码和游戏相关项目的列表-老派文本冒险、教育游戏、8位平台游戏、基于浏览器的游戏、独立游戏、GameJam项目、商业游戏的附加组件/地图/插件、库、框架、引擎等等。如果要将存储库添加到列表中，请创建问题，或派生此存储库并提交请求。 　　源码及演示：y.wxlbyx.icu 　　Cocos2d-x公司-多平台框架，用于构建二维游戏、交互式书籍、演示和其他图形应用程序。 它基于cocos2diphone，但没有使用Objective-C，而是使用C++。它
HTML5实现射击游戏.rar
01-02
用h5做出的3d网页游戏，电脑版去看哦。
Skytte：一款令人印象深刻的 HTML5 射击游戏
weixin_33875564的博客
12-08 195
　　Skytte 是一款浏览器里的 2D 射击游戏。使用 Canvas 元素和大量的 JavaScript 代码实现。Skytte 是用我们的开源和现代的前端技术创造的。经典，快节奏的横向滚动射击游戏，探索新的 HTML5 Canvas 功能，使我们能够建立一个全新的互动式网站和应用程序的套件。 您可能感兴趣的相关文章 35个让人惊讶的 CSS3 动画效果演示 让人爱不释手的Web应...
html5写的射击小游戏
u011809700的专栏
08-24 1427
通过设置小球的水平速度和竖直速度，让小球射击右侧在墙上的小球，当两个小球碰撞时，墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。 　　以下是代码： !DOCTYPE html> mata charset="utf-8"> html> script> var cwidth=600//画布宽 var cheight=400;//画布高 var aimx=300;//长方
html5 如何实现自动射击,基于HTML5实现的横版射击游戏详解
weixin_36469726的博客
05-30 316
功能说明：基于http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5的横版射击游戏，参考自flash游戏《双面特工》。左右方向键控制移动，下方向键蹲下，上方向键跳跃，空格键射击。体验前请先关闭输入法。该游戏基于自己开发的HTML5游戏框架cnGameJS。效果预览：实现分析：1.关于多层地图。在上一个HTML5游戏《坦克后援队》...
基于HTML的飞机射击游戏
不脱发的程序猿
10-07 1万+
本篇博文将分享一篇基于HTML的简单的飞机射击游戏，下方是玩家飞机，可按空格键能不断地发射子弹，上方是随机出现的敌方飞机。玩家可以通过键盘的方向键控制自己飞机的移动，当玩家飞机的子弹碰到敌方飞机时，敌方飞机出现爆炸效果。
asteroidGame:使用HTML和Javascript制作小行星游戏以学习Web开发
04-25
小行星游戏 建立像Asteroid一样的几何2D平台游戏 通过使用原始JavaScript和数学概念，主要目标是获得与80年代游戏一样的确切游戏风格。 以下是每个以下游戏开发主题的一些理解： 画布大小调整 面向对象的交互 球员...
使用 JavaScript 编写的简单小行星游戏（附源代码）.zip
最新发布
08-08
项目：用 JavaScript 编写的简单小行星游戏 简单的小行星游戏是一个 javascript 项目。这是一款简单而有趣的游戏，你可能将它列入你的愿望清单中。这款游戏主要包含 javascript 和一些 CSS，以使其看起来很漂亮。这...
Archeroids:使用 jQuery 构建的类小行星游戏
06-09
灵感来自小行星（和罗宾汉） 这是一款在线游戏，用户使用弓箭射击目标并累积积分。 有15个目标，玩家在射击所有目标后获胜。 玩家每次被目标击中都会失去 2 分。 点击“开始游戏”开始游戏。 单击“路线”以获取更...
HTML5射击游戏
07-11
完整的小demo，简单的网页小游戏，包含css,img,js文件包和 .html文件，放到H5就能直接用
js实现简单的射击游戏（很适合学习用）
03-20
挺简单的一个小demo 很适合新手学习js
html+js射击类小游戏
05-07
html+js射击类小游戏，有分值，html+js,可以直接运行，源码，可直接运行
js 射击 游戏 带射击线路
03-30
js 射击 游戏 带射击线路，带爆炸效果，js 射击 游戏 带射击线路，带爆炸效果，js 射击 游戏 带射击线路，带爆炸效果，js 射击 游戏 带射击线路，带爆炸效果，
html5炮弹射击游戏
06-14
一个使用html5设计的射击游戏，涉及旋转炮管碰撞检测等技术
html5 射击小游戏demo,html5写的射击小游戏
weixin_35891825的博客
06-01 648
通过设置小球的水平速度和竖直速度，让小球射击右侧在墙上的小球，当两个小球碰撞时，墙上的小球会有新的位置。游戏同时可以记录打中的球的个数。以下是代码：var cwidth=600//画布宽var cheight=400;//画布高var aimx=300;//长方体目标物x坐标var aimy=100;//长方体目标物y坐标var aimWidth=80;//长方体目标物的宽var aimHeigh...
html5 制作游戏
Maykidd的博客
11-18 1676
使用HTML5制作简单游戏 记录一下自己制作游戏的思路 制作思路 做每个游戏，一般都是以下的模式：   l  先初始化 l  运行时，用一个timer不断的刷新页面： 1.        进行场景重绘（一般是刷新背景）。 2.        执行游戏逻辑（比如人物移动、障碍物等） 3.        绘制场景、人物 游戏图片使用
C++实现射击小行星游戏源码解析
资源摘要信息:"C++小游戏——射击小行星源码" 一、游戏编程基础知识点 1. 游戏循环（Game Loop） 游戏循环是游戏程序的核心，负责游戏状态的更新和渲染。通常包括输入处理、游戏逻辑更新和图形渲染三个部分。 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值