js实现简单的射击游戏（很适合学习用）资源-CSDN文库

共18个文件

png：9个

js：5个

html：2个

JavaScript

HTML5

需积分: 46 127 浏览量 2017-03-20 12:44:18 上传评论收藏 1.41MB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

射击游戏.zip （18个子文件）

射击游戏

match

index.html 7KB

images

bullet.png 15KB

bg.png 99KB

banana.png 51KB

UI.png 71KB

Start.png 549KB

monkey.png 382KB

Start_btn.png 18KB

monkey1.png 145KB

monster.png 132KB

scripts

player.js 2KB

score.js 757B

enemies.js 4KB

bullets.js 2KB

post.js 936B

game2.html 136B

使用必读.url 261B

css

说明.htm 4KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-touch-fullscreen" content="yes"/>  <meta name="format-detection" content="telephone=no"> <meta name=”apple-mobile-web-app-capable” content=”yes” /> <meta name="viewport" id="viewport_meta" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>    <link rel="apple-touch-icon" href="" /> <link rel="apple-touch-icon" sizes="114x114" href="" /> <link rel="apple-touch-icon" sizes="72x72" href="" /> <link rel="apple-touch-startup-image" href="" />   <style> body{ margin: 0; } .window{ } .window, .canvas { margin: 0 auto; } .window .canvas { background: url("images/bg.png"); } .mask{ background: url("images/Start.png") repeat scroll 0% 0% transparent; width: 640px; height: 960px; position: absolute; top: 0px; z-index: 9999; } .start{ background: url("images/Start_btn.png") repeat scroll 0% 0% transparent; width: 218px; height: 83px; border:0; padding:0; margin-top: 350px; margin-left: 180px; cursor:pointer; } .gunselect{ padding-left: 0px; position: absolute; top: 800px; left: 400px; } .gunselect input{ border:0; margin:0; } .gunselect .up{ background: url("images/UI.png") repeat scroll -324px -148px transparent; width: 63px; height: 35px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .gunselect .gun{ background: url("images/UI.png") repeat scroll -169px -32px transparent; width: 221px; height: 83px; } .gunselect .down{ background: url("images/UI.png") repeat scroll -324px -148px transparent; width: 63px; height: 35px; -webkit-transform: rotate(180deg) scale(1); -moz-transform: rotate(180deg) scale(1); -o-transform: rotate(180deg) scale(1); transform: rotate(180deg) scale(1); } .gunselect .up,.gunselect .down{ margin-left: 80px; } </style>  <script src="scripts/player.js"></script>  <script src="scripts/enemies.js"></script>  <script src="scripts/bullets.js"></script>  <script src="scripts/post.js"></script>  <script src="scripts/score.js"></script> <script> var canvas; var context; var player;//玩家 var enemies;//敌人们 var bullets;//子弹们 var post;//准星 var score; //timeline var timer; const FPS = 30; const SECONDS_BETWEEN_FRAMES = 1 / FPS * 1000 * 1.5; function init() { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); enemies = new Enemies(canvas, context); player = new Player(canvas, context); bullets = new Bullets(canvas, context); post = new Post(canvas, context); score = new Score(canvas, context); timer = setInterval(animation, SECONDS_BETWEEN_FRAMES); canvas.onmousedown = startShoot; canvas.onmouseup = stopShoot; canvas.onmousemove = aiming; canvas.onmouseleave = stopShoot; canvas.onmouseout = stopShoot; } //瞄准中 function aiming(event) { post.play(getPositionInEvent(event)); } //开始射击 function startShoot(event) { bullets.run(getPositionInEvent(event)); enemies.getBullet(bullets); player.changeStatus(1); post.changeStatus(1); post.play(getPositionInEvent(event)); } //停止射击 function stopShoot() { player.changeStatus(0); post.changeStatus(0); } //在事件对象中取出定位信息 function getPositionInEvent(event) { var pos = {}; event.preventDefault(); pos.x = event.clientX; pos.y = event.clientY + 130; return pos; } //动画主线 function animation() { context.clearRect(0, 0, canvas.width, canvas.height); player.play(); enemies.play(); bullets.play(); score.play(); changeScore(); } //改变积分 function changeScore(){ var resArr = enemies.getScoreInfo(); switch(resArr[1]){ case 5: score.changeStatus(0); break; case 10: score.changeStatus(1); break; case 15: score.changeStatus(2); break; case 20: score.changeStatus(3); break; case 25: score.changeStatus(4); break; case 30: score.changeStatus(5); break; case 35: //GAME OVER 并且清零 enemies.init(); enemies.initScore(); score.changeStatus(0); break; } } function start(event){ init(); document.getElementById("startBtn").style.display = "none"; } function selectGun(value){ switch(value){ case "up": selectUp(); break; case "gun": selectUp(); break; case "down": selectDown(); break; } } function selectUp(){ console.log("UP"); } function selectDown(){ console.log("DOWN"); } function changeBig(event){ var dom = event.target; } function changeSmall(event){ var dom = event.target; } </script> </head> <body> <div class="window"> <canvas class="canvas" id="canvas" width="640" height="960"> 您的浏览器不支持HTML5！ </canvas> <div class="mask" id="startBtn"> <input type="button" class="start" onclick="start(event)"/> </div> <div class="gunselect"> <input type="button" class="up" onclick="selectGun('up')" onmouseover="changeBig(event)" onmouseout="changeSmall(event)"><br/> <input type="button" class="gun" onclick="selectGun('gun')"><br/> <input type="button" class="down" onclick="selectGun('down')" onmouseover="changeBig(event)" onmouseout="changeSmall(event)"><br/> </div> </div> </body> </html>