Star clicking Javascript game (uses also php).

Kristjan Robam

unread,

Apr 4, 2020, 6:37:25 AM4/4/20

to brasil javascript

Please change a1.txt to jquery.min.js .....

Kristjan Robam

Tel. 372 6861327

E-mail: ro b am ma n 2 0 20 @h ot m a i l . c om

(Please remove empty characters)

a1.txt

index.html

pic.jpg

process.php

K

unread,

Aug 1, 2022, 5:48:17 AM8/1/22

to brasil javascript

A little process.php modification:

<?php

class Table1 {
var $playername;
var $playerscore;
function __construct($aa,$bb) {
$this->playername=$aa;
$this->playerscore=$bb;

}
}
function mysort($aa, $bb)
{
if($aa->playerscore==$bb->playerscore) {
return strcmp($aa->playername, $bb->playername);
}
return $aa->playerscore<$bb->playerscore;

}

$scores=array();
$filePath = getcwd().DIRECTORY_SEPARATOR."table1.txt";

if(file_exists($filePath)) {

$objData = file_get_contents($filePath);
$scores = unserialize($objData);
if($scores==null) $scores=array();
} else {
$f=fopen($filePath, "w+");
chmod($filePath, 0777);
fclose($f);
}

$playername=null;
$playerscore=null;

$action=$_POST['action'];

if($action=="add") {
$playername=$_POST['playername'];
$playername=strip_tags($playername);
$playername=substr($playername, 0, 14);
$playerscore=$_POST['playerscore'];
}

if($action=="add") {
if($playername!=""&&$playerscore>-1&&$playerscore<54) {
$obj = new Table1($playername,$playerscore);

$scores[]=$obj;
$objData = serialize( $scores);

if(is_writable($filePath)) {
$fffa=fopen($filePath, "w+");
fwrite($fffa, $objData);
fclose($fffa);
}

}

} else if($action=="get") {
usort($scores, "mysort");
echo json_encode($scores,true);
}

?>

Message has been deleted

A

unread,

Dec 13, 2023, 8:13:55 AM12/13/23

to brasil javascript

clickinggame.mygamesonline.org

Message has been deleted

A I

unread,

Dec 28, 2023, 9:39:06 AM12/28/23

to brasil javascript

process.php, pic.jpg, a.js - jquery (smaller version), a.htm

a.htm:

<html>
<head>
<meta name="viewport" content="width=345, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
<script src="a.js"></script>
<style type="text/css">
.a1 {
color: #F0F0F0;
margin-top: -0.05%;
}
body {
background-color: #88c9f2;
}
.a15 {
color: #f1c12a;
font-size:15px;
}
.currtime {
color: #f1c12a;
}
.a2 {
color: #b2bc33;
width: 345px;
position:absolute;
top:480px;
}
.link1 {
color: #b2bc33;
}
a:link {
color: #b2bc33;
}
.a3 {
position:relative;
top:-1vw;
}
.myCanvas {
position:relative;
left:0vw;
display: inline-block;
top:-15px;
}
.score {
font-size:15px;
color: #f1c12a;
}
.currtime {
font-size:15px;
}
.toplist {
font-size:15px;
color: #f1c12a;
}

.aaa1 {
display:inline-block;
height: 520px;
display:absolute;
top:10px;
}
@media (max-width: 345px) {
.topplayers {
display:block;
position:relative;
width:345px;
vertical-align:top;
left: 0px;
top: -60px;
}
}
@media (min-width: 345px) {
.topplayers {
display:block;
position:relative;
width:345px;
vertical-align:top;
left: 0px;
top: -60px;
}
}

/*
* {
outline: 5px dotted green;
}
*/
</style>
</head>
<body>
<h1 class="a1"> Click as many ★'s as You can in 14 seconds ⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!⠀⠀!!!!!!</h1>
<p class="a3"></p>
<div class="aaa1">
<canvas class="myCanvas" width="345" height="430" style="border:1px solid
#d3d3d3;">
Error</canvas>
<p class="a2"></p>
</div>
<div class="topplayers">
<h1 class="a15"></h1>
<button id="startgame1" name="Start!"
onclick="startgameofclicks()">Start!</button>
<h1 class="a15">Score:</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>

<script>
var aaa=16;
var aaa12=3;

var cola=new Array();
const circles = new Array();

var circlenr=1;
var x = 10;
var y = 100;
var r = 15;
var nextX, nextY;
var WIDTH = 313;
var HEIGHT = 399;
var countt=0;
var circlesnumber=1;
var gamestatus="";
var currenttimea=0;
var lastimea=0;
var currenttimeb=0;
var lastimeb=0;

var newcirclecreationcount=0;

var playerp=0;

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

function randomdir(direction) {
newdirection="";
while(true) {
var newd=getRandomInt(1,4);
if(newd==1) newdirection="right";
if(newd==2) newdirection="up";
if(newd==3) newdirection="left";
if(newd==4) newdirection="down";
if(direction!=newdirection) break;
}
return newdirection;
}
function randomdir() {
newdirection="";
var newd=getRandomInt(1,4);
if(newd==1) newdirection="right";
if(newd==2) newdirection="up";
if(newd==3) newdirection="left";
if(newd==4) newdirection="down";
return newdirection;
}
function getnextdegree(degree) {
var newdeg=degree+10;
if(newdeg>359) newdeg=newdeg-360;
return newdeg;
}

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 cancreatecircle(x111, y111) {
var collision=false;
for (var i=0; i<circles.length; i++) {

if(circlescollidingextended(x111,y111,circles[i].x,circles[i].y,circles[i].radius))
{
collision=true;
return false;
break;
}
}
if(collision) return false;
return true;
}

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;
}

function rgbToHexaaa(ccccc) {
var hex = ccccc.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + rgbToHexaaa(r) + rgbToHexaaa(g) + rgbToHexaaa(b);
}

function getnextcolor() {
var aa1=getRandomInt(0,256);
var aa2=getRandomInt(0,256);
var aa3=getRandomInt(0,256);
return rgbToHex(aa1, aa2, aa3);
}

var c = document.getElementsByClassName("MyCanvas")[0];
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 347, 423);
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 offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var ev_x=event.pageX-offsetX;
var ev_y=event.pageY-offsetY;
for (var i = circles.length - 1; i >= 0; --i) {
if(isinCircle(ev_x, ev_y, circles[i].x+7.5, circles[i].y+7.5, 30)) {
if(gamestatus=="stop") break;
playerp++;
document.getElementsByClassName("score")[0].innerHTML = playerp;
circles[i].dontdraw=true;
circlefadeout(circles[i], aaa*2, i);
} else {
}
}
});

function circlefadeout(circleabc, circlewidthabc,circleidx) {
circleabc.x=circleabc.x-3;
circleabc.y=circleabc.y-3;
circlewidthabc=circlewidthabc+20;
if(circlewidthabc>1500) {

circles.splice(circleidx,1);
return;
}
ctx.beginPath();
ctx.clearRect(circleabc.x, circleabc.y, circlewidthabc, circlewidthabc);
ctx.drawImage(imgObj, circleabc.x, circleabc.y,
circlewidthabc,circlewidthabc);
ctx.closePath();
setTimeout(function() { circlefadeout(circleabc, circlewidthabc,circleidx);
}, 30);
}

function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

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);
ctx.drawImage(imgObj, circlea.x, circlea.y, aaa*2,aaa*2);
ctx.closePath();
ctx.restore();

}

function createnewcircle() {
var x_rand=getRandomInt(0,WIDTH);
var y_rand=getRandomInt(0,HEIGHT);
if(!cancreatecircle(x_rand,y_rand)) {
newcirclecreationcount++;
if(newcirclecreationcount>5000) {
gamestatus='stop';
return;
}
createnewcircle();
return;
}
var newid=circlenr++;
var newcirc = {
x: x_rand,
y: y_rand,
radius: aaa,
color: getRandomColor(),
direction: randomdir(),
id: 're'+newid,
degree: 0,
dontdraw: false
}
circles.push(newcirc);
drawcircle(newcirc);
}

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]['playerp']+"<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 plp=playerp;
nameentered=true;
$.ajax({
url: 'process.php',
dataType: 'text',
type: 'POST',
async: true,
data: { playername: name, playerp: plp, 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;

return;
break;
}
}
}
if(collision) break;
if(circle.x>0) {
circle.x=circle.x-aaa12;
break;
} else {
circle.direction=randomdir("left");
makeamove(circle);
break;
}
} break;
case "up":
{
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="down";
circle.x=x_rand;
circle.y=y_rand;

return;
break;
}
}
}
if(collision) break;
if(circle.y>0) {
circle.y=circle.y-aaa12;
break;
} else {
circle.direction=randomdir("up");
makeamove(circle);
break;
}
} break;
case "down":
{
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="up";
circle.x=x_rand;
circle.y=y_rand;

return;
break;
}
}
}
if(collision) break;
if(circle.y<HEIGHT) {
circle.y=circle.y+aaa12;
break;
} else {
circle.direction=randomdir("down");
makeamove(circle);
break;
}
} break;
default:

}

}

var playingtime=0;
function gameofclicks() {
if(nameentered) return;
if(playingtime>14000) gamestatus="stop";

if(circles.length>6650) gamestatus="stop";

if(nameentered == 'true') return;
if(gamestatus == 'stop') entername();
countt++;
clear(WIDTH, HEIGHT);

for(var i=0; i<circles.length; i++) {
var circle=circles[i];
makeamove(circle);
circlenr++;
if(circle.dontdraw==false) drawcircle(circle);
}

currenttimea=currenttimea+30;
currenttimeb=currenttimeb+30;

document.getElementsByClassName("currtime")[0].innerHTML =
parseInt(currenttimea/1000);

if(currenttimea-lastimea>140) {
newcirclecreationcount=0;
createnewcircle();
lastimea=currenttimea;
for(var i=0; i<circles.length; i++) {
circles[i].direction=randomdir(circles[i].direction);
}

}

if(currenttimeb-lastimeb>10000) {
displaytoppl();
lastimeb=currenttimeb;

}
playingtime=playingtime+30;
setTimeout(gameofclicks, 30);

}

$( document ).ready(function() {

imgObj=new Image();
imgObj.src = 'pic.jpg';

displaytoppl();
createnewcircle();
imgObj.onload = function()
{
ctx.drawImage(imgObj, circles[0].x, circles[0].y, 32, 32);
}
});

function startgameofclicks() {
$("#startgame1").remove();
setTimeout(gameofclicks, 50);
}

</script>
</body>
</html>

process.php:

<?php

class Table1 {
var $playername;

var $playerp;
function __construct($aa,$bb) {
$this->playername=$aa;
$this->playerp=$bb;

}
}
function arrange($aa, $bb)
{
if($aa->playerp==$bb->playerp) {
return 0;
}
if($aa->playerp<$bb->playerp) return 1;
return -1;

}

$p=array();
$filePath = getcwd().DIRECTORY_SEPARATOR."a.a";

if(file_exists($filePath)) {

$objData = file_get_contents($filePath);
$p = unserialize($objData);
if($p==null) $p=array();

} else {
$f=fopen($filePath, "w+");
chmod($filePath, 0777);
fclose($f);
}

$playername=null;

$playerp=null;

$action=$_POST['action'];

if($action=="add") {
$playername=$_POST['playername'];
$playername=strip_tags($playername);

$playername=substr($playername, 0, 2223);
$playerp=$_POST['playerp'];
}

if($action=="add") {
if(($playername!="")&&($playername!="null")&&($playername!=null)&&$playerp>-1&&$playerp<59084) {

$obj = new Table1($playername,$playerp);

$p[]=$obj;
$objData = serialize( $p);

if(is_writable($filePath)) {
$fffa=fopen($filePath, "w+");
fwrite($fffa, $objData);
fclose($fffa);
}

}

} else if($action=="get") {

usort($p, "arrange");
echo json_encode($p,true);
}

?>

A I

unread,

Dec 28, 2023, 9:39:36 AM12/28/23

to brasil javascript

Live :

alittlebitentertainment.atwebpages.com/a.htm

..............

Reply all

Reply to author

Forward