Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment