mirror of
https://github.com/flynx/Course-JavaScript.git
synced 2025-10-29 19:10:09 +00:00
tweaking, refactoring and some effects...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
beef8bfd16
commit
6dc0dc4ec1
@ -1,7 +1,7 @@
|
||||
CACHE MANIFEST
|
||||
# Last Modified: 2017 Apr 15
|
||||
# Timestamp: 20170415203520
|
||||
|
||||
CACHE:
|
||||
simplesnake.html
|
||||
simplesnake.css
|
||||
simplesnake.js
|
||||
simplesnake.html
|
||||
|
||||
@ -50,7 +50,9 @@ body.hints:after {
|
||||
content: "pause";
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: rgb(253, 253, 253);
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -65,6 +67,7 @@ body {
|
||||
border: solid 1px silver;
|
||||
}
|
||||
|
||||
/* show score... */
|
||||
.simplesnake[score]:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@ -79,3 +82,62 @@ body {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.simplesnake .wall {
|
||||
background-color: silver;
|
||||
}
|
||||
.simplesnake .apple {
|
||||
position: relative;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/*
|
||||
.simplesnake .apple {
|
||||
position: relative;
|
||||
background-color: none;
|
||||
}
|
||||
.simplesnake .apple:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: red;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.simplesnake .apple {
|
||||
position: relative;
|
||||
background-color: none;
|
||||
}
|
||||
.simplesnake .apple:before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
border-radius: 30%;
|
||||
border-bottom-right-radius: 50%;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
.simplesnake .apple:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
border-radius: 30%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
@ -69,8 +69,6 @@ function makeEvent(handler_attr){
|
||||
var Snake = {
|
||||
config: {
|
||||
field_size: 32,
|
||||
apple_color: 'red',
|
||||
wall_color: 'silver',
|
||||
interval: 150,
|
||||
},
|
||||
|
||||
@ -86,7 +84,7 @@ var Snake = {
|
||||
|
||||
do {
|
||||
var i = Math.floor(Math.random() * l)
|
||||
} while(cells[i].style.backgroundColor != '')
|
||||
} while(cells[i].classList.length > 0)
|
||||
|
||||
return {
|
||||
x: i%w,
|
||||
@ -103,7 +101,6 @@ var Snake = {
|
||||
var w = this.field_size.width
|
||||
var x = point.x % w
|
||||
x = x < 0 ? (x + w) : x
|
||||
|
||||
var h = this.field_size.height
|
||||
var y = point.y % h
|
||||
y = y < 0 ? (y + h) : y
|
||||
@ -142,6 +139,7 @@ var Snake = {
|
||||
// handle cell age...
|
||||
if(cell.age == 0){
|
||||
delete cell.age
|
||||
cell.classList.remove('snake')
|
||||
cell.style.backgroundColor = ''
|
||||
|
||||
} else {
|
||||
@ -178,6 +176,7 @@ var Snake = {
|
||||
// special case: other snake's head -> kill both...
|
||||
if(next.direction){
|
||||
var other = next.style.backgroundColor
|
||||
next.classList.remove('snake')
|
||||
next.style.backgroundColor = ''
|
||||
// NOTE: we are not deleteing .direction here as
|
||||
// we can have upto 4 snakes colliding...
|
||||
@ -187,17 +186,17 @@ var Snake = {
|
||||
delete next.age
|
||||
|
||||
// apple -> increment age...
|
||||
} else if(next.style.backgroundColor == that.config.apple_color){
|
||||
} else if(next.classList.contains('apple')){
|
||||
age += 1
|
||||
move = true
|
||||
next.classList.remove('apple')
|
||||
that.appleEaten(color, age+2)
|
||||
|
||||
// empty -> just move...
|
||||
} else if(next.style.backgroundColor == ''){
|
||||
} else if(next.classList.length == 0){
|
||||
move = true
|
||||
|
||||
// other -> kill...
|
||||
// NOTE: anything but an apple or empty will kill the snake...
|
||||
} else {
|
||||
that.snakeKilled(color, age+2)
|
||||
}
|
||||
@ -206,6 +205,7 @@ var Snake = {
|
||||
if(move){
|
||||
next.tick = tick
|
||||
next.style.backgroundColor = color
|
||||
next.classList.add('snake')
|
||||
next.age = age + 1
|
||||
next.direction = direction
|
||||
}
|
||||
@ -213,9 +213,9 @@ var Snake = {
|
||||
delete cell.direction
|
||||
}
|
||||
}
|
||||
|
||||
cell.tick = tick
|
||||
})
|
||||
this.tick(tick)
|
||||
},
|
||||
|
||||
// constructors...
|
||||
@ -224,6 +224,7 @@ var Snake = {
|
||||
|
||||
var head = this._cells[point.x + point.y * this.field_size.width]
|
||||
head.style.backgroundColor = color
|
||||
head.classList.add('snake')
|
||||
head.direction = direction || this.random_direction
|
||||
head.age = (age || 5) - 1
|
||||
this.players[color] = ''
|
||||
@ -232,8 +233,9 @@ var Snake = {
|
||||
},
|
||||
apple: function(point){
|
||||
point = this.normalize_point(point || this.random_point)
|
||||
this._cells[point.x + point.y * this.field_size.width]
|
||||
.style.backgroundColor = this.config.apple_color
|
||||
var c = this._cells[point.x + point.y * this.field_size.width]
|
||||
c.classList.add('apple')
|
||||
c.style.backgroundColor = ''
|
||||
return this
|
||||
},
|
||||
wall: function(point, direction, length){
|
||||
@ -244,8 +246,7 @@ var Snake = {
|
||||
length = length || 1
|
||||
|
||||
while(length > 0){
|
||||
this._cells[x + y * this.field_size.width]
|
||||
.style.backgroundColor = this.config.wall_color
|
||||
this._cells[x + y * this.field_size.width].classList.add('wall')
|
||||
|
||||
x += direction == 'e' ? 1
|
||||
: direction == 'w' ? -1
|
||||
@ -266,6 +267,7 @@ var Snake = {
|
||||
// events...
|
||||
appleEaten: makeEvent('__appleEatenHandlers'),
|
||||
snakeKilled: makeEvent('__killHandlers'),
|
||||
tick: makeEvent('__tickHandlers'),
|
||||
|
||||
// actions...
|
||||
setup: function(field, size){
|
||||
@ -287,6 +289,11 @@ var Snake = {
|
||||
start: function(t){
|
||||
this.__timer = this.__timer
|
||||
|| setInterval(this._tick.bind(this), t || this.config.interval || 200)
|
||||
// reset player control actions...
|
||||
var that = this
|
||||
Object.keys(this.players)
|
||||
.forEach(function(k){ that.players[k] = '' })
|
||||
this.tick()
|
||||
return this
|
||||
},
|
||||
stop: function(){
|
||||
@ -307,26 +314,20 @@ var Snake = {
|
||||
},
|
||||
|
||||
// levels...
|
||||
basicLevel: function(){
|
||||
var a = Math.round(this.field_size.width/8)
|
||||
return this
|
||||
.wall({x:a*3, y:a*5}, 's', a*6)
|
||||
.wall({x:a*3, y:a*3}, 'e', a*2)
|
||||
.wall({x:a*5, y:a*3}, 's', a*2)
|
||||
.wall({x:a*5, y:a*5}, 'e', a*6) },
|
||||
randomLevel: function(){
|
||||
var a = Math.round(this.field_size.width/8)
|
||||
var b = Math.round(this.field_size.height/8)
|
||||
return this
|
||||
.wall(null, null, b*6)
|
||||
.wall(null, null, b*6)
|
||||
.wall(null, null, b*6) },
|
||||
.wall(null, null, a*6)
|
||||
.wall(null, null, a*6)
|
||||
.wall(null, null, a*6) },
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
//var BG_ANIMATION = true
|
||||
|
||||
var __CACHE_UPDATE_CHECK = 10*60*1000
|
||||
var __HANDLER_SET = false
|
||||
var __DEBOUNCE_TIMEOUT = 100
|
||||
@ -428,21 +429,35 @@ function setup(snake, timer, size){
|
||||
.start(timer)
|
||||
.pause()
|
||||
|
||||
// stuff...
|
||||
// game events...
|
||||
.appleEaten(function(color, age){
|
||||
this.apple()
|
||||
showScore(color, age)
|
||||
})
|
||||
.apple()
|
||||
.apple()
|
||||
|
||||
// players...
|
||||
.snakeKilled(function(color, age){
|
||||
this
|
||||
.pause()
|
||||
.snake(color, 3)
|
||||
showScore(color, 3)
|
||||
})
|
||||
.tick(function(){
|
||||
// digital noise effect...
|
||||
window.BG_ANIMATION
|
||||
&& (!snake.__tick || snake.__tick % 2 == 0)
|
||||
&& this._cells.forEach(function(c){
|
||||
var v = Math.floor(Math.random() * 6)
|
||||
c.classList.length == 0 ?
|
||||
(c.style.backgroundColor =
|
||||
`rgb(${255 - v}, ${255 - v}, ${255 - v})`)
|
||||
: c.classList.contains('wall') ?
|
||||
(c.style.backgroundColor =
|
||||
`rgb(${220 - v*2}, ${220 - v*2}, ${220 - v*2})`)
|
||||
: null })
|
||||
})
|
||||
|
||||
// game eleemnts...
|
||||
.apple()
|
||||
.apple()
|
||||
.snake('blue', 3)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user