Difference between revisions of "Team:ShanghaitechChina/Safety"

Line 1: Line 1:
 
{{ShanghaitechChina}}
 
{{ShanghaitechChina}}
 
<html>
 
<html>
 +
<html lang="en">
 +
<head>
 +
<meta charset="UTF-8">
 +
<title>Pong</title>
 +
 +
<!-- Basic styling, centering the canvas -->
 +
<style>
 +
canvas {
 +
display: block;
 +
position: absolute;
 +
margin: auto;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<script>
 +
var
 +
/**
 +
* Constants
 +
*/
 +
WIDTH  = 700,
 +
HEIGHT = 600,
 +
pi = Math.PI,
 +
UpArrow  = 38,
 +
DownArrow = 40,
 +
/**
 +
* Game elements
 +
*/
 +
canvas,
 +
ctx,
 +
keystate,
 +
/**
 +
* The player paddle
 +
*
 +
* @type {Object}
 +
*/
 +
player = {
 +
x: null,
 +
y: null,
 +
width:  20,
 +
height: 100,
 +
/**
 +
* Update the position depending on pressed keys
 +
*/
 +
update: function() {
 +
if (keystate[UpArrow]) this.y -= 7;
 +
if (keystate[DownArrow]) this.y += 7;
 +
// keep the paddle inside of the canvas
 +
this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
 +
},
 +
/**
 +
* Draw the player paddle to the canvas
 +
*/
 +
draw: function() {
 +
ctx.fillRect(this.x, this.y, this.width, this.height);
 +
}
 +
},
 +
/**
 +
* The ai paddle
 +
*
 +
* @type {Object}
 +
*/
 +
ai = {
 +
x: null,
 +
y: null,
 +
width:  20,
 +
height: 100,
 +
/**
 +
* Update the position depending on the ball position
 +
*/
 +
update: function() {
 +
// calculate ideal position
 +
var desty = ball.y - (this.height - ball.side)*0.5;
 +
// ease the movement towards the ideal position
 +
this.y += (desty - this.y) * 0.1;
 +
// keep the paddle inside of the canvas
 +
this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
 +
},
 +
/**
 +
* Draw the ai paddle to the canvas
 +
*/
 +
draw: function() {
 +
ctx.fillRect(this.x, this.y, this.width, this.height);
 +
}
 +
},
 +
/**
 +
* The ball object
 +
*
 +
* @type {Object}
 +
*/
 +
ball = {
 +
x:  null,
 +
y:  null,
 +
vel: null,
 +
side:  20,
 +
speed: 12,
 +
/**
 +
* Serves the ball towards the specified side
 +
*
 +
* @param  {number} side 1 right
 +
*                      -1 left
 +
*/
 +
serve: function(side) {
 +
// set the x and y position
 +
var r = Math.random();
 +
this.x = side===1 ? player.x+player.width : ai.x - this.side;
 +
this.y = (HEIGHT - this.side)*r;
 +
// calculate out-angle, higher/lower on the y-axis =>
 +
// steeper angle
 +
var phi = 0.1*pi*(1 - 2*r);
 +
// set velocity direction and magnitude
 +
this.vel = {
 +
x: side*this.speed*Math.cos(phi),
 +
y: this.speed*Math.sin(phi)
 +
}
 +
},
 +
/**
 +
* Update the ball position and keep it within the canvas
 +
*/
 +
update: function() {
 +
// update position with current velocity
 +
this.x += this.vel.x;
 +
this.y += this.vel.y;
 +
// check if out of the canvas in the y direction
 +
if (0 > this.y || this.y+this.side > HEIGHT) {
 +
// calculate and add the right offset, i.e. how far
 +
// inside of the canvas the ball is
 +
var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y+this.side);
 +
this.y += 2*offset;
 +
// mirror the y velocity
 +
this.vel.y *= -1;
 +
}
 +
// helper function to check intesectiont between two
 +
// axis aligned bounding boxex (AABB)
 +
var AABBIntersect = function(ax, ay, aw, ah, bx, by, bw, bh) {
 +
return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
 +
};
 +
// check againts target paddle to check collision in x
 +
// direction
 +
var pdle = this.vel.x < 0 ? player : ai;
 +
if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
 +
this.x, this.y, this.side, this.side)
 +
) {
 +
// set the x position and calculate reflection angle
 +
this.x = pdle===player ? player.x+player.width : ai.x - this.side;
 +
var n = (this.y+this.side - pdle.y)/(pdle.height+this.side);
 +
var phi = 0.25*pi*(2*n - 1); // pi/4 = 45
 +
// calculate smash value and update velocity
 +
var smash = Math.abs(phi) > 0.2*pi ? 1.5 : 1;
 +
this.vel.x = smash*(pdle===player ? 1 : -1)*this.speed*Math.cos(phi);
 +
this.vel.y = smash*this.speed*Math.sin(phi);
 +
}
 +
// reset the ball when ball outside of the canvas in the
 +
// x direction
 +
if (0 > this.x+this.side || this.x > WIDTH) {
 +
this.serve(pdle===player ? 1 : -1);
 +
}
 +
},
 +
/**
 +
* Draw the ball to the canvas
 +
*/
 +
draw: function() {
 +
ctx.fillRect(this.x, this.y, this.side, this.side);
 +
}
 +
};
 +
/**
 +
* Starts the game
 +
*/
 +
function main() {
 +
// create, initiate and append game canvas
 +
canvas = document.createElement("canvas");
 +
canvas.width = WIDTH;
 +
canvas.height = HEIGHT;
 +
ctx = canvas.getContext("2d");
 +
document.body.appendChild(canvas);
 +
keystate = {};
 +
// keep track of keyboard presses
 +
document.addEventListener("keydown", function(evt) {
 +
keystate[evt.keyCode] = true;
 +
});
 +
document.addEventListener("keyup", function(evt) {
 +
delete keystate[evt.keyCode];
 +
});
 +
init(); // initiate game objects
 +
// game loop function
 +
var loop = function() {
 +
update();
 +
draw();
 +
window.requestAnimationFrame(loop, canvas);
 +
};
 +
window.requestAnimationFrame(loop, canvas);
 +
}
 +
/**
 +
* Initatite game objects and set start positions
 +
*/
 +
function init() {
 +
player.x = player.width;
 +
player.y = (HEIGHT - player.height)/2;
 +
ai.x = WIDTH - (player.width + ai.width);
 +
ai.y = (HEIGHT - ai.height)/2;
 +
ball.serve(1);
 +
}
 +
/**
 +
* Update all game objects
 +
*/
 +
function update() {
 +
ball.update();
 +
player.update();
 +
ai.update();
 +
}
 +
/**
 +
* Clear canvas and draw all game objects and net
 +
*/
 +
function draw() {
 +
ctx.fillRect(0, 0, WIDTH, HEIGHT);
 +
ctx.save();
 +
ctx.fillStyle = "#fff";
 +
ball.draw();
 +
player.draw();
 +
ai.draw();
 +
// draw the net
 +
var w = 4;
 +
var x = (WIDTH - w)*0.5;
 +
var y = 0;
 +
var step = HEIGHT/20; // how many net segments
 +
while (y < HEIGHT) {
 +
ctx.fillRect(x, y+step*0.25, w, step*0.5);
 +
y += step;
 +
}
 +
ctx.restore();
 +
}
 +
// start and run the game
 +
main();
 +
</script>
 +
</body>
 +
</html>
 
<div class="column full_size">
 
<div class="column full_size">
  

Revision as of 12:27, 31 July 2016

igem2016:ShanghaiTech

Pong


Please visit <a href="https://2016.igem.org/Safety">the main Safety page</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.

On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can go beyond the questions on the safety forms, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)


Safe Project Design

Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:

  • Choosing a non-pathogenic chassis
  • Choosing parts that will not harm humans / animals / plants
  • Substituting safer materials for dangerous materials in a proof-of-concept experiment
  • Including an "induced lethality" or "kill-switch" device
Safe Lab Work

What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!

Safe Shipment

Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?

<iframe src="http://www.ipfingerprints.com/" frameBorder="0" width="900" scrolling="no" height="90"></iframe>

</html>