Add another experiment: 'Addition Game'
srifqi
parent
f31e471325
commit
5917eb56fd
|
|
@ -0,0 +1,246 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Addition Game</title>
|
||||
<style>
|
||||
*, td {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#game {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
#game tbody tr td {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.p1 {
|
||||
border: none;
|
||||
background: #33b5e5;
|
||||
}
|
||||
|
||||
.p1:hover {
|
||||
background: #0099cc;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
border: none;
|
||||
background: #99cc00;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.p2:hover {
|
||||
background: #669900;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 150px;
|
||||
border-radius: 150px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.control button, .adder button {
|
||||
height: 30px;
|
||||
width: 75%;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-top: 5px;
|
||||
height: 70px;
|
||||
font-size: 15px;
|
||||
width: 75%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="font-size: 10px;">
|
||||
Addition Game<br/>
|
||||
Fun and makes you smarter!
|
||||
</div>
|
||||
<table id="game">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div id="p2_right" class="p2 number"></div></td>
|
||||
<td><div id="p2_control" class="control"></td>
|
||||
<td><div id="p2_left" class="p2 number"></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="p2_add1" class="adder"></div>
|
||||
<div id="p1_add2" class="adder"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="status1" class="p2 stat"></div>
|
||||
<div id="status2" class="p1 stat"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="p2_add2" class="adder"></div>
|
||||
<div id="p1_add1" class="adder"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="p1_left" class="p1 number"></div></td>
|
||||
<td><div id="p1_control" class="control"></div></td>
|
||||
<td><div id="p1_right" class="p1 number"></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script src="about:blank"></script>
|
||||
<script>
|
||||
var $ = function(id){
|
||||
return document.getElementById(id);
|
||||
};
|
||||
|
||||
var p1 = [1,1];
|
||||
var p2 = [1,1];
|
||||
var turn = 0; //p1's turn
|
||||
var d = {
|
||||
p1: {
|
||||
c: $("p1_control"),
|
||||
r: $("p1_right"),
|
||||
l: $("p1_left"),
|
||||
a1: $("p1_add1"),
|
||||
a2: $("p1_add2"),
|
||||
s: $("status1")
|
||||
},
|
||||
p2: {
|
||||
c: $("p2_control"),
|
||||
r: $("p2_right"),
|
||||
l: $("p2_left"),
|
||||
a1: $("p2_add1"),
|
||||
a2: $("p2_add2"),
|
||||
s: $("status2")
|
||||
},
|
||||
};
|
||||
|
||||
function log(text){
|
||||
d.p1.s.innerHTML = d.p2.s.innerHTML = text;
|
||||
}
|
||||
|
||||
function set(player,id,amount){
|
||||
var lr = ["left","right"];
|
||||
log(amount+" was added to player"+player+"'s "+lr[id]+" number");
|
||||
window["p"+player][id] = (window["p"+player][id] + amount)%5;
|
||||
turn = (turn+1) %2;
|
||||
update();
|
||||
}
|
||||
|
||||
function setb(player,a,b){
|
||||
log("player"+player+" swap between two number ("+a+","+b+")");
|
||||
var p = window["p"+player];
|
||||
p[0] = a;
|
||||
p[1] = b;
|
||||
turn = (turn+1) %2;
|
||||
update();
|
||||
}
|
||||
|
||||
function get_control(player){
|
||||
var p = window["p"+player];
|
||||
var total = p[0]+p[1];
|
||||
var pairs = [];
|
||||
for(var i=0;i<5;i++){
|
||||
if(
|
||||
total-i<5&&
|
||||
total-i>=0&&
|
||||
p[0]!==i&&
|
||||
p[1]!==total-i
|
||||
) {
|
||||
pairs.push([i,total-i]);
|
||||
}
|
||||
}
|
||||
return pairs;
|
||||
}
|
||||
|
||||
function checkwins(){ //check for any wins
|
||||
if(p1[0] === p1[1] && p1[0] === 0){
|
||||
return "player2";
|
||||
} else if(p2[0] === p2[1] && p2[0] === 0){
|
||||
return "player1";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
log("Ready, Set, Go!");
|
||||
update();
|
||||
};
|
||||
|
||||
function update(){
|
||||
var winner = checkwins();
|
||||
if(winner!==false){
|
||||
log(winner+" wins!");
|
||||
}
|
||||
//player1
|
||||
d.p1.l.innerHTML = p1[0];
|
||||
d.p1.r.innerHTML = p1[1];
|
||||
d.p1.a1.innerHTML = [
|
||||
"<button class='p1' onclick='set(2,0,"+p1[0]+")' "+
|
||||
(p1[0]===0||turn===1||winner!==false?"disabled":"")+
|
||||
">add "+p1[0]+"</button>",
|
||||
"<br/>",
|
||||
"<button class='p1' onclick='set(2,0,"+p1[1]+")' "+
|
||||
(p1[1]===0||turn===1||winner!==false?"disabled":"")+
|
||||
">add "+p1[1]+"</button>"
|
||||
].join("");
|
||||
d.p1.a2.innerHTML = [
|
||||
"<button class='p1' onclick='set(2,1,"+p1[0]+")' "+
|
||||
(p1[0]===0||turn===1||winner!==false?"disabled":"")+
|
||||
">add "+p1[0]+"</button>",
|
||||
"<br/>",
|
||||
"<button class='p1' onclick='set(2,1,"+p1[1]+")' "+
|
||||
(p1[1]===0||turn===1||winner!==false?"disabled":"")+
|
||||
">add "+p1[1]+"</button>"
|
||||
].join("");
|
||||
d.p1.c.innerHTML = "";
|
||||
var c1 = get_control(1);
|
||||
for(var i=0;i<c1.length;i++){
|
||||
d.p1.c.innerHTML +=
|
||||
"<button class='p1' onclick='setb(1,"+c1[i][0]+","+c1[i][1]+")'"+
|
||||
(turn===1||winner!==false?"disabled":"")+
|
||||
">"+c1[i].join("-")+"</button><br/>";
|
||||
}
|
||||
//player2
|
||||
d.p2.l.innerHTML = p2[0];
|
||||
d.p2.r.innerHTML = p2[1];
|
||||
d.p2.a1.innerHTML = [
|
||||
"<button class='p2' onclick='set(1,0,"+p2[0]+")' "+
|
||||
(p2[0]===0||turn===0||winner!==false?"disabled":"")+
|
||||
">add "+p2[0]+"</button>",
|
||||
"<br/>",
|
||||
"<button class='p2' onclick='set(1,0,"+p2[1]+")' "+
|
||||
(p2[1]===0||turn===0||winner!==false?"disabled":"")+
|
||||
">add "+p2[1]+"</button>"
|
||||
].join("");
|
||||
d.p2.a2.innerHTML = [
|
||||
"<button class='p2' onclick='set(1,1,"+p2[0]+")' "+
|
||||
(p2[0]===0||turn===0||winner!==false?"disabled":"")+
|
||||
">add "+p2[0]+"</button>",
|
||||
"<br/>",
|
||||
"<button class='p2' onclick='set(1,1,"+p2[1]+")' "+
|
||||
(p2[1]===0||turn===0||winner!==false?"disabled":"")+
|
||||
">add "+p2[1]+"</button>"
|
||||
].join("");
|
||||
d.p2.c.innerHTML = "";
|
||||
var c2 = get_control(2);
|
||||
for(var i=0;i<c2.length;i++){
|
||||
d.p2.c.innerHTML +=
|
||||
"<button class='p2' onclick='setb(2,"+c2[i][0]+","+c2[i][1]+")'"+
|
||||
(turn===0||winner!==false?"disabled":"")+
|
||||
">"+c2[i].join("-")+"</button><br/>";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src='../js/nav.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
<li><a href='waterdrop.html' title='2014'>Waterdrop</a></li>
|
||||
<li><a href='positive_lens.html' title='June 15, 2014'>Positive Lens</a></li>
|
||||
<li><a href='negative_lens.html' title='June 20, 2014'>Negative Lens</a></li>
|
||||
<li><a href='addition_game.html' title='September 29, 2014'>Addition Game</a></li>
|
||||
</ul>
|
||||
<script src='../js/nav.js'></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
<script>
|
||||
function G(a,b){for(a=a||1,b=b||1,0>a&&(a=-a),0>b&&(b=-b),b>a&&(a=[b,b=a][0]);;){if(a%=b,0==a)return b;if(b%=a,0==b)return a}}function L(a,b){return a/G(a,b)*b}function k(a,b,c,d){var e=L(b,d),f=e/b*a-e/d*c,g=G(e,f);return[f/g,e/g]}for($ in a)a[$[0]+$[$.length>>1]]=a[$];function l(a,b,c,d,e){var f=a*-d+b*c,a=c-a,b=d-b;return(b*e+f)/a}var e=1e3,g=500,i=500,j=250,h=50,s=240,f=120,K=k(1,f,1,s),S=K[1]/K[0],M=Math.abs(S,s),H=h*M;c.width=e;c.height=g;window.onkeydown=function(a){switch(a.keyCode){case 37:i-1>s&&s++;break;case 38:j-1>h&&h++;break;case 39:s>0&&s--;break;case 40:h>0&&h--}d()};function d(){with(K=k(1,f,1,s),S=K[1]/K[0],M=Math.abs(S/s),H=h*M,a)(A=function(x,y){le(x,y);so();bn();}),cr(0,0,e,g),strokeStyle="#00f",bn(),me(0,j),A(e,j),me(i,9),A(i,g),me(i-3,4),A(i+3,4),me(i,1),A(i,7),strokeStyle="#f00",me(i-s,j),A(i-s,j-h),f>s&&setLineDash([4]),me(i+S,j),A(i+S,j-H*(f>=s?1:-1)),f>s&&setLineDash([0]),strokeStyle="#2af",me(i-f,j-5),A(i-f,j+5),me(i+f,j-5),A(i+f,j+5),me(i-2*f,j-5),A(i-2*f,j+5),me(i+2*f,j-5),A(i+2*f,j+5),strokeStyle="#282",me(i-s,j-h),le(i,j-h),A(e,l(i,j-h,i+f,j,e)),(s<=f&&(setLineDash([4]),me(i,j-h),A(0,l(i,j-h,i+f,j,0)),setLineDash([0]))),me(i-s,j-h),A(e,l(i-s,j-h,i,j,e)),(s<=f&&(setLineDash([4]),me(i-s,j-h),A(0,l(i-s,j-h,i,j,0)),setLineDash([0])))}d();
|
||||
</script>
|
||||
<script src='../js/nav.js'></script>
|
||||
<script src='../js/nav.js'></script>
|
||||
</body></html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue