HTML文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <srcipt src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></srcipt> <script src="script.js" type="text/javascript"></script> </head> <body> <canvas id="myCanvas" width="320px" height="480px"></canvas> </body></html>JavaScript文件：/** @Author: Administrator* @Date: 2016-11-24 21:00:25* @Last Modified by: Administrator* @Last Modified time: 2016-11-25 11:27:40*/'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var bgcolor = "black";var score;var highScore;var fps = 30;var player;var bullets = [];var enemies = [];// 重置function reset(){ if(score > highScore) highScore = score; score = 0;}// 背景画布function drawBackground(){ ctx.fillStyle = bgcolor; ctx.fillRect(0,0,canvas.width,canvas.height);}//分数画布function drawScore(){ ctx.fillStyle = "#CCFF99"; ctx.font ="24px sans-serif"; ctx.fillText("Score:" + score,10,24); ctx.font ="16px sans-serif"; ctx.fillText("HighScore:" + highScore,10,48);} // Ready画布function drawReady(){ drawBackground(); drawScore(); ctx.fillStyle = "white"; ctx.font = "72px sans-serif"; ctx.fillText("Ready?",canvas.width/2 - 140,canvas.height/2);}setInterval(function(){ update(); draw();},1000/fps);$(document).bind("keydown","left",function(){});function update(){ if(keydown.left){ player.x -= 1; } if(keydown.right){ player.x += 1; } if(keydown.space){ player.shoot(); } player.x = player.x.clamp(0,canvas.width-player.width); bullets.forEach(function(bullet){ bullet.update(); }); bullets = bullets.filter(function(bullet){ return bullet.active; }); enemies.forEach(function(enemy){ enemy.update(); }; enemies = enemies.filter(function(enemy){ returnenemy.active; }); handleCollisions(); }function draw(){ canvas.clearRect(0,0,canvas.width,canvas.height); player.draw(); bullets.forEach(function(bullet){ bullet.draw(); }); enemies.forEach(function(enemy){ enemy.draw(); });}var player ={ color:"#0000AA", x:220, y:270, width:32, height:32, draw:function(){ canvas.fillStyle=this.color; canvas.fillRect(this.x,this.y,this.width,this.height); }}; // 创建炮弹function bullet(p){ p.active = true; p.xVelocity = 0; p.yVelocity = speed; p.color = "#FFFFFF"; p.width = 3px; p.width = 3px; p.inBounds = function(){ return p.x >= 0 && p.x <= canvas.width && p.y >= 0 && p.y <= canvas.height; }; p.draw = function(){ canvas.fillStyle = this.color; canvas.fillRect(this.x,this.y,this.width,this.height); }; p.update = function(){ p.x += p.xVelocity; p.y += p.yVelocity; p.active = p.active && p.inBounds(); }; return p; }// player射击player.shoot = function(){ var bulletPosition = this.midpoint(); bullets.push(bullet({ speed:5, x:bulletPosition.x, y:bulletPosition.y }));};player.midpoint = function(){ return{ x:this.x+this.width/2, y:this.y+this.height/2 };};// 创建敌人function enemy(e){ e.active=true; e.age=Math.floor(Math.random()*128); e.color="#A2B"; e.x= canvas.width/4+Math.random()*canvas.width/2; e.y=0; e.xVelocity=0 e.yVelocity=2; e.width=32; e.height=32; e.inBounds = function(){ return e.x >= 0 && e.x <= canvas.width && e.y >= 0 && e.y <= canvas.height; }; e.draw = function(){ canvas.fillStyle=this.color; canvas.fillRect(this.x,this.y,this.width,this.height); }; e.update = function(){ e.x += e.xVelocity; e.y += e.yVelocity; e.xVelocity=3*Math.sin(I.age*Math.PI/64); e.age++; e.active = e.active && e.inBounds(); }; e.explode = function(){ this.active = false; }; return e;}// 碰撞检测function collides(a, b){ return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;}// 碰撞处理function handleCollisions(){ bullets.forEach(function(bullet){ enemies.forEach(function(enemy){ if(collides(bullet,enemy)){ enemy.explode(); bullet.active=false; } }) });}document.addEventListener('DOMContentLoaded',reset());
添加回答
举报
0/150
提交
取消