Bootstrap Snippet Fake Shadows (CASTING) using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <canvas class="main" id="game"></canvas>
  <canvas class="main" id="light"></canvas>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body{
   padding:0px;
   margin:0px;
   background:#cdcdcd;
   font-family: 'Karla', sans-serif;
   color:#FFF;
}
canvas{
   display:block;
   box-shadow:0px 2px 5px rgba(0, 0, 0, 0.25);
   border-radius:2px;
   position:absolute;
   top:50%; left:50%;
   transform:translateX(-50%) translateY(-50%);
   animation: fade 2s;
}
#game{ z-index: 1000;}
@keyframes fade {
   from { opacity: 0; top:100%; }
   to { opacity: 1; }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var ctxGame = document.querySelector('#game').getContext('2d')
var ctxLight = document.querySelector('#light').getContext('2d')
var blocks = parseMap(`
 ----------------------------
 ----------------------------
 ----------------------------
 ----------------------------
 ----------------------------
 ---B-----B-------B-----B----
 ---B-------------B-----B----
 ---B-----B--BBB--BBB--BBB---
 ---B-----B--B-B--B-B---B----
 ---BBBB--B--BBB--B-B---B----
 --------------B-------------
 ------------BBB-------------
 ----------------------------
 ----------------------------
 ----------------------------
 ----------------------------`, 16, 16)
var lights = [new Light(true, 114, 49), new Light(false, 250, 50)]
render()
function render(){
   setTimeout(render, 1000/60)
   
   // Draw Game / Blocks
   ctxGame.clearRect(0, 0, ctxGame.canvas.width, ctxGame.canvas.height)
   for(var block of blocks) block.draw()
   
   // Draw clearRect
   ctxLight.globalCompositeOperation = 'source-over';
   ctxLight.fillRect(0, 0, ctxLight.canvas.width, ctxLight.canvas.height)
   for(var light of lights) light.draw()
}
function parseMap(map, gridWidth, gridHeight){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fake Shadows (CASTING)"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Fake Shadows (CASTING)" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Fake Shadows (CASTING)"
Bootstrap 4.1.1 Snippet by koshikojha