cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- CODED BY valmassoi -->

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="centered well">
  Use arrow keys or <strong>WASD</strong> to move your Player. Kill all enemys to unleash the boss.
</div>
<div align="center" id="app" />
            
          
!
            
              $lt-grey: #E8E8E8

.centered
  margin: 0px auto
  text-align: center
body
  margin: 20px
  background: grey
button
  margin: 0px 5px 5px 0px
  background: steelblue
  vertical-align: top
  padding: 5px 15px
  color: white
  text-align: center
  background: #2980b9
  border: 0
  cursor: pointer
  -webkit-box-shadow: inset 0 -2px #2475ab
  box-shadow: inset 0 -2px #2475ab
.empty
  fill: black
  // cursor:pointer why not working?
.floor
  fill: silver
  // stroke: white
.player
  fill: steelblue
.health
  fill: red
.weapon
  fill: gold
.enemy
  fill: purple
.boss
  fill: purple
svg
  box-shadow: 0px 0px 20px #000
  background: #202020
  margin-top: 10px
.well
  width: 600px
  margin-bottom: 15px

            
          
!
            
              //0empty 1floor 2health 3weapon 4enemy 5boss        9player

const box = 30, origin = 8
const dieMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_lost_a_life.wav'),
fightMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_stomp_no_damage.wav'),
healthMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_1-up.wav'),
killMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_stomp.wav'),
rankMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_power-up.wav'),
weaponMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_egg_hatching.wav'),
winMp3 = new Audio('http://themushroomkingdom.net/sounds/wav/smw/smw_course_clear.wav')

const weapons = [
  ['Bare hands', 5],
  ['Stupid Stick', 15],
  ['Power Sword', 25],
  ['Magic Wand',50]
]

const enemyCount = 10, healthCount = 30, maxHp = 100, weaponCount = 3
const board =
[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[1,1,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0],
[1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0],
[1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0],
[1,1,1,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,0,0,0,0,1,0],
[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,0,0,0,0,1,0],
[0,1,1,1,1,1,1,0,1,0,1,1,1,0,0,0,1,1,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0],
[0,1,1,1,1,1,1,1,1,0,1,1,1,0,0,0,1,1,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,1,0,0,1,1,0,1,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,0,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,0,1,1,0,1,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,1,1,1,1,1,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,1,1,1,0,1,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,1,1,1,1,1,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,1,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1,0],
[0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1,0,1,1,1,1,1,1,0,1,1,0,0,0,1,0,1,0,0,0,0,0,0,0,0,1,0],
[1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,1,1,0,1,1,1,0,1,0,1,1,1,1,1,1,0,1,1,0,0,0,1,0,1,1,1,1,1,1,0,0,0,1,0],
[1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,0,1,1,0,0,0,1,0,1,1,1,1,1,1,0,0,0,1,0],
[1,0,1,1,1,0,0,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,1,0,1,1,1,1,1,1,0,0,0,1,0],
[1,0,1,1,1,0,0,1,0,1,1,1,0,0,0,0,1,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,1,0,1,1,1,1,1,1,0,0,0,1,0],
[1,0,1,1,1,0,0,1,0,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0],
[1,1,1,1,1,1,1,1,0,1,1,1,0,1,0,0,1,0,1,0,0,0,0,1,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,0],
[0,0,1,1,1,0,1,1,0,1,1,1,0,1,0,0,1,0,1,0,1,1,1,1,1,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0],
[0,0,0,0,1,0,1,1,0,1,1,1,0,1,0,0,1,0,1,0,1,1,1,1,1,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0],
[0,0,0,0,1,0,1,1,0,1,1,1,0,1,0,0,1,0,1,0,1,1,1,1,1,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0],
[0,0,0,0,1,0,1,1,0,0,1,1,0,1,1,1,1,0,1,0,1,1,1,1,1,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,1],
[0,0,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,0,1,0,0,0,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,1],
[0,0,0,0,1,0,0,1,1,1,1,1,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0,1,1,1,1,1,1,0,1],
[0,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
[0,1,1,1,1,1,0,1,1,0,1,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
[0,1,1,1,1,1,0,1,1,0,1,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
[0,0,1,0,0,0,0,1,1,0,1,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1],
[0,0,1,1,1,1,1,1,1,0,1,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
[0,0,0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,0,0,1,0,1,1,1,1,1,1,0,1],
[0,0,0,0,1,1,1,0,1,0,1,1,1,1,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
[0,0,0,0,1,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[0,0,0,0,1,1,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0],
[0,0,0,0,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0],
[0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,0],
[0,0,0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0],
[0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0]]

// -- Dungeon generated by http://www.futuredatalab.com/proceduraldungeon/ -- //

class Layout extends React.Component {
constructor(props) {
    super(props);

    this.state = {
      player: {
        hp: 90,
        xp: 0,
        rank: 1,
        weapon: {
          name: "Bare hands",
          attack: 5,
          index: 0
        },
        X: 0,
        Y: 0
      },//end player
      board: board,
      enemyHp: 100,
      enemyCount: enemyCount,
      enemyRank: 1
    }//end state
  }//end constructor

  componentDidMount() {
    document.addEventListener('keydown', this.handleKey.bind(this))
    this.setUp()
  }
  setUp(){
    console.log("Setup");
    this.setBoard(2, healthCount)//TODO boss
    this.setBoard(3, weaponCount)
    this.setBoard(4, enemyCount)
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKey.bind(this))
  }

  handleKey(e){
    let key = e.keyCode ? e.keyCode : e.which
    this.movePlayer(this.state, key)
  }
  movePlayer(state, key){
    let x = this.state.player.X, y = this.state.player.Y
    switch(key){
      case 37: case 65://left
          (x>0-origin && this.checkSqr(x-1, y)) ? x -= 1 : x += 0; break//checks for walls/edge
      case 38: case 87://up
          (y>0-origin && this.checkSqr(x, y-1)) ? y -= 1 : y += 0; break
      case 39: case 68://right
          (x<33+origin && this.checkSqr(x+1, y)) ? x += 1 : x += 0; break
      case 40: case 83://down
          (y<33+origin && this.checkSqr(x, y+1)) ? y += 1 : y += 0; break
      default://any other key
          break;
    }
    let newState = Object.assign({}, this.state.player, { X: x, Y:y} )//immutablity prob https://bit.ly/1NfPQqJ
    this.setState({ player: newState })
  }
  checkSqr(x, y){//TODO DRY THIS UP
    let board = this.state.board

    if (board[y+origin][x+origin]==2) {//add hp
      healthMp3.play()
      let hp = (this.state.player.hp+10<=maxHp) ? this.state.player.hp+10 : this.state.player.hp
      let newState = Object.assign({}, this.state.player, { hp: hp } )
      board[y+origin][x+origin]=1
      this.setState({ player: newState, board: board })
      return true;
    }
    else if (board[y+origin][x+origin]==3) {//weapon
      weaponMp3.play()
      let weapon = this.weaponGen()
      let newState = Object.assign({}, this.state.player, { weapon: weapon } )
      board[y+origin][x+origin]=1
      this.setState({ player: newState, board: board })
      return true;
    }
    else if (board[y+origin][x+origin]==4 || board[y+origin][x+origin]==5) {//enemy
      if (this.worldStar()){
        board[y+origin][x+origin]=1
        this.setState({ board: board })
        this.checkWin()
        return true;
      }
    }
    else{
      return (this.state.board[y+origin][x+origin]==1)//return moveable
    }
  }

  weaponGen(){
    let index = this.state.player.weapon.index + 1
    return {name: weapons[index][0], attack: weapons[index][1], index: index }
  }
  worldStar(){//battle
    let board = this.state.board
    let enemyHp = this.state.enemyHp//IDEA put enemy HP on svg color:white
    enemyHp -= this.state.player.weapon.attack * this.state.player.rank
    let enemyRank = this.state.enemyRank
    console.log(enemyHp);
    this.setState({ enemyHp: enemyHp })
    if (enemyHp<=0){//kill
      killMp3.play()
      let hp = (this.state.player.hp+10<=maxHp) ? this.state.player.hp+10 : this.state.player.hp
      let count = (!isNaN(this.state.enemyCount)) ? this.state.enemyCount - 1 : this.state.enemyCount
      if(count==0){
        console.log("BOSS TIME");
        //let board = this.state.board DELETE
        hp = maxHp
        board[8+origin][23+origin]=board[8+origin][24+origin]=
        board[9+origin][23+origin]=board[9+origin][24+origin] = 5 //Boss Room
        count = 'Boss Time!'
        enemyRank = 3
        this.setState({ board: board })
      }
      if(count<=enemyCount/2 && count>0){
        enemyRank = 2
      }
      let xp = this.state.player.xp + 25
      let rank = this.state.player.rank
      if(xp>=100){
        rankMp3.play()
        hp = maxHp
        xp = 0
        rank++
      }
      let newState = Object.assign({}, this.state.player, { hp: hp, xp: xp, rank: rank } )
      this.setState({ player: newState, enemyHp: 100*enemyRank, enemyCount: count, enemyRank: enemyRank })//NOTE hurting one hurts all
      return true;
    }
    else{
      this.ouch()//random damage
      fightMp3.play()
      return false;
    }
  }
  ouch(){
    let damage = _.random(0,2) * 10 * this.state.enemyRank
    let hp = this.state.player.hp - damage
    if (hp<=0){
      // document.removeEventListener('keydown', this.handleKey.bind(this))
      this.youLose()
    }
    let newState = Object.assign({}, this.state.player, { hp: hp } )
    this.setState({ player: newState })
  }
  checkWin(){
    if (board[8+origin][23+origin] == 1 && board[8+origin][24+origin] == 1
      && board[9+origin][23+origin] == 1 && board[9+origin][24+origin] == 1 && this.state.enemyCount == 'Boss Time!'){//check win
      winMp3.play()
      alert("Winner Winner, Chicken Dinner!")
      this.reset()
    }
  }
  youLose(){
    dieMp3.play()
    alert("Sorry you lose :(")
    this.reset()
  }
  reset(){
    // let newState = Object.assign({}, this.state.player, { X: 0, Y:0 } )
    // this.setState({ player: newState }) //doesnt work??
    // this.setUp()
    location.reload(true)//HACK
  }
  setBoard(type, amount){
     let count = 0
     let board = this.state.board
     while(count<amount){
      let y = _.random(0,49)
      let x = _.random(0,49)
       if (board[y][x] ==1){//in bondries
         board[y][x] = type
         count++
      }
     }
    this.setState({ board: board})
  }

  boxType(type){
    switch(type){
      case 1:
        return 'floor'; break
      case 2:
        return 'health'; break
      case 3:
        return 'weapon'; break
      case 4:
        return 'enemy'; break
      case 5:
        return 'boss'; break
      default:
        return 'empty'; break
    }
  }
  render() {
    return (
      <div>
        <p><b>HP:</b> {this.state.player.hp} <b>Weapon:</b> {this.state.player.weapon.name} <b>Attack:</b> {this.state.player.weapon.attack} <b>Rank:</b> {this.state.player.rank} <b>XP:</b> {this.state.player.xp} <b>Enemies Remaining:</b> {this.state.enemyCount} <b>Enemy Rank:</b> {this.state.enemyRank} </p>
        <svg width={box*16} height={box*16}>
          {this.state.board.map(function(row, y) {
            return row.map(function(type, x) {
              return (
                <rect key={`${x},${y}`} x={x*box-box*this.state.player.X} y={y*box-box*this.state.player.Y} width={box} height={box} className={this.boxType(type)} stroke='black' strokeWidth={.75} />
              );
            }.bind(this))
          }.bind(this))}
          <rect x={box*8} y={box*8} width={box} height={box} className='player' stroke='black' strokeWidth={.75} />
        </svg>
        <p>({this.state.player.X},{this.state.player.Y})</p>
      </div>
    )
  }
}

const app = document.getElementById('app')
ReactDOM.render(<Layout/>, app)

            
          
!
999px
Loading ..................

Console