• Forum
  • Lounge
  • contest idea, three.js, runnable directl

 
contest idea, three.js, runnable directly from web console, max code, 1 post, 1 line per statement

Not the best code, but didn't have much time. enter in web console. Use arrow keys and spc bar
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
var ch=document.body.childNodes;
for(var i=0;i<ch.length; i++)
document.body.removeChild(ch[i--]);
var s=document.createElement("script");
s.src="https://raw.github.com/mrdoob/three.js/master/build/three.js";
document.body.appendChild(s);
setTimeout(function(){;
function Snake(){
this.segment_size=4;
this.sgmts=[];
for (var i=0; i<7; ++i)
this.add_segment();
this.currentDirection=null;
this.jmp_direciton=null;
this.food=[];
this.sk_snack_nmbr=3;
for (var i=0;i<this.sk_snack_nmbr;++i)
this.add_food();
this.speed=4;
}
Snake.prototype.move=function(dir){
this.check_food_collision();
if(this.sgmts.length>1){
if(dir=="left" && this.currentDirection=="right")
dir=this.currentDirection;
if(dir=="up" && this.currentDirection=="down")
dir=this.currentDirection;
if(dir=="right" && this.currentDirection=="left")
dir=this.currentDirection;
if(dir=="down" && this.currentDirection=="up")
dir=this.currentDirection;
}
var new_x=this.sgmts[0].cube.position.x;
var new_z=this.sgmts[0].cube.position.z;
if( dir=="up")
new_z=this.sgmts[0].cube.position.z - this.speed;
else if( dir=="down")
new_z=this.sgmts[0].cube.position.z + this.speed;
else if( dir=="left")
new_x=this.sgmts[0].cube.position.x - this.speed;
else if( dir=="right")
new_x=this.sgmts[0].cube.position.x + this.speed;          
if(new_x-this.segment_size/2<BNDS_LEFT || new_x+this.segment_size/2> BNDS_RIGHT
|| new_z-this.segment_size/2<BNDS_DOWN || new_z + this.segment_size / 2 > BNDS_UP) {
return;
}
for (var i=this.sgmts.length - 1; i >= 1; --i) {
this.sgmts[i].cube.position.x=this.sgmts[ i - 1].cube.position.x;
this.sgmts[i].cube.position.z=this.sgmts[ i - 1].cube.position.z;
this.sgmts[i].cube.position.y=this.sgmts[ i - 1].cube.position.y;
}
this.sgmts[0].cube.position.z=new_z;
this.sgmts[0].cube.position.x=new_x;
this.jmp();
if(this.currentDirection)
if( this.self_collision())
while( this.sgmts.length > 1)
scene.remove( this.sgmts.pop().cube);
this.currentDirection=dir;
}
Snake.prototype.jmp=function() {
if( ! this.jmp_dir)
return;
if( this.sgmts[0].cube.position.y <= this.segment_size && this.jmp_dir=="down") 
this.jmp_dir=null;
if(this.sgmts[0].cube.position.y < this.segment_size * 7  && this.jmp_dir=="up") {
this.sgmts[0].cube.position.y += this.speed;
this.jmp_dir="up";
}
else if( this.sgmts[0].cube.position.y > this.segment_size) {
this.sgmts[0].cube.position.y -= this.speed;
this.jmp_dir="down"
}
}
Snake.prototype.add_segment=function() {
var new_segment=new Segment( this.segment_size, 0, 1 - .1 * this.sgmts.length , .5 - .1 * this.sgmts.length);
new_segment.cube.position.x=this.segment_size * this.sgmts.length;
new_segment.cube.position.y=this.segment_size;
this.sgmts.push( new_segment);   
}
Snake.prototype.add_food=function() {
var pos_x=(Math.floor((Math.random() * BNDS_RIGHT * 2) + 1) - BNDS_RIGHT);
var pos_z=(Math.floor((Math.random() * BNDS_UP * 2) + 1) - BNDS_UP);
this.food.push( new SnakeFood( this.segment_size * 2, pos_x, this.segment_size, pos_z, .5, .3, .2) );       
}
Snake.prototype.check_food_collision=function() {
for ( var i=0; i < this.food.length; ++i) {
if(   Math.abs(this.sgmts[0].cube.position.x - this.food[i].cube.position.x) < this.segment_size * 2 
&& Math.abs(this.sgmts[0].cube.position.y - this.food[i].cube.position.y) < this.segment_size * 2 
&& Math.abs(this.sgmts[0].cube.position.z - this.food[i].cube.position.z) < this.segment_size * 2)  { 
for ( var j=0; j < 20; ++j) 
this.add_segment();
this.add_food();
scene.remove(this.food[i].cube);
this.food.splice( i , 1);
}
} 
}
Snake.prototype.self_collision=function() {
for (var i=1; i < this.sgmts.length; ++i)            
if( this.sgmts[0].cube.position.x==this.sgmts[i].cube.position.x 
&& this.sgmts[0].cube.position.z==this.sgmts[i].cube.position.z 
&& this.sgmts[0].cube.position.y==this.sgmts[i].cube.position.y)
return true;
return false;
}
function SnakeFood(size, x, y, z, r, g, b) {
this.geometry=new THREE.CubeGeometry(size,size,size); 
this.material=new THREE.MeshPhongMaterial();
this.material.color.setRGB(.5, .2, .2); 
this.cube=new THREE.Mesh( this.geometry, this.material); 
this.cube.position.set(x, y, z);
scene.add( this.cube); 
}
function Segment( size, r, g, b) {
this.geometry=new THREE.CubeGeometry(size,size,size); 
this.material=new THREE.MeshPhongMaterial();
this.material.color.setRGB(.1, .5, .2); 
this.cube    =new THREE.Mesh( this.geometry, this.material); 
scene.add( this.cube); 
}
Segment.prototype.setPosition=function ( x, y, z) {
this.cube.position.set( x, size, z);
}
var KEY_SPACE=32;
var KEY_LEFT=37;
var KEY_RIGHT=39;
var KEY_UP=38;
var KEY_DOWN=40;
var HEIGHT=window.innerHeight-30;
var WIDTH=window.innerWidth-30;
var current_dir=0;
var jmp=false;
function keyPress(event) {
event.preventDefault();
if(event.which==KEY_LEFT)
current_dir="left";
else if(event.which==KEY_RIGHT)
current_dir="right";
else if(event.which==KEY_DOWN)
current_dir="down";
else if(event.which==KEY_UP)     
current_dir="up";
else if(event.which==KEY_SPACE)
jmp=true;
}
window.addEventListener('keydown',function(event){keyPress(event);},false);
var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(75,WIDTH/HEIGHT,.1,1000); 
camera.position.z=50;
camera.position.y=70;
camera.rotation.x=-.6;
var renderer=new THREE.WebGLRenderer(); 
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0xC9F6F7,1);
document.body.appendChild(renderer.domElement);
var light=new THREE.PointLight(0xffffff,2,100);
light.position.set(0,80,20);
scene.add(light);
var diralLight=new THREE.DirectionalLight(0xffffff,.5);
diralLight.position.set(1,1,0);
scene.add(diralLight);
var hemisphereL=new THREE.HemisphereLight();
scene.add(hemisphereL);
var PLATFORM_WIDTH=1000;
var PLATFORM_LENGTH=1000;
var BNDS_LEFT=-PLATFORM_WIDTH/2.0+20;
var BNDS_RIGHT=PLATFORM_WIDTH/2.0-20;
var BNDS_UP=PLATFORM_LENGTH/2.0-20;
var BNDS_DOWN=-PLATFORM_LENGTH/2.0+20;
var geometry1=new THREE.CubeGeometry(PLATFORM_WIDTH-1,.1,PLATFORM_LENGTH-1); 
var material1=new THREE.MeshPhongMaterial();
material1.color.setRGB(.6,.6,.6);
var platform=new THREE.Mesh(geometry1,material1); 
platform.position.set(0,0,0);
var geometry2=new THREE.CubeGeometry(PLATFORM_WIDTH,40,20); 
var material2=new THREE.MeshPhongMaterial(); 
material2.color.setRGB(.1,.1,.1);
var rail1=new THREE.Mesh(geometry2,material2); 
rail1.position.set(0,0,PLATFORM_LENGTH/2-10);
var geometry3=new THREE.CubeGeometry(PLATFORM_WIDTH,40,20); 
var material3=new THREE.MeshPhongMaterial(); 
material3.color.setRGB(.1,.1,.1);
var rail2=new THREE.Mesh( geometry3, material3); 
rail2.position.set(0, 0,-PLATFORM_LENGTH/2 + 10);
var geometry4=new THREE.CubeGeometry(20,40,PLATFORM_LENGTH); 
var material4=new THREE.MeshPhongMaterial(); 
material4.color.setRGB(.1,.1,.1);        
var rail3=new THREE.Mesh(geometry4,material4); 
rail3.position.set(PLATFORM_WIDTH/2-10,0,0);
var geometry5=new THREE.CubeGeometry(20,40,PLATFORM_LENGTH); 
var material5=new THREE.MeshPhongMaterial(); 
material5.color.setRGB(.1,.1,.1);     
var rail4=new THREE.Mesh(geometry5,material5); 
rail4.position.set(-PLATFORM_WIDTH/2+10,0,0);
scene.add(platform); 
scene.add(rail1); 
scene.add(rail2); 
scene.add(rail3); 
scene.add(rail4); 
var sk=new Snake();
sk.add_segment();
var i=0;
var follow_camera=true;
function render() { 
requestAnimationFrame(render); 
if(++i%1==0){
if(jmp) {
sk.jmp_dir="up";
sk.jmp();
jmp=false;
}
sk.move( current_dir);
if( follow_camera==true) {
camera.position.x=sk.sgmts[0].cube.position.x;
camera.position.z=sk.sgmts[0].cube.position.z + 100;
}
}
renderer.autoClear=true;
renderer.render(scene, camera); 
} 
render();
}, 3000);
Last edited on
I expect higher quality posts from members like you, htirwin.

What's this code doing, how to run it? Can you vouch it's not malicious?
Well It's open source, you can read it and the script it loads. You run it by right clicking on this page or another page and choosing inspect element, and then the console, and then just past the code and enter it.

Or you could just link three.js in an html file, and add the code in a script tag.

Nothing is hidden. You can also just verify the link to the three.js script by looking it up and finding it on git hub.

It will remove the html elements of your page and replace them with a video game :)

The bad formatting is what it took to get the code into one post. Sorry about the quality of this post, I'm up way past my bedtime.
Last edited on
Topic archived. No new replies allowed.