✰ clicking game.

Angel <[email protected]> Sat, 8 Apr 2023 08:02:54 -0700 (PDT)
Newsgroups	alt.comp.lang.javascript
Message-ID	<[email protected]>
index.html:

=EF=BB=BF<html>
<head>
<meta name=3D"viewport" content=3D"width=3D345, initial-scale=3D1.0,=20
minimum-scale=3D1.0, maximum-scale=3D1.0">
<script src=3D"https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style type=3D"text/css">
.a1 {
color: white;
}
body {
background-image: url("aaa.jpg");
background-repeat: repeat;


}
.a15 {
color: white;
font-size:15px;
}
.currtime {
color: white;
}
.a2 {
color: white;
width: 345px;
position:absolute;
top:480px;
}
.link1 {
  color: white;
}
a:link {
color: white;
}
.a3 {
position:relative;
top:-1vw;
}
.myCanvas {
position:relative;
left:0vw;
display: inline-block;
top:-15px;
}
.score {
   font-size:15px;
   color: white;
}
.currtime {
   font-size:15px;
}
.toplist {
   font-size:15px;
   color: white;
}

.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; =20
      top: -60px;
   }
}
@media (min-width: 345px) {
.topplayers {
   display:block;
   position:relative;
   width:345px;
   vertical-align:top;
   left: 0px;
   top: -60px;
}
}

</style>
</head>
<body>
<h1 class=3D"a1"> =E2=9C=B0 clicking game. </h1>
<p class=3D"a3"></p>
<div class=3D"aaa1">
<canvas class=3D"myCanvas" width=3D"345" height=3D"430" style=3D"border:1px=
 solid=20
#d3d3d3;">
Error</canvas>
<p class=3D"a2"></p>
</div>
<div class=3D"topplayers">
<h1 class=3D"a15">Click as many circles as you can in 9 seconds !</h1>
<button id=3D"startgame1" name=3D"Start!"=20
onclick=3D"startgameofclicks()">Start!</button>
<h1 class=3D"a15">Score:</h1>
<div class=3D"score">0</div>
<h1 class=3D"a15">Time:</h1>
<div class=3D"currtime">0</div>=20
<h1 class=3D"a15">Top players:</h1>=20
<div class=3D"toplist"></div>=20
</div>


<script>
var aaa=3D16;
var aaa12=3D13;

var cola=3Dnew Array();
const circles =3D new Array();

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

var newcirclecreationcount=3D0;

var playerscore=3D0;


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


function randomdir(direction) {
   newdirection=3D"";
   while(true) {
      var newd=3DgetRandomInt(1,4);
  if(newd=3D=3D1) newdirection=3D"right";
  if(newd=3D=3D2) newdirection=3D"up";
  if(newd=3D=3D3) newdirection=3D"left";
  if(newd=3D=3D4) newdirection=3D"down";
  if(direction!=3Dnewdirection) break;
   }  =20
   return newdirection;
}
function randomdir() {
   newdirection=3D"";
   var newd=3DgetRandomInt(1,4);
   if(newd=3D=3D1) newdirection=3D"right";
   if(newd=3D=3D2) newdirection=3D"up";
   if(newd=3D=3D3) newdirection=3D"left";
   if(newd=3D=3D4) newdirection=3D"down";
   return newdirection;
}
function getnextdegree(degree) {
   var newdeg=3Ddegree+30;
   if(newdeg>359) newdeg=3Dnewdeg-360;
   return newdeg;
}


function circlescollidingextended(ca1_x, ca1_y, ca2_x, ca2_y, radiusa1) {
   =20
 if(Math.sqrt((ca1_x-ca2_x)*(ca1_x-ca2_x)+(ca1_y-ca2_y)*(ca1_y-ca2_y)<radiu=
sa1*2))=20
return true;
return false;
}

function cancreatecircle(x111, y111) {
  var collision=3Dfalse;
          for (var i=3D0; i<circles.length; i++) {
 =20
 if(circlescollidingextended(x111,y111,circles[i].x,circles[i].y,circles[i]=
.radius))=20
{
  collision=3Dtrue;
  return false;
  break;
   }
  }
  if(collision) return false;
  return true;
}

function circlescolliding(circlea1, circlea2) {
   =20
 if(Math.sqrt((circlea1.x-circlea2.x)*(circlea1.x-circlea2.x)+(circlea1.y-c=
irclea2.y)*(circlea1.y-circlea2.y))<circlea1.radius*2)=20
return true;
return false;
}


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


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



var c =3D document.getElementsByClassName("MyCanvas")[0];
var ctx =3D 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) +=20
(evy-circley)*(evy-circley)) < r;
}
c.addEventListener('click', function(event) {
     var rect =3D c.getBoundingClientRect();
=20
=20
=20
var mouse_x=3D(event.clientX - rect.left) / (rect.right - rect.left) *=20
c.width;
var mouse_y=3D(event.clientY - rect.top) / (rect.bottom - rect.top) *=20
c.height;

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

     var offsetX=3DcanvasOffset.left;
     var offsetY=3DcanvasOffset.top;
=20
var ev_x=3Devent.pageX-offsetX;
var ev_y=3Devent.pageY-offsetY;
for (var i =3D circles.length - 1; i >=3D 0; --i) {
if(isinCircle(ev_x, ev_y, circles[i].x+7.5, circles[i].y+7.5, 30)) {=20
if(gamestatus=3D=3D"stop") break;
playerscore++;
document.getElementsByClassName("score")[0].innerHTML =3D playerscore;
circles[i].dontdraw=3Dtrue;
            circlefadeout(circles[i], aaa*2, i);
} else {
}
}
});=20

function circlefadeout(circleabc, circlewidthabc,circleidx) {
circleabc.x=3Dcircleabc.x-15;
circleabc.y=3Dcircleabc.y-15;
circlewidthabc=3Dcirclewidthabc+56;
if(circlewidthabc>1221) {
circles.splice(circleidx,1);
return;
}
ctx.beginPath();
    ctx.clearRect(circleabc.x, circleabc.y, circlewidthabc, circlewidthabc)=
;
ctx.drawImage(imgObj, circleabc.x, circleabc.y,=20
circlewidthabc,circlewidthabc);
ctx.closePath();
setTimeout(function() { circlefadeout(circleabc, circlewidthabc,circleidx);=
=20
}, 30);
}


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=3Dgetnextdegree(circlea.degree); =20
  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=3DgetRandomInt(0,WIDTH);
var y_rand=3DgetRandomInt(0,HEIGHT);
if(!cancreatecircle(x_rand,y_rand)) {
newcirclecreationcount++;
if(newcirclecreationcount>5000) {
    gamestatus=3D'stop';
    return;
}
createnewcircle();
return;
}
var newid=3Dcirclenr++;
var newcirc =3D {
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 =3D function (event)
{
    if(gamestatus=3D=3D"stop") return;
}
var nameentered=3Dfalse;

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

function entername() {

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


function makeamove(circle) {

var x_rand=3DgetRandomInt(0,WIDTH);
var y_rand=3DgetRandomInt(0,HEIGHT);

switch(circle.direction) {
  case "right":
  {
  var collision=3Dfalse;
          for (var i=3D0; i<circles.length; i++) {
       if(circle.id!=3Dcircles[i].id) {
       if(circlescolliding(circle,circles[i])) {
      collision=3Dtrue;
  circle.direction=3D"left";
  circle.x=3Dx_rand;
  circle.y=3Dy_rand;
  return;
  break;
   }
   }
  }
  if(collision) break;
  if(circle.x<WIDTH) {
circle.x=3Dcircle.x+aaa12;
break;
  } else {
      circle.direction=3Drandomdir("right");
  makeamove(circle);
  break;
  }
  } break;
  case "left":
  {
  var collision=3Dfalse;
          for (var i=3D0; i<circles.length; i++) {
       if(circle.id!=3Dcircles[i].id) {
       if(circlescolliding(circle,circles[i])) {
      collision=3Dtrue;
 =20
  circle.direction=3D"right";
  circle.x=3Dx_rand;
  circle.y=3Dy_rand;

  return;
  break;
   }
   }
  }
  if(collision) break; =20
      if(circle.x>0) {
circle.x=3Dcircle.x-aaa12;
break;
  } else {
      circle.direction=3Drandomdir("left");
  makeamove(circle);
  break;
  }
  } break;
  case "up":
  {
  var collision=3Dfalse;
          for (var i=3D0; i<circles.length; i++) {
       if(circle.id!=3Dcircles[i].id) {
       if(circlescolliding(circle,circles[i])) {
      collision=3Dtrue;
 =20
  circle.direction=3D"down";
  circle.x=3Dx_rand;
  circle.y=3Dy_rand;

  return;
  break;
   }
   }
  }
  if(collision) break; =20
      if(circle.y>0) {
circle.y=3Dcircle.y-aaa12;
break;
  } else {
      circle.direction=3Drandomdir("up");
  makeamove(circle);
  break;
  }
  } break;
  case "down":
  {
  var collision=3Dfalse;
          for (var i=3D0; i<circles.length; i++) {
       if(circle.id!=3Dcircles[i].id) {
       if(circlescolliding(circle,circles[i])) {
      collision=3Dtrue;
  circle.direction=3D"up";
  circle.x=3Dx_rand;
  circle.y=3Dy_rand;

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

}

}

var playingtime=3D0;
function gameofclicks() {
    if(nameentered) return;
if(playingtime>9000) gamestatus=3D"stop";

    if(circles.length>1500) gamestatus=3D"stop";

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

for(var i=3D0; i<circles.length; i++) {
  var circle=3Dcircles[i];   =20
      makeamove(circle);
  circlenr++;
  if(circle.dontdraw=3D=3Dfalse) drawcircle(circle);    =20
  }
 =20
  currenttimea=3Dcurrenttimea+50;
  currenttimeb=3Dcurrenttimeb+50;
 =20
  document.getElementsByClassName("currtime")[0].innerHTML =3D=20
parseInt(currenttimea/1000);

  if(currenttimea-lastimea>100) {
      newcirclecreationcount=3D0;
      createnewcircle();
  lastimea=3Dcurrenttimea;
for(var i=3D0; i<circles.length; i++) {
                circles[i].direction=3Drandomdir(circles[i].direction);=20
}
 =20
  }

  if(currenttimeb-lastimeb>10000) {
      displaytoppl();
  lastimeb=3Dcurrenttimeb;
 =20
  }  =20
  playingtime=3Dplayingtime+50;
      setTimeout(gameofclicks, 50);
 =20
 =20
}

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



$( document ).ready(function() {

    imgObj=3Dnew Image();
    imgObj.src =3D 'pic.jpg';
   =20
    displaytoppl();
createnewcircle();
imgObj.onload =3D 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 $playerscore;
   function __construct($aa,$bb) {
       $this->playername=3D$aa;
       $this->playerscore=3D$bb;
      =20
   }
}

function ncmp($a, $b)
{
    if ($a =3D=3D $b) {
        return 0;
    }
    return ($a < $b) ? -1 : 1;
}


function mysort($aa, $bb)
{
    if($aa->playerscore=3D=3D$bb->playerscore) {
       return strcmp($aa->playername, $bb->playername);
    }
   =20
    return ncmp(($bb->playerscore),($aa->playerscore));

}

$scores=3Darray();
$filePath =3D getcwd().DIRECTORY_SEPARATOR."table1.txt";

if(file_exists($filePath)) {
  =20
    $objData =3D file_get_contents($filePath);
    $scores =3D unserialize($objData);   =20
    if($scores=3D=3Dnull) $scores=3Darray();   =20
} else {
    $f=3Dfopen($filePath, "w+");
    chmod($filePath, 0777);
    fclose($f);
}

$playername=3Dnull;
$playerscore=3Dnull;

$action=3D$_POST['action'];

if($action=3D=3D"add") {
    $playername=3D$_POST['playername'];
    $playername=3Dutf8_encode($playername);
    $playername=3Dstrip_tags($playername);   =20
        $playername=3Dsubstr($playername, 0, 14);       =20
    $playerscore=3D$_POST['playerscore'];   =20
}

if($action=3D=3D"add") {
    if($playername!=3D""&&$playername!=3D"null"&&$playername!=3Dnull&&$play=
erscore>-1&&$playerscore<54) {
            $obj =3D new Table1($playername,$playerscore);
                      =20
            $scores[]=3D$obj;
            $objData =3D serialize( $scores);
                      =20
            if(is_writable($filePath)) {
                $fffa=3Dfopen($filePath, "w+");
                fwrite($fffa, $objData);
                fclose($fffa);
            }   =20

    }


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

?>

pic.jpg: https://www.upload.ee/image/15098681/pic.jpg
aaa.jpg: https://www.upload.ee/image/15098682/aaa.jpg



starclicking.mywebcommunity.org
=C9=85
 |
 |
 |
Make Your best there ! ! ! ! ! ! ! ! ! !