superterran/nibbles.html

## nibbles.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <style type="text/css">
      body {
        overflow: hidden;
        margin: 0;
      }
      #game {
        touch-action: none;
        background-color: #030;
        position: absolute;
        display: block;
      }
    </style>
  <body>
    <canvas id="game" />

    <script type="text/javascript">
      var game = {

         dom: "game", // id name for the canvas
         obj: $("#"+this.dom), // the object for the above
         ctx: false, // gets populated with the canvas object
         touch: false, // last touch event for comparison
         timer: false,

        player: {
          color: 'lightgreen',
          x: false,
          y: false,
          direction: "stop",
          history: [],
          last: 3,
          score: 0,
          highscore: 0,
        },

        stage: {
          level: 1,
          x: 50,
          y: 50,
          sizex: false,
          sizey: false,
          size: 30,
          speed: 500,
          fruit: []

        },

        draw: function()
        {
          var c = document.getElementById(this.dom)
          if(this.ctx == false) {
            this.ctx = c.getContext("2d")
            c.width = window.innerWidth
            c.height = window.innerHeight
          }

          this.clear()

          // let's make our snake
          $.each(this.player.history, function(key, val) {
            this.paint(val.x, val.y, this.player.color)
          }.bind(this))

          // let's paint our fruit
          $.each(this.stage.fruit, function(key, val) {
            if(!val) return false
            this.paint(val.x, val.y, val.color, val.size)
          }.bind(this))

          // let's print our header

          this.drawHeader()

          // crash it and restart if the window size changes
          if(this.stage.sizex != false) {
            if((this.stage.sizex != Math.floor(window.innerWidth/this.stage.size)) ||
              (this.stage.sizey != Math.floor(window.innerHeight/this.stage.size))) {
                this.reset()
                return false
            }
          }


        },

        clear: function()
        {
          this.ctx.clearRect(0,0, window.innerWidth, window.innerHeight)
        },

        paint: function(x=this.player.x, y=this.player.y, color=this.player.color, size=1)
        {
          this.ctx.beginPath()
          this.ctx.arc(
            (x*this.stage.size)+(this.stage.size/2),
            (y*this.stage.size)+(this.stage.size/2),
            this.stage.size/(size*2),
            0,
            2*Math.PI
          )

          this.ctx.fillStyle = color;
          this.ctx.fill();

          this.ctx.stroke()
        },

        setTimer: function() {
              if(this.timer != false) clearInterval(this.timer)
              this.timer = setInterval(function() {this.loop()}.bind(this), this.stage.speed)
        },
        reset: function() {

          this.stage.speed = 300
          this.setTimer()

          this.stage.sizex = Math.floor(window.innerWidth/this.stage.size)
          this.stage.sizey = Math.floor(window.innerHeight/this.stage.size)

          this.player.score = 0
          this.player.x = Math.floor(this.stage.sizex/2)
          this.player.y = Math.floor(this.stage.sizey/2)
          this.player.direction = "stop"
          this.player.last=3
          this.player.history = []
          this.stage.fruit = []
          this.addFruit()
          this.draw()
        },

        addFruit: function()
        {
          this.stage.fruit.push({
            x: Math.floor((Math.random() * this.stage.sizex) + 1),
            y: Math.floor((Math.random() * this.stage.sizey) + 1),
            color: "red",
            size: 1.8
          })
        },

        init: function()
        {
          this.defineBindings()
          this.reset()
          this.paint()
        },

        loop: function()
        {
          if(this.player.direction == 'stop') return

          // +1 score every loop
          this.player.score=this.player.score+1

          // move the snake
          if(this.player.direction == 'left') this.player.x--;
          if(this.player.direction == 'right') this.player.x++;
          if(this.player.direction == 'up') this.player.y--;
          if(this.player.direction == 'down') this.player.y++;

          // reset the game if snake goes out of bounds
          if(this.player.x < 0) this.reset()
          if(this.player.y < 0) this.reset()
          if(this.player.x > this.stage.sizex) this.reset()
          if(this.player.y > this.stage.sizey) this.reset()

          // let's see if the snake eats himself
          $.each(this.player.history, function(key, val) {
            if((val.x == this.player.x) && (val.y == this.player.y))  this.reset()
          }.bind(this))

          // grow the snake if it eats some fruit
          $.each(this.stage.fruit, function(key, val) {
            if(!val) return false
            if(this.player.x == val.x && this.player.y == val.y) {
              this.player.last++
              if(this.stage.speed > 80) this.stage.speed=this.stage.speed-10
              this.setTimer()
              this.stage.fruit = []
              this.addFruit()
              this.player.score=this.player.score+100
            }
          }.bind(this))

          this.player.history.push({
            x: this.player.x,
            y: this.player.y
          })

          if(this.player.history.length > this.player.last) {
            this.player.history = this.player.history.slice(-this.player.last)

          }
          // sync high score if we have one
          if(this.player.score > this.player.highscore) this.player.highscore = this.player.score

          this.draw()
        },

        drawHeader: function()
        {
          this.ctx.font = "40px Andale Mono, Courier New"
          this.ctx.fillStyle = 'Green';
          this.ctx.fillText("NIBBLES",5,40);


          this.ctx.font = "14px Andale Mono, Courier New"
          this.ctx.fillStyle = 'yellow';
          this.ctx.fillText("SCORE " + this.player.score ,180,40);
          this.ctx.fillText(" HIGH " + this.player.highscore, 180,22);


        },

        defineBindings: function()
        {
          // key bindings
          document.onkeydown = function(e) {
            key = e.key
            if(key == "w") this.player.direction = "up"
            if(key == "a") this.player.direction = "left"
            if(key == "s") this.player.direction = "down"
            if(key == "d") this.player.direction = "right"
            if(key == "p") this.player.direction = "stop"
            if(key == "r") this.reset()
          }.bind(this)

          $(document).dblclick(function() {
            this.player.direction = "stop"
          }.bind(this))

          // mouse listeners
          document.addEventListener('touchstart', function(e) {
            this.touch = e.changedTouches[0]
          }.bind(this))


          document.addEventListener('touchend', function(e) {
            var cur = e.changedTouches[0]

            if(Math.abs(this.touch.clientX-cur.clientX) > Math.abs(this.touch.clientY-cur.clientY)) {
              if(this.touch.clientX < cur.clientX) this.player.direction = "right"
              if(this.touch.clientX > cur.clientX) this.player.direction = "left"
            } else {
              if(this.touch.clientY < cur.clientY) this.player.direction = "down"
              if(this.touch.clientY > cur.clientY) this.player.direction = "up"
            }

            console.log('---')
            console.log(this.touch)
            console.log(cur)
          }.bind(this))

        }
      }

      game.init()
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	</head>
	<body>
	<style type="text/css">
	body {
	overflow: hidden;
	margin: 0;
	}
	#game {
	touch-action: none;
	background-color: #030;
	position: absolute;
	display: block;
	}
	</style>
	<body>
	<canvas id="game" />

	<script type="text/javascript">
	var game = {

	dom: "game", // id name for the canvas
	obj: $("#"+this.dom), // the object for the above
	ctx: false, // gets populated with the canvas object
	touch: false, // last touch event for comparison
	timer: false,

	player: {
	color: 'lightgreen',
	x: false,
	y: false,
	direction: "stop",
	history: [],
	last: 3,
	score: 0,
	highscore: 0,
	},

	stage: {
	level: 1,
	x: 50,
	y: 50,
	sizex: false,
	sizey: false,
	size: 30,
	speed: 500,
	fruit: []

	},

	draw: function()
	{
	var c = document.getElementById(this.dom)
	if(this.ctx == false) {
	this.ctx = c.getContext("2d")
	c.width = window.innerWidth
	c.height = window.innerHeight
	}

	this.clear()

	// let's make our snake
	$.each(this.player.history, function(key, val) {
	this.paint(val.x, val.y, this.player.color)
	}.bind(this))

	// let's paint our fruit
	$.each(this.stage.fruit, function(key, val) {
	if(!val) return false
	this.paint(val.x, val.y, val.color, val.size)
	}.bind(this))

	// let's print our header

	this.drawHeader()

	// crash it and restart if the window size changes
	if(this.stage.sizex != false) {
	if((this.stage.sizex != Math.floor(window.innerWidth/this.stage.size)) \|\|
	(this.stage.sizey != Math.floor(window.innerHeight/this.stage.size))) {
	this.reset()
	return false
	}
	}


	},

	clear: function()
	{
	this.ctx.clearRect(0,0, window.innerWidth, window.innerHeight)
	},

	paint: function(x=this.player.x, y=this.player.y, color=this.player.color, size=1)
	{
	this.ctx.beginPath()
	this.ctx.arc(
	(x*this.stage.size)+(this.stage.size/2),
	(y*this.stage.size)+(this.stage.size/2),
	this.stage.size/(size*2),
	0,
	2*Math.PI
	)

	this.ctx.fillStyle = color;
	this.ctx.fill();

	this.ctx.stroke()
	},

	setTimer: function() {
	if(this.timer != false) clearInterval(this.timer)
	this.timer = setInterval(function() {this.loop()}.bind(this), this.stage.speed)
	},
	reset: function() {

	this.stage.speed = 300
	this.setTimer()

	this.stage.sizex = Math.floor(window.innerWidth/this.stage.size)
	this.stage.sizey = Math.floor(window.innerHeight/this.stage.size)

	this.player.score = 0
	this.player.x = Math.floor(this.stage.sizex/2)
	this.player.y = Math.floor(this.stage.sizey/2)
	this.player.direction = "stop"
	this.player.last=3
	this.player.history = []
	this.stage.fruit = []
	this.addFruit()
	this.draw()
	},

	addFruit: function()
	{
	this.stage.fruit.push({
	x: Math.floor((Math.random() * this.stage.sizex) + 1),
	y: Math.floor((Math.random() * this.stage.sizey) + 1),
	color: "red",
	size: 1.8
	})
	},

	init: function()
	{
	this.defineBindings()
	this.reset()
	this.paint()
	},

	loop: function()
	{
	if(this.player.direction == 'stop') return

	// +1 score every loop
	this.player.score=this.player.score+1

	// move the snake
	if(this.player.direction == 'left') this.player.x--;
	if(this.player.direction == 'right') this.player.x++;
	if(this.player.direction == 'up') this.player.y--;
	if(this.player.direction == 'down') this.player.y++;

	// reset the game if snake goes out of bounds
	if(this.player.x < 0) this.reset()
	if(this.player.y < 0) this.reset()
	if(this.player.x > this.stage.sizex) this.reset()
	if(this.player.y > this.stage.sizey) this.reset()

	// let's see if the snake eats himself
	$.each(this.player.history, function(key, val) {
	if((val.x == this.player.x) && (val.y == this.player.y)) this.reset()
	}.bind(this))

	// grow the snake if it eats some fruit
	$.each(this.stage.fruit, function(key, val) {
	if(!val) return false
	if(this.player.x == val.x && this.player.y == val.y) {
	this.player.last++
	if(this.stage.speed > 80) this.stage.speed=this.stage.speed-10
	this.setTimer()
	this.stage.fruit = []
	this.addFruit()
	this.player.score=this.player.score+100
	}
	}.bind(this))

	this.player.history.push({
	x: this.player.x,
	y: this.player.y
	})

	if(this.player.history.length > this.player.last) {
	this.player.history = this.player.history.slice(-this.player.last)

	}
	// sync high score if we have one
	if(this.player.score > this.player.highscore) this.player.highscore = this.player.score

	this.draw()
	},

	drawHeader: function()
	{
	this.ctx.font = "40px Andale Mono, Courier New"
	this.ctx.fillStyle = 'Green';
	this.ctx.fillText("NIBBLES",5,40);


	this.ctx.font = "14px Andale Mono, Courier New"
	this.ctx.fillStyle = 'yellow';
	this.ctx.fillText("SCORE " + this.player.score ,180,40);
	this.ctx.fillText(" HIGH " + this.player.highscore, 180,22);


	},

	defineBindings: function()
	{
	// key bindings
	document.onkeydown = function(e) {
	key = e.key
	if(key == "w") this.player.direction = "up"
	if(key == "a") this.player.direction = "left"
	if(key == "s") this.player.direction = "down"
	if(key == "d") this.player.direction = "right"
	if(key == "p") this.player.direction = "stop"
	if(key == "r") this.reset()
	}.bind(this)

	$(document).dblclick(function() {
	this.player.direction = "stop"
	}.bind(this))

	// mouse listeners
	document.addEventListener('touchstart', function(e) {
	this.touch = e.changedTouches[0]
	}.bind(this))


	document.addEventListener('touchend', function(e) {
	var cur = e.changedTouches[0]

	if(Math.abs(this.touch.clientX-cur.clientX) > Math.abs(this.touch.clientY-cur.clientY)) {
	if(this.touch.clientX < cur.clientX) this.player.direction = "right"
	if(this.touch.clientX > cur.clientX) this.player.direction = "left"
	} else {
	if(this.touch.clientY < cur.clientY) this.player.direction = "down"
	if(this.touch.clientY > cur.clientY) this.player.direction = "up"
	}

	console.log('---')
	console.log(this.touch)
	console.log(cur)
	}.bind(this))

	}
	}

	game.init()
	</script>
	</body>
	</html>