html 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>canvas 下雨 </title>
- <style>
- *{ margin:0; padding:0;}
- li{ list-style:none;}
- body {
- width: 100%;
- height: 100%;
- background: #000;
- }
- html,.box {
- position: relative;
- width: 100%;
- height: 100%;
- }
- canvas {
- float: left;
- }
- </style>
- </head>
- <body>
- <picture>
- <canvas id="drawing" width="1200" height="800"></canvas>
- <script type="text/javascript">
- (function() {
- var lastTime = 0;
- var vendors = ['webkit', 'moz'];
- for(var x = 0; x <vendors.length && !window.requestAnimationFrame; ++x) {
- window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
- window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
- window[vendors[x] + 'CancelRequestAnimationFrame'];
- }
- if (!window.requestAnimationFrame) {
- window.requestAnimationFrame = function(callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
- var id = window.setTimeout(function() {
- callback(currTime + timeToCall);
- }, timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
- if (!window.cancelAnimationFrame) {
- window.cancelAnimationFrame = function(id) {
- clearTimeout(id);
- };
- }
- }());
- function randomNum(maxRandom,minRandom){// 随机数
- let newMinRandom = minRandom == undefined ? 1 : minRandom;
- return Math.floor(Math.random()*maxRandom)+newMinRandom;
- }
- function randomDirection(){// 随机方向
- if( randomNum(2,1) == 2 ){
- return 1;
- }else{
- return -1;
- }
- }
- function randomColor(){// 随机颜色
- var c1 = randomNum(255,0);
- var c2 = randomNum(255,0);
- var c3 = randomNum(255,0);
- return "rgba("+c1+","+c2+","+c3+",1)";
- }
- // function gradientColor(){// 随机渐变色
- // var myGradient = draw.createLinearGradient(0, 0, 0, 160);
- // myGradient.addColorStop(0, randomColor());
- // myGradient.addColorStop(1, randomColor());
- // return myGradient;
- // }
- function shootingGame(){
- var board = document.getElementById("drawing");
- var draw = board.getContext("2d");
- var enemyArray = [];
- this.init = (function(){
- enemy();
- })();
- var enemyLength = 10;
- var enemyArray = [];
- var enemyWidth = 50;
- var enemyHeight = 10;
- var enemySpeed = 2;
- var boardWidth = board.width;
- var boardHeight = board.height;
- var bulletWidth = 10;
- var bulletHeight = 20;
- var bulletSpeed = 40;
- var startTime = 2000;// 子弹生成的间隔时间
- var explodedWidth = 10;
- var explodedHeight = 20;
- var explodedSpeed = 10;
- var explodedOpacity = 10;
- function bullet(x,y){// 子弹
- this.x = x;
- this.y = y;
- }
- function enemy(){ // 创建敌人
- this.x = randomNum(boardWidth-enemyWidth,0);
- this.y = randomNum(50,20);
- this.fillColor = randomColor();
- this.direction = randomDirection() * enemySpeed;
- this.bulletArray = [];
- this.explodedArray = [];
- this.explodedDir = ["leftmost","left","center","right","rightmost"];
- this.enemyMove = function(){// 敌人移动
- if( this.x>= boardWidth-enemyWidth ){
- this.direction = this.direction ? -enemySpeed : enemySpeed;
- }
- if( this.x <= 0 ){
- this.direction = enemySpeed;
- }
- // this.y += .05;
- this.x += this.direction;
- }
- this.bulletMove = function(){// 子弹移动
- var newBulletArray = [];
- for( let i in this.bulletArray ){
- let bullet = this.bulletArray[i];
- // 不知道为什么子弹高度会误差 10
- if( bullet.y + bulletSpeed <boardHeight - bulletHeight-10){// 是否超出屏幕
- bullet.y += bulletSpeed;
- newBulletArray.push(bullet);
- }else{
- bullet.y = boardHeight - bulletHeight -10;
- this.addExploded(bullet);// 增加爆炸
- this.explodedMove();
- // bullet.y = boardHeight - bulletHeight*2
- // console.log(111)
- }
- }
- this.bulletArray = newBulletArray;
- }
- this.addExploded = function(obj){
- this.explodedArray.push({
- leftmost: {x:obj.x-bulletWidth*2,y:obj.y,opacity:100},
- left: {x:obj.x+bulletWidth/5,y:obj.y,opacity:100},
- center: {x:obj.x+bulletWidth/5,y:obj.y,opacity:100},
- right: {x:obj.x+bulletWidth/5,y:obj.y,opacity:100},
- rightmost: {x:obj.x+bulletWidth*2,y:obj.y,opacity:100}
- })
- }
- this.explodedMove = function(){
- var newExplodedArray = [];
- for( let i in this.explodedArray ){
- let arr = [];
- for( let dir of this.explodedDir ){
- let exploded = this.explodedArray[i];
- if( exploded[dir] ){
- if( dir == "leftmost" || dir == "left" ){
- exploded[dir].x-=explodedSpeed;
- exploded[dir].y-=explodedSpeed;
- }
- if( dir == "center" ){
- exploded[dir].y-=explodedSpeed;
- }
- if( dir == "right" || dir == "rightmost" ){
- exploded[dir].x+=explodedSpeed;
- exploded[dir].y-=explodedSpeed;
- }
- exploded[dir].opacity-=explodedOpacity;
- if( exploded[dir].opacity ){
- arr[dir] = exploded[dir];
- // newExplodedArray.push(exploded);
- }
- }
- }
- newExplodedArray.push(arr);
- }
- // console.log(newExplodedArray)
- this.explodedArray = newExplodedArray;
- }
- this.startExploded = function(){// 绘制爆炸
- for( let i in this.explodedArray ){
- for( let dir of this.explodedDir ){
- let exploded = this.explodedArray[i];
- if( exploded[dir] ){
- draw.save();// 保存
- draw.beginPath();
- draw.globalAlpha = exploded[dir].opacity * 0.01;
- draw.fillStyle = this.fillColor;
- draw.fillRect(exploded[dir].x,exploded[dir].y,explodedWidth,explodedHeight)
- draw.restore();
- }
- }
- }
- }
- this.addBullet = function(){
- var _this = this;
- setTimeout(function(){// 每个敌人生成子弹间隔不同
- _this.bulletArray.push(new bullet(_this.x,_this.y,_this.fillColor))
- },randomNum(1000,0));
- }
- this.startDraw = function(){// 敌人绘制和子弹
- draw.beginPath();
- draw.fillStyle = this.fillColor;
- draw.fillRect(this.x,this.y,enemyWidth,enemyHeight)
- for( let bullet of this.bulletArray ){// 绘制子弹
- draw.beginPath();
- draw.fillStyle = this.fillColor;
- draw.fillRect(bullet.x+enemyWidth/5,bullet.y+bulletWidth,bulletWidth,bulletHeight)
- }
- this.startExploded();
- }
- };
- for( let i=0;i<enemyLength;i++ ){
- enemyArray.push(new enemy())
- }
- var refresh = function(){
- draw.clearRect(0,0,board.width,board.height);
- for( let enemy of enemyArray ){
- enemy.enemyMove();
- enemy.bulletMove();
- enemy.explodedMove();// 子弹爆炸
- enemy.startDraw();
- }
- requestAnimationFrame(refresh);
- }
- // setInterval(function(){
- // refresh();
- // },1000/60)
- refresh();
- setInterval(function(){// 生成子弹
- eachEnemy();
- },startTime)
- eachEnemy();
- function eachEnemy(){// 循环生成子弹
- for( let enemy of enemyArray ){
- enemy.addBullet();
- }
- }
- }
- shootingGame();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/31982/9e048c25462ad23e1a8764261b4db70f.html