var _stage = new createjs.Stage("canvas"); _stage.canvas.style.border = "1px solid #000"; _stage.canvas.width = 800; _stage.canvas.height = 600; var _enemies = []; var _enemyShots = []; var _enemySize = 16; var _enemyShotSize = { width: 2, height: 8 }; var _enemyOffsetX = _enemySize * 24; var _enemyRows = 8; var _enemyDirectionX = 1; var _enemyShotNumber = 0; var _enemyShotSpeed = 3; var _player; var _playerShots = []; var _playerShotSize = { width: 4, height: 12 }; var _playerSize = 24; var _playerCanMove = false; var _playerSpeed = 4; var _playerShotNumber = 0; var _playerShotSpeed = 4; var _playerLives; var _playerLivesSprites = []; var _offStage = -1000; function randomRange(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function drawRect(x, y, width, height, color) { var rect = new createjs.Shape(); rect.graphics .beginFill(color) .drawRect(0, 0, width, height) .endFill(); rect.setBounds(0, 0, width, height); rect.x = x; rect.y = y; return rect; } function setPlayerLives(reset) { reset = (reset) ? reset : false; var x = _stage.canvas.width - _playerSize; var y = _stage.canvas.height - _playerSize; for (var i = 0; i < _playerLives; i++) { var size = _playerSize / 4; var r; if (reset) { r = _playerLivesSprites[i]; } else { r = drawRect(0, 0, size, size, '#00f'); } r.x = x - (i * _playerSize); r.y = y; if ( ! reset) { _playerLivesSprites.push(r); _stage.addChild(r); } } } function createEnemies(reset) { reset = (reset) ? reset : false; var area = _stage.canvas.width - _enemyOffsetX; var enemyBoxWidth = _enemySize + (_enemySize / 2); var numEnemies = Math.floor(area / enemyBoxWidth); for (var j = 0; j < _enemyRows; j++) { var y = _enemySize + (j * enemyBoxWidth); for (var i = 0; i < numEnemies; i++) { var r; if (reset) { var offset = numEnemies * j; var index = (j > 0) ? i + offset : i; r = _enemies[index]; } else { r = drawRect(0, 0, _enemySize, _enemySize, '#000'); } var x = _enemySize + (i * enemyBoxWidth); r.x = x; r.y = y; r.active = true; if ( ! reset) { _enemies.push(r); _stage.addChild(r); } } } } function createPlayer(reset) { reset = (reset) ? reset : false; if ( ! reset) { _player = drawRect( 0, 0, _playerSize, _playerSize, '#00f' ); } _player.x = _stage.canvas.width / 2 - _playerSize / 2; _player.y = _stage.canvas.height - _playerSize * 2; _player.active = true; _playerLives = 3; if ( ! reset) { _stage.addChild(_player); } } function createShots(reset) { reset = (reset) ? reset : false; for (var i = 0; i < _enemies.length * 5; i++) { var r; if (reset) { r = _enemyShots[i]; } else { r = drawRect(0, 0, _enemyShotSize.width, _enemyShotSize.height, '#f00'); } r.x = _offStage; r.y = _offStage; r.active = false; if ( ! reset) { r.shotType = 'enemy'; _enemyShots.push(r); _stage.addChild(r); } } for (var i = 0; i < 100; i++) { var r; if (reset) { r = _playerShots[i]; } else { r = drawRect(0, 0, _playerShotSize.width, _playerShotSize.height, '#fa0') } r.x = _offStage; r.y = _offStage; r.active = false; if ( ! reset) { r.shotType = 'player'; _playerShots.push(r); _stage.addChild(r); } } } function moveEnemies() { var enemyXMax = 0; var enemyXMin = Infinity; for (var i = 0; i < _enemies.length; i++) { var enemy = _enemies[i]; if (enemy.active) { enemyXMax = (enemy.x > enemyXMax) ? enemy.x : enemyXMax; enemyXMin = (enemy.x < enemyXMin) ? enemy.x : enemyXMin; enemy.x += _enemyDirectionX; } } var XMin = _enemySize; var XMax = _stage.canvas.width - (_enemySize * 2); if (enemyXMax > XMax && _enemyDirectionX > 0) { _enemyDirectionX *= -1; } else if(enemyXMin < XMin && _enemyDirectionX < 0) { _enemyDirectionX = Math.abs(_enemyDirectionX); } } function movePlayer(e) { if (e) { if (e.type == 'mouseenter') { _playerCanMove = true; } else if (e.type == 'mouseleave') { _playerCanMove = false; } } if (_playerCanMove) { if (_stage.mouseX - _playerSize > _player.x) { _player.x += _playerSpeed; } else if (_stage.mouseX < _player.x) { _player.x -= _playerSpeed; } } } function moveShots() { for (var i = 0; i < _enemyShots.length; i++) { var shot = _enemyShots[i]; if (shot.active) { shot.y += _enemyShotSpeed; } if (shot.y > _stage.canvas.height && shot.active) { shot.active = false; shot.x = _offStage; shot.y = _offStage; } } for (var i = 0; i < _playerShots.length; i++) { var shot = _playerShots[i]; if (shot.active) { shot.y -= _playerShotSpeed; } if (shot.y < -_playerShotSize.height && shot.active) { shot.active = false; shot.x = _offStage; shot.y = _offStage; } } } function getActiveEnemies() { var activeEnemies = []; for (var i = 0; i < _enemies.length; i++) { var enemy = _enemies[i]; if (enemy.active) { activeEnemies.push(enemy); } } return activeEnemies; } function fireEnemyShot() { var activeEnemies = getActiveEnemies(); if (activeEnemies.length > 0) { var min = 0; var max = activeEnemies.length - 1; var random = randomRange(min, max); var enemy = activeEnemies[random]; var shot = _enemyShots[_enemyShotNumber]; shot.active = true; shot.x = enemy.x; shot.y = enemy.y; _enemyShotNumber++; if (_enemyShotNumber > _enemyShots.length - 1) { _enemyShotNumber = 0; } } } function firePlayerShot() { if (_player.active) { var shot = _playerShots[_playerShotNumber]; shot.active = true; shot.x = _player.x; shot.y = _player.y; _playerShotNumber++; if (_playerShotNumber > _playerShots.length - 1) { _playerShotNumber = 0; } } } function intersect(shape1, shape2) { if (shape1.active == false || shape2.active == false) { return false; } if ( shape1.x > 0 && shape1.y > 0 && shape2.x > 0 && shape2.y > 0 ) { var leftMost = (shape1.x < shape2.x) ? shape1 : shape2; var rightMost = (shape1.x > shape2.x) ? shape1 : shape2; var upMost = (shape1.y < shape2.y) ? shape1 : shape2; var downMost = (shape1.y > shape2.y) ? shape1 : shape2; var upperLeft = [rightMost.x, downMost.y]; var upperRight = [leftMost.x + leftMost._bounds.width, downMost.y]; var lowerLeft = [rightMost.x, upMost.y + upMost._bounds.height]; var lowerRight = [leftMost.x + leftMost._bounds.width, upMost.y + upMost._bounds.height]; var x = upperLeft[0]; var y = upperLeft[1]; var width = upperRight[0] - upperLeft[0]; var height = lowerLeft[1] - upperLeft[1]; if (width < 0 || height < 0) { width = 0; height = 0; } var area = width * height; return area > 0; } return false; } function collision() { for (var i = 0; i < _enemyShots.length; i++) { var shot = _enemyShots[i]; if (intersect(shot, _player)) { shot.active = false; shot.x = _offStage; shot.y = _offStage; _playerLives--; var life = _playerLivesSprites[_playerLives]; life.x = _offStage; life.y = _offStage; if (_playerLives <= 0) { _player.active = false; } } } for (var i = 0; i < _playerShots.length; i++) { var shot = _playerShots[i]; for (var j = 0; j < _enemies.length; j++) { var enemy = _enemies[j]; if (intersect(shot, enemy)) { shot.active = enemy.active = false; shot.x = enemy.x = _offStage; shot.y = enemy.y = _offStage; } } } } function reset() { init(true); } function init(reset) { reset = (reset) ? reset : false; createEnemies(reset); createPlayer(reset); setPlayerLives(reset); createShots(reset); } function update(e) { var activeEnemies = getActiveEnemies(); if (activeEnemies.length == 0 || _playerLives <= 0) { reset(); } else { moveEnemies(); movePlayer(); moveShots(); collision(); } _stage.update(); } setInterval(fireEnemyShot, 750); setInterval(firePlayerShot, 250); _stage.addEventListener('mouseleave', movePlayer); _stage.addEventListener('mouseenter', movePlayer); createjs.Ticker.addEventListener('tick', update); createjs.Ticker.setFPS(60); init();
<canvas id="canvas"></canvas>