Message-ID:

It's not an optical illusion, it just looks like one. -- Phil White

It contains of folder images, which has transparent star images 1.png up to 11.png. (Which you have to create yourself, because I cannot post it here)

Then file clickgame.html:

<html>
<head>
<meta name="viewport" content="width=345, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
<script src="yyyyyyyyyyyyyyyyyyyy.yy"></script>
<style type="text/css">
..a1 {
} ..a15 {
font-size:15px;
} ..currtime {
} ..a2 {
width: 100%;
position:absolute;
top:0;
} ..link1 {
} a:link {
} ..a3 {
position:relative;
top:0vw;
} ..myCanvas {
position:relative;
left:0vw;
display: inline-block;
top:0px;
} ..score {
font-size:15px;
} ..currtime {
font-size:15px;
} ..toplist {
font-size:15px;
}

..aaa1 {
display:inline-block;
height: 70vh;
display:absolute;
top:0px;
} .topplayers {
display:block;
position:absolute;
width:100%;
vertical-align:top;
left: 0;
top: 89vh;
}

body {
background-color: lightblue;
color: white;
}

</style>
</head>
<body>
<h1 class="a1">Clicking game. </h1>
<p class="a3"></p>
<div class="aaa1">
<canvas class="myCanvas" width="1300px" height="580px" style="border:1px solid
#d3d3d3;">
Error</canvas>
<p class="a2"></p>
</div>
<p></p>
<div class="topplayers">
<h1 class="a15">Click as many stars as you can in 15 seconds !</h1>
<button id="startgame1" name="B e g i n ........."
onclick="startgameofclicks()">B e g i n .........</button>
<h1 class="a15">Clicks:</h1>
<div class="score">0</div>
<h1 class="a15">Time:</h1>
<div class="currtime">0</div>
<h1 class="a15">Top players:</h1>
<div class="toplist"></div>
</div>

var circles = new Array();

var circlenr=1;
var x = 70;
var y = 100;
var radius = 43;
var nextX, nextY;
var WIDTH = 1200;
var HEIGHT = 480;
var countt=0;
var circlesnumber=1;
var gamestatus="";
var newcirclecreationcount=0;
var playerscore=0;

function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function circlescollidingextended(ca1_x, ca1_y, ca2_x, ca2_y, radiusa1) {

if(Math.sqrt((ca1_x-ca2_x)*(ca1_x-ca2_x)+(ca1_y-ca2_y)*(ca1_y-ca2_y)<radiusa1*2))
return true;
return false;
}

function circlescolliding(circlea1, circlea2) {

if(Math.sqrt((circlea1.x-circlea2.x)*(circlea1.x-circlea2.x)+(circlea1.y-circlea2.y)*(circlea1.y-circlea2.y))<circlea1.radius*2)
return true;
return false;
}

var c = document.getElementsByClassName("MyCanvas")[0];
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 555, 1200);
ctx.closePath();

function isinCircle(evx, evy, circlex, circley, r) {
return Math.sqrt((evx-circlex)*(evx-circlex) +
(evy-circley)*(evy-circley)) < r;
} c.addEventListener('click', function(event) {
var rect = c.getBoundingClientRect();

var mouse_x=(event.clientX - rect.left) / (rect.right - rect.left) *
c.width;
var mouse_y=(event.clientY - rect.top) / (rect.bottom - rect.top) *
c.height;

var canvasOffset=$(".myCanvas").offset();

var imgObj;

function clear() {
ctx.clearRect(0, 0, c.width, c.height);
}

function drawcircle(circlea) {

ctx.save();
ctx.beginPath();
ctx.translate(circlea.x+aaa,circlea.y+aaa);
circlea.degree=getnextdegree(circlea.degree);
ctx.rotate(circlea.degree*Math.PI/180);
ctx.translate(-circlea.x-aaa,-circlea.y-aaa);
imgObj=new Image();
imgObj.src=circlea.imagesrc;
ctx.drawImage(imgObj, circlea.x, circlea.y, aaa*2,aaa*2);
ctx.closePath();
ctx.restore();

}

function createnewcircle() {

c.onclick = function (event)
{ if(gamestatus=="stop") return;
} var nameentered=false;

function displaytoppl() {

$.ajax({
url: 'process.php',
dataType: 'json',
type: 'POST',
async: true,
data: { action: 'get'},
success: function( data, textStatus, jQxhr ){
var data1=data;
var listofpl="Player     Clicks<br>";
for(var i=0; i<data1.length; i++) {
listofpl=listofpl+data1[i]['playername']+"    "+data1[i]['playerscore']+"<br>";
} document.getElementsByClassName("toplist")[0].innerHTML = listofpl;
},
error: function( jqXhr, textStatus, errorThrown ){
alert(errorThrown);
} });
}

function entername() {

if(nameentered) return;
var name = prompt("Your name:", "");
var psc=playerscore;
nameentered=true;
$.ajax({
url: 'process.php',
dataType: 'text',
type: 'POST',
async: true,
data: { playername: name, playerscore: psc, action: 'add'},
success: function( data, textStatus, jQxhr ){
displaytoppl();
},
error: function( jqXhr, textStatus, errorThrown ){
displaytoppl();
} });
}

function makeamove(circle) {

var x_rand=getRandomInt(0,WIDTH);
var y_rand=getRandomInt(0,HEIGHT);

switch(circle.direction) {
case "right":
{
var collision=false;
for (var i=0; i<circles.length; i++) {
if(circle.id!=circles[i].id) {
if(circlescolliding(circle,circles[i])) {
collision=true;
circle.direction="left";
circle.x=x_rand;
circle.y=y_rand;
return;
break;
}
}
}
if(collision) break;
if(circle.x<WIDTH) {
circle.x=circle.x+aaa12;
break;
} else {
circle.direction=randomdir("right");
makeamove(circle);
break;
}
} break;
case "left":
{
var collision=false;
for (var i=0; i<circles.length; i++) {
if(circle.id!=circles[i].id) {
if(circlescolliding(circle,circles[i])) {
collision=true;

circle.direction="right";
circle.x=x_rand;
circle.y=y_rand;

Click here to read the complete article

Subject	Author
I am presenting you a new game: a game of clicking stars.	Kristjan Robam

It's not an optical illusion, it just looks like one. -- Phil White

devel / comp.lang.javascript / I am presenting you a new game: a game of clicking stars.